Wie kann ich Blogbeiträge auf Shopify-Produktseiten und Produkte in Blogbeiträgen anzeigen?

Überblick

Informative Inhalte können die Conversion-Rate steigern, wenn sie dort angezeigt werden, wo die Kaufabsicht am höchsten ist. Auf Shopify können Sie relevante Blogbeiträge auf Produktseiten einbinden und Produkte mit „In den Warenkorb“-Optionen direkt in Blogartikel integrieren. So verknüpfen Sie Recherche und Einkauf und reduzieren den Aufwand.

In diesem Tutorial lernen Sie, wie Sie mit Online Store 2.0-Abschnitten, Metafeldern und dynamischen Quellen die Verknüpfungen verwalten oder automatisieren. Sie erstellen Metafelder, um Links zwischen Produkten und Artikeln zu speichern, diese in Ihren Theme-Vorlagen darzustellen und einfache Fallbacks sowie Tipps zur Leistungsoptimierung hinzuzufügen.

Hier werden ausschließlich Standardfunktionen des Themes genutzt. Es sind keine benutzerdefinierten Apps erforderlich. Bei Bedarf können Sie die Funktionalität später jederzeit mit benutzerdefiniertem Liquid oder einer Abschnitts-App erweitern.

Inhalt

Voraussetzungen und Schlüsselkonzepte

Sie arbeiten mit drei Kernfunktionen: Blogs und Artikeln, Metafeldern und dynamischen Datenquellen. Artikel befinden sich in einem Blog. Mit Metafeldern können Sie Produkte und Artikel mit benutzerdefinierten Daten verknüpfen. Dynamische Datenquellen ermöglichen es, Abschnitte und Blöcke ohne Codeänderungen an diese Metafelder zu binden.

  • Blogs und Artikel werden in Ihrem Adminbereich unter „Onlineshop“ und dann „Blogbeiträge“ verwaltet. Jeder Artikel kann ein Titelbild, Schlagwörter und Rich Content enthalten.
  • Metafelder können Verweise auf andere Ressourcen speichern, zum Beispiel eine Liste von Artikeln zu einem Produkt oder eine Liste von Produkten zu einem Artikel.
  • Dynamische Datenquellen ermöglichen es, dass Abschnittseinstellungen Werte aus Metafeldern abrufen, sodass Inhaltsaktualisierungen keine Bearbeitung des Theme-Codes erfordern.

Was Sie aktivieren müssen

  • Online-Shop 2.0-Theme mit JSON-Vorlagen und Abschnitten überall.
  • Berechtigungen zum Bearbeiten von Produkten, Blogbeiträgen und Metafeldern im Shopify-Adminbereich.
  • Zugriff auf den Theme-Editor zum Hinzufügen oder Konfigurieren von Abschnitten in Produkt- und Artikelvorlagen.

Siehe die offizielle Dokumentation zu Blogs , Metafeldern und dynamischen Quellen .

Sie erstellen ein Produkt-Metafeld, das auf Artikel verweist, und rendern diese Artikel anschließend in der Produktvorlage. Dadurch erhalten Sie eine individuelle kuratierte Kontrolle pro Produkt mit einer einfachen Fallback-Funktion für aktuelle Beiträge, falls keine kuratierten Artikel vorhanden sind.

Schritt 1 – Erstellen Sie ein Produkt-Metafeld für Artikel

  1. Im Shopify-Adminbereich gehen Sie zu Einstellungen, dann zu Benutzerdefinierte Daten und anschließend zu Produkte.
  2. Klicken Sie auf „Definition hinzufügen“ und geben Sie als Namen „Verwandte Artikel“ und als Namespace und Schlüssel „custom.related_articles“ ein.
  3. Wählen Sie unter „Typ“ die Option „Referenz“ und dann „Artikel“ aus und aktivieren Sie die Option „Werteliste“, damit Sie mehrere Beiträge anhängen können.
  4. Speichern Sie die Metafelddefinition.

Schritt 2 – Artikel zu jedem Produkt zusammenstellen

  1. Öffnen Sie ein Produkt im Adminbereich und scrollen Sie zum Abschnitt Metafelder.
  2. Klicken Sie auf das Metafeld „Verwandte Artikel“ und wählen Sie einen oder mehrere Artikel aus, die über dieses Produkt informieren oder häufig gestellte Fragen dazu beantworten.
  3. Produkt retten.

Schritt 3 – Artikel in der Produktvorlage rendern

  1. Klicken Sie im Online-Shop auf „Themes“ und anschließend auf „Anpassen“, um den Theme-Editor für Ihre Produktvorlage zu öffnen.
  2. Fügen Sie einen Abschnitt hinzu, der dynamische Inhalte unterstützt, z. B. einen benutzerdefinierten Liquid-Abschnitt oder einen Rich-Text-Abschnitt, der für eine Liste konfiguriert ist.
  3. Binden Sie die Abschnittseinstellung über dynamische Quellen an das Produkt-Metafeld. Falls Ihr Theme Artikel nicht nativ auflistet, verwenden Sie einen benutzerdefinierten Liquid-Block und durchlaufen Sie product.metafields.custom.related_articles.

Tipp – Zeigen Sie den Titel des Artikels, das Veröffentlichungsdatum und einen kurzen Auszug an. Beschränken Sie die Liste aus Gründen der Übersichtlichkeit auf drei oder vier Punkte.

Wie kann ich Produkte mit Warenkorb-Option in Blogbeiträge einfügen?

Sie erstellen ein Artikel-Metafeld, das auf Produkte verweist, und rendern anschließend Produktkarten oder ein Produktformular in der Artikelvorlage. So können Leser Artikel in den Warenkorb legen, ohne den Inhalt zu verlassen.

Schritt 1 – Erstellen Sie ein Artikel-Metafeld für Produkte

  1. Im Shopify-Adminbereich gehen Sie zu Einstellungen, dann zu Benutzerdefinierte Daten und anschließend zu Blogbeiträgen.
  2. Klicken Sie auf „Definition hinzufügen“ und geben Sie als Namen „Empfohlene Produkte“ und als Namespace und Schlüssel „custom.featured_products“ ein.
  3. Wählen Sie unter „Typ“ die Option „Referenz“ und dann „Produkte“ aus und aktivieren Sie die Werteliste.
  4. Speichern Sie die Metafelddefinition.

Schritt 2 – Produkte für jeden Artikel auswählen

  1. Öffnen Sie einen Artikel im Adminbereich und scrollen Sie zum Abschnitt Metafelder.
  2. Wählen Sie ein oder mehrere Produkte aus, die zum Inhalt passen.
  3. Artikel speichern.

Schritt 3 – Produkte in der Artikelvorlage rendern

  1. Öffnen Sie den Design-Editor Ihrer Artikelvorlage.
  2. Fügen Sie einen Abschnitt oder Block hinzu, der Produktkarten anzeigt. Viele Themes enthalten einen Bereich für Produktempfehlungen oder ausgewählte Produkte, den Sie mit dynamischen Datenquellen verknüpfen können. Alternativ können Sie einen benutzerdefinierten Liquid-Block verwenden, um jedes ausgewählte Produkt mit Preis, Verfügbarkeit und einem Formular zum Hinzufügen zum Warenkorb anzuzeigen.
  3. Testen Sie es mit einem Artikelentwurf und bestätigen Sie, dass Produkte von der Artikelseite aus in den Warenkorb gelegt werden können.

Hinweis: Platzieren Sie Kaufoptionen nach Möglichkeit oberhalb der sichtbaren Stelle. Bei längeren Artikeln wiederholen Sie den Produktblock nach den Hauptabschnitten.

Wie kann ich den Abgleich von Inhalten über Tags oder die Suche automatisieren?

Wenn Sie nicht jede Seite manuell bearbeiten können, verwenden Sie vorhersehbare Tags oder Keywords für Produkte und Artikel und filtern Sie anschließend dynamisch. Stellen Sie ein manuelles Überschreibungs-Metafeld bereit, um bei Bedarf bestimmte Elemente anzupinnen.

Schritt 1 – Wählen Sie eine gemeinsame Taxonomie

  • Wählen Sie ein System aus, zum Beispiel Produkt-Tags wie Anleitung, Ratgeber oder nach Zutat, oder eine Produkt-Metafeld-Schlüsselwortzeichenfolge, die mit Artikel-Tags übereinstimmt.
  • Dokumentieren Sie die Regeln, damit Autoren und Händler die Tags einheitlich anwenden.

Schritt 2 – Implementieren Sie eine Fallback-Abfrage in Liquid

  • Auf Produktseiten, wenn product.metafields.custom.related_articles leer ist, werden aktuelle Artikel aus einem bestimmten Blog aufgelistet oder nach einem gemeinsamen Tag gefiltert, der in product.tags vorkommt.
  • Wenn bei Artikeln das Artikel-Metafeld "Empfohlene Produkte" leer ist, wird eine Sammlung von Bestsellern angezeigt oder die Produkte werden nach einem gemeinsamen Tag oder Keyword-Metafeld gefiltert.

Schritt 3 – Leistung und Relevanz prüfen

  • Um Schleifen in großen Katalogen zu vermeiden, sollten automatisierte Listen auf eine kleine Anzahl von Elementen beschränkt werden.
  • Überprüfen Sie die Klick- und Warenkorb-Hinzufügungsraten für jeden Bereich und passen Sie die Inhalte oder Filter an. Gegebenenfalls müssen Sie ein benutzerdefiniertes Tracking im Google Tag Manager oder über eine andere Methode einrichten.

Beispiele – Liquid-Snippets für Vorlagen

Diese Beispiele zeigen minimalen Liquid-Code, den Sie in einem benutzerdefinierten Liquid-Abschnitt oder einem kleinen Theme-Snippet einfügen können. Passen Sie das Markup an Ihre Theme-Komponenten an.

 
{% if product.metafields.custom.related_articles != blank %}

 {% for article in product.metafields.custom.related_articles %}
  • {{ article.title }} ( {{ article.url }} ) {{ article.published_at | date: "%b %d, %Y" }} {% if article.excerpt != blank %}

    {{ article.excerpt }}

    {% endif %}
    • {% endfor %} {% else %} {%- assign blog_handle = "news" -%}
      {% for a in blogs[blog_handle].articles limit: 3 %}
    • {{ a.title }} ( {{ a.url }} )
      • {% endfor %}
    {% endif %}

    Loop präsentierte Produkte im Artikel

     
{% if article.metafields.custom.featured_products != blank %}

 {% for product in article.metafields.custom.featured_products %}

    

     {{ product.title }}

    


     {{ product.url }}
    


    
 {% if product.available %}
 {{ product.price | money }} 
{% else %}
 Ausverkauft
 {% endif %} 

    


    


 


    


    
 {% endfor %}

    Stellen Sie wunderschöne Pakete zusammen.

    Pakete und Kits auf Shopify

    Maximieren Sie Ihren durchschnittlichen Bestellwert mit individuell kombinierbaren Bundles und Kits.

     Im App Store ansehen

    + 7 Tage kostenlose Testversion