Produktseiten - Erhalten Sie Anpassungsinformationen für Produkte

Kai · ‎07-01-2022

Vorsicht

Dies ist ein Tutorial für Fortgeschrittene für Vintage Themes und wird von Shopify nicht unterstützt. Kenntnisse in HTML, CSS, JavaScript und Liquid sind erforderlich. Erwägen Sie, einen Shopify-Experten einzustellen, wenn Sie die Schritte im Tutorial nicht selber ausführen möchten oder wenn Sie ein 2.0 Theme von Shopify verwenden.

Sie können Anpassungsinformationen für Produkte mithilfe von Line Item Properties sammeln. Line Item Properties sind benutzerdefinierte Formularfelder, die Sie der Produktseite hinzufügen können, sodass Kunden eine Auswahl treffen oder Informationen zu einem Produkt hinzufügen können. Wenn Sie beispielsweise eine Produktgravur anbieten, können Sie die Eigenschaften der Line Item Properties verwenden, damit Kunden den Text eingeben können, der auf dem Produkt graviert werden soll.

Tipp: Die Eigenschaften von Line Item Properties unterscheiden sich von Bestellnotizen und Einkaufswagenattributen. Bestellnotizen, die in jedem kostenlosen Shopify-Design verfügbar sind, ermöglichen es Ihnen, spezielle Anweisungen zur Vorbereitung und Lieferung einer Bestellung zu erfassen. Warenkorbattribute werden von Kunden auf der Warenkorbseite angegeben und werden verwendet, um zusätzliche Informationen zu einer gesamten Bestellung aufzuzeichnen.

Beim Sammeln von Anpassungsinformationen für Produkte unterscheidet man zwischen Unterteilten/Sectioned & Nicht unterteilten/Non-sectioned Themes.

Unterteilte Themen

Verwenden Sie eine App, um Anpassungsinformationen für Produkte zu sammeln.

Sie können ein kostenloses oder kostenpflichtiges App zur Produktanpassung aus dem Shopify App Store installieren, um Ihrer Produktseite ganz einfach benutzerdefinierte Felder hinzuzufügen.

Bearbeiten Sie Ihren Themencode, um Anpassungsinformationen für Produkte zu sammeln.

Sie können den Code Ihres Designs bearbeiten, indem Sie eine alternative Produktseitenvorlage erstellen, die benutzerdefinierte Formularfelder oder Line Item Properties enthält. Anschließend können Sie Ihre neue Vorlage auf jedes Produkt anwenden, für das Sie Anpassungsinformationen von Kunden sammeln möchten.

Erstellen Sie eine Vorlage, die Line Item Properties enthält

So erstellen Sie eine neue Produktseitenvorlage:

Gehen Sie in Ihrem Shopify-Adminbereich zu Onlineshop > Themes.
Suchen Sie das Theme, das Sie bearbeiten möchten und klicken Sie dann auf Aktionen > Code bearbeiten.
Klicken Sie im Themeverzeichnis auf Neue Vorlage hinzufügen.
Wählen Sie das Produkt aus dem Dropdown-Menü und benennen Sie das Theme
customizable:
Klicken Sie auf Theme erstellen. Dadurch wird eine Kopie Ihrer product.liquid Vorlage mit dem Namen product.customizable.liquid erstellt. Die neue Datei wird im Code-Editor geöffnet.

Suchen Sie die folgende Codezeile:

{% Abschnitt 'Produktvorlage' %}

Ersetzen Sie es durch:

{% Abschnitt 'Produkt-anpassbare-Vorlage' %}

Klicken Sie auf Speichern.
Klicken Sie im Verzeichnis Abschnitte auf Neuen Abschnitt hinzufügen.
Benennen Sie Ihre neue Abschnittsdatei product-customizable-template. Klicken Sie auf Abschnitt erstellen. Ihre neue Datei wird daraufhin im Code-Editor geöffnet.
Löschen Sie den gesamten Standardcode, sodass die Datei leer ist. Kopieren Sie den gesamten Inhalt aus Ihrer product-template.liquid Datei (im Verzeichnis „ Sections “) und fügen Sie ihn in Ihre neue Datei „product-customizable-template“ ein.
Klicken Sie auf Speichern.

Erstellen Sie benutzerdefinierte Formularfelder

Sie können Ihrer Produktseite beliebig viele benutzerdefinierte Formularfelder hinzufügen. Sie können das Shopify UI Elements Generator- Werkzeug verwenden, um auf einfache Weise den HTML- und Liquid-Code für jedes Formularfeld zu generieren, das Sie Ihrer Warenkorbseite hinzufügen möchten. Dieses Werkzeug wurde von Shopify entwickelt, um das Hinzufügen von benutzerdefinierten Benutzeroberflächenelementen wie Formularfeldern und Symbolen zu Shopify-Designs zu vereinfachen.

Gehen Sie zum Generator für Shopify-UI-Elemente.
Wählen Sie im Abschnitt Formularfeld festlegen den gewünschten Formularelementtyp aus dem Dropdown-Menü Formularfeldtyp aus:
Wenn Sie möchten, dass Ihr Design verhindert, dass Kunden ein Produkt in den Warenkorb legen, bevor sie Ihr Formularfeld ausgefüllt haben, aktivieren Sie Erforderlich.
Sie können eine Vorschau Ihres Formularfelds im Abschnitt Vorschau sehen:
Kopieren Sie den generierten Code aus dem Feld im Abschnitt Holen Sie sich Ihren Code:

Fügen Sie benutzerdefinierte Formularfelder hinzu

So fügen Sie Ihrer Vorlage benutzerdefinierte Formularfelder hinzu:

Gehen Sie in Ihrem Shopify-Adminbereich zu Onlineshop > Themes.
Suchen Sie das Theme, das Sie bearbeiten möchten, und klicken Sie dann auf Aktionen > Code bearbeiten.
Klicken Sie im Verzeichnis auf Sections product-customizable-template.liquid auf.
Suchen Sie den Code type="submit" in der Datei. Dies ist Teil des Codes für die Schaltfläche In den Warenkorb. Fügen Sie in einer neuen Zeile über dem Codeblock, der die Schaltfläche „ Zum Warenkorb hinzufügen“ enthält, die Formularfelder für Ihre Produktanpassung ein:

Im obigen Beispiel fügt der Formularfeldcode ein Gravurfeld hinzu, in das Kunden Text für eine benutzerdefinierte Gravur eingeben können. Die Zeile, in der Sie den Code platzieren, bestimmt, wo das Formularfeld auf Ihrer Produktseite angezeigt wird. Sie können damit experimentieren, den Code an verschiedenen Stellen in der Datei einzufügen.
Klicken Sie auf Speichern.

Damit die neuen Formularfelder auf den Produktseiten erscheinen, müssen Sie Ihre anpassbaren Produkte so einstellen, dass sie die von Ihnen erstellte neue Vorlage product-customizable-template.liquid verwenden.

Wenden Sie Ihre neue Vorlage auf ein Produkt an

So wenden Sie eine Vorlage auf ein Produkt an:

Gehen Sie in Ihrem Shopify-Adminbereich zu Produkte > Alle Produkte.
Klicken Sie auf den Namen des Produkts, das Ihre neue Vorlage verwenden soll.
Wählen Sie im Abschnitt Themevorlagen aus dem Menü product.customizable als Produktvorlage aus.
Klicken Sie auf Speichern.

Die von Ihnen erstellten benutzerdefinierten Formularfelder werden nun auf der Seite dieses Produkts angezeigt. Wiederholen Sie die Schritte, um die Vorlage für mehrere Produkte zu aktivieren. Sie können den Bulk-Editor verwenden, um Ihre Vorlage für viele Produkte gleichzeitig zu aktivieren.

Datei-Uploads zulassen

Wenn Sie eine Formularfeldeingabe mit type="file" erstellen, zeigt der Browser des Kunden eine Datei-Upload-Schaltfläche für dieses Formularfeld an. Als Ladenbesitzer können Sie alle Dateien anzeigen, die Ihre Kunden hochladen. Das Hochladen von Dateien durch Kunden ermöglicht einige kreative Geschäftsideen – wie das Drucken von Kundengrafiken auf Leinwand oder das Akzeptieren von benutzerdefinierten Grafiken zum Drucken auf Kleidung.

Wenn das Formular in Ihrem product-template.liquid ein Datei-Upload-Feld enthält, muss das Formular-Tag in Ihrer anpassbaren Produktvorlage das Attribut enctype="multipart/form-data" haben.

Hinweis : Datei-Uploads funktionieren nur auf einem Warenkorb im Seitenstil und sind nicht mit Warenkorb-Schubladen oder Warenkorb-Popups kompatibel. Um Ihren Warenkorbstil zu ändern, gehen Sie zum Theme-Editor.

Anpassungen im Warenkorb anzeigen

Wenn Ihr Theme keine Anpassungen im Einkaufswagen anzeigt, können Sie entweder Ihrer cart-template.liquid oder Ihrer cart.liquid Datei Code hinzufügen, um die Line Item Properties zu überprüfen und sie anzuzeigen, falls vorhanden.

Line Item Properties im Einkaufswagen anzeigen

So zeigen Sie Produktanpassungsinformationen im Warenkorb an:

Gehen Sie in Ihrem Shopify-Adminbereich zu Onlineshop > Themes.
Suchen Sie das Theme, das Sie bearbeiten möchten, und klicken Sie dann auf Aktionen > Code bearbeiten .
Klicken Sie im Verzeichnis Sections auf cart-template.liquid. Wenn Ihr Theme kein cart-template.liquid hat, öffnen Sie das Vorlagenverzeichnis und klicken Sie auf cart.liquid.

Suchen Sie die Zeile mit dem Code {{ item.product.title }}. Fügen Sie in einer neuen Zeile unten den folgenden Code ein:

{% assign property_size = item.properties | size %}

{% if property_size > 0 %}

  {% for p in item.properties %}

    {% assign first_character_in_key = p.first | truncate: 1, '' %}

    {% unless p.last == blank or first_character_in_key == '_' %}

      {{ p.first }}:

      {% if p.last contains '/uploads/' %}

        <a class="lightbox" href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>

      {% else %}

        {{ p.last }}

      {% endif %}

      <br>

    {% endunless %}

  {% endfor %}

{% endif %}

Klicken Sie auf Speichern.

Dieser Code überprüft jedes Line Item, um festzustellen, ob sie Line Item Properties hat, und zeigt sie an, falls vorhanden.

Aktualisieren Sie Links, die Artikel aus dem Einkaufswagen entfernen

Alle Links, die Artikel aus Ihrem Einkaufswagen entfernen, müssen aktualisiert werden, damit sie mit benutzerdefinierten Line Item Properties funktionieren:

Gehen Sie in Ihrem Shopify-Adminbereich zu Onlineshop > Themes.
Suchen Sie das Theme, das Sie bearbeiten möchten, und klicken Sie dann auf Aktionen > Code bearbeiten.
Klicken Sie im Verzeichnis Sections auf cart-template.liquid. Wenn Ihr Theme kein cart-template.liquid hat, öffnen Sie das Vorlagenverzeichnis und klicken Sie auf cart.liquid.
Finden Sie alle a Tags, deren href Wert mit /cart/change beginnt.
Ändern Sie den vollen href Wert in href="/cart/change?line={{ forloop.index }}&quantity=0".
Wiederholen Sie diese Schritte für jedes a Tag in cart-template.liquid, das einen href Wert hat, der mit /cart/change beginnt.
Klicken Sie auf Speichern.

Aktualisieren Sie die Artikelmengenfelder im Warenkorb

Alle Felder, die Artikelmengen in Ihrem Einkaufswagen anzeigen, müssen ebenfalls aktualisiert werden, damit sie mit benutzerdefinierten Line Item Properties funktionieren:

Gehen Sie in Ihrem Shopify-Adminbereich zu Onlineshop > Themes.
Suchen Sie das Theme, das Sie bearbeiten möchten, und klicken Sie dann auf Aktionen > Code bearbeiten .
Klicken Sie im Verzeichnis Sections auf cart-template.liquid. Wenn Ihr Theme kein cart-template.liquid hat, öffnen Sie das Vorlagenverzeichnis und klicken Sie auf cart.liquid.
Suchen Sie alle input Tags mit dem name Wert updates[{{ item.id }}].
Ändern Sie den vollständigen name Wert in name="updates[]".
Wiederholen Sie diese Schritte für alle input Tags in cart-template.liquid, die einen Namenswert von updates[] haben.
Klicken Sie auf Speichern.

Anpassungen in E-Mail-Vorlagen anzeigen

Sie können optional auch Line Item Properties in E-Mail-Benachrichtigungen anzeigen. Dadurch können Kunden ihre Produktanpassungen sehen, wenn sie eine E-Mail zu ihrer Bestellung erhalten.

Gehen Sie in Ihrem Shopify-Adminbereich zu Einstellungen > Benachrichtigungen .
Klicken Sie auf den Namen der Benachrichtigungsvorlage, der Sie Line Item Properties hinzufügen möchten.

Finden Sie den folgenden Code:

{{ line.title }}

Ersetzen Sie es durch:

{{ line.title }}{% for p in line.properties %}{% unless p.last == blank %} - {{ p.first }}: {{ p.last }}{% endunless %}{% endfor %}

Klicken Sie auf Speichern.
Wiederholen Sie diese Schritte für alle anderen E-Mail-Benachrichtigungen, denen Sie Line Item Properties hinzufügen möchten.

Line Item Properties ausblenden (optional)

Line Item Properties, die Sie in Ihre anpassbaren Produktvorlagen integriert haben, sind auf Ihren Produktseiten und, wenn Sie Ihren Warenkorbcode angepasst haben, auch auf Ihrer Warenkorbseite sichtbar. Die Eigenschaften der Einzelposten sind auch auf der Checkout-Seite sichtbar. Es kann vorkommen, dass eine der Line Item Properties für den Kunden nicht sichtbar sein soll, z. B. wenn Sie einem Produkt interne Informationen (z. B. eine Paket-ID oder eine Tracking-Nummer) hinzufügen möchten.

Wenn Sie möchten, dass eine der Line Item Properties auf den Warenkorb- oder Checkout-Seiten ausgeblendet wird, können Sie einen Unterstrich _ an den Anfang ihres name Wertes setzen. Der name Wert für eine interne Bundle-ID könnte beispielsweise so aussehen:

name="properties[_bundle_id]"

Wenn Sie den Code in diesem Tutorial nicht verwendet haben, um Line Item Properties (oder Anpassungen) im Einkaufswagen anzuzeigen, enthält Ihr Designcode möglicherweise nicht den Code, der Line Item Properties mit Namenswerten, die mit einem Unterstrich beginnen, ausgeblendet hält. Um Ihren Designcode so zu ändern, dass die Eigenschaften der Line Item Properties im Einkaufswagen ausgeblendet werden, können Sie die folgenden Codezeilen zu Ihrer cart-template.liquid oder cart.liquid-Datei hinzufügen:

{% assign first_character_in_key = p.first | truncate: 1, '' %}
{% unless p.last == blank or first_character_in_key == '_' %}

Die Ergebnisse sollten ungefähr so aussehen:

{% assign property_size = item.properties | size %}
{% if property_size > 0 %}
  {% for p in item.properties %}
    {% assign first_character_in_key = p.first | truncate: 1, '' %}
    {% unless p.last == blank or first_character_in_key == '_' %}
      {{ p.first }}:
      {% if p.last contains '/uploads/' %}
        <a href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
      {% else %}
        {{ p.last }}
      {% endif %}
    {% endunless %}
  {% endfor %}
{% endif %}

Eigenschaften der Line Item Properties beim Checkout anzeigen.

Line Item Properties sind für Kunden während des Bezahlvorgangs nur sichtbar, wenn sie als Zeichenfolge gespeichert werden . Die Nummern werden ausgeblendet, sind jedoch weiterhin mit der Bestellung verknüpft und werden im Bildschirm „Verwaltung“ > „Bestellungen“ angezeigt. Zum Beispiel:

line_item_prop: "1234" (wird auf der Bestellung und während des Bezahlvorgangs sichtbar)
line_item_prop: 1234 (wird auf der Bestellung sichtbar und während des Bezahlvorgangs ausgeblendet)

Aus Gründen des Kontexts wurde dies als Funktion eingeführt, da Line Item Properties häufig zum Speichern von IDs verwendet wurden, die nicht für den Kunden bestimmt waren. So können Designentwickler die Eigenschaften von Einzelposten während des Bezahlvorgangs ausblenden, indem sie sie als Ganzzahl oder Zeichenfolge mit einem Unterstrich am Anfang speichern.

Nicht unterteilte Themen

Verwenden Sie eine App, um Anpassungsinformationen für Produkte zu sammeln

Sie können eine Produktanpassungs-App aus dem Shopify App Store installieren, um Ihrer Produktseite ganz einfach benutzerdefinierte Felder hinzuzufügen.

Bearbeiten Sie Ihren Themencode, um Anpassungsinformationen für Produkte zu sammeln

Sie können den Code Ihres Themes bearbeiten, indem Sie eine alternative Produktseitenvorlage erstellen, die benutzerdefinierte Formularfelder oder Line Item Properties enthält. Anschließend können Sie Ihre neue Vorlage auf jedes Produkt anwenden, für das Sie Anpassungsinformationen von Kunden sammeln möchten.

Erstellen Sie eine Vorlage, die Line Item Properties enthält

So erstellen Sie eine neue Produktseitenvorlage:

Gehen Sie in Ihrem Shopify-Adminbereich zu Onlineshop > Themes.
Suchen Sie das Theme, das Sie bearbeiten möchten, und klicken Sie dann auf Aktionen > Code bearbeiten.
Klicken Sie im Vorlagenverzeichnis auf Neue Vorlage hinzufügen.
Wählen Sie das Produkt aus dem Dropdown-Menü und benennen Sie die Vorlage customizable:
Klicken Sie auf Vorlage erstellen. Dadurch wird eine Kopie Ihrer product.liquid Vorlage mit dem Namen product.customizable.liquid erstellt.

Erstellen Sie benutzerdefinierte Formularfelder

Sie können Ihrer Produktseite beliebig viele benutzerdefinierte Formularfelder hinzufügen. Sie können das Shopify UI Elements Generator- Tool verwenden, um auf einfache Weise den HTML- und Liquid-Code für jedes Formularfeld zu generieren, das Sie Ihrer Warenkorbseite hinzufügen möchten. Dieses Tool wurde von Shopify entwickelt, um das Hinzufügen von benutzerdefinierten Benutzeroberflächenelementen wie Formularfeldern und Symbolen zu Shopify-Designs zu vereinfachen.

Gehen Sie zum Generator für Shopify-UI-Elemente.
Wählen Sie im Abschnitt Formularfeld festlegen den gewünschten Formularelementtyp aus dem Dropdown-Menü Formularfeldtyp aus:
Aktivieren Sie Erforderlich, wenn Ihr Theme verhindern soll, dass Kunden ein Produkt in den Warenkorb legen, bevor sie Ihr Formularfeld ausgefüllt haben.
Sie können eine Vorschau Ihres Formularfelds im Abschnitt Vorschau sehen:
Kopieren Sie den generierten Code aus dem Feld im Abschnitt Holen Sie sich Ihren Code:

Fügen Sie benutzerdefinierte Formularfelder hinzu

So fügen Sie Ihrer Vorlage benutzerdefinierte Formularfelder hinzu:

Gehen Sie in Ihrem Shopify-Adminbereich zu Onlineshop > Themes.
Suchen Sie das Theme, das Sie bearbeiten möchten, und klicken Sie dann auf Aktionen > Code bearbeiten.
Klicken Sie im Vorlagenverzeichnis auf product.customizable.liquid.
Suchen Sie den Code type="submit" in der Datei. Dies ist Teil des Codes für die Schaltfläche In den Warenkorb. Fügen Sie in einer neuen Zeile über dem Codeblock, der die Schaltfläche „Zum Warenkorb hinzufügen“ enthält, die Formularfelder für Ihre Produktanpassung ein:

Im obigen Beispiel fügt der Formularfeldcode ein Gravurfeld hinzu, in das Kunden Text für eine benutzerdefinierte Gravur eingeben können. Die Zeile, in der Sie den Code platzieren, bestimmt, wo das Formularfeld auf Ihrer Produktseite angezeigt wird. Sie können damit experimentieren, den Code an verschiedenen Stellen in der Datei einzufügen.
Klicken Sie auf Speichern.

Damit die neuen Formularfelder auf den Produktseiten erscheinen, müssen Sie Ihre anpassbaren Produkte so einstellen, dass sie die von Ihnen erstellte neue Vorlage product-customizable-template.liquid verwenden.

Wenden Sie Ihre neue Vorlage auf ein Produkt an

So wenden Sie eine Vorlage auf ein Produkt an:

Gehen Sie in Ihrem Shopify-Adminbereich zu Produkte > Alle Produkte.
Klicken Sie auf den Namen des Produkts, das Ihre neue Vorlage verwenden soll.
Wählen Sie im Abschnitt Designvorlagen aus dem Menü Produktvorlage product.customizable aus.
Klicken Sie auf Speichern.

Die von Ihnen erstellten benutzerdefinierten Formularfelder werden nun auf der Seite dieses Produkts angezeigt. Wiederholen Sie die Schritte, um die Vorlage für mehrere Produkte zu aktivieren. Sie können den Bulk-Editor verwenden, um Ihre Vorlage für viele Produkte gleichzeitig zu aktivieren.

Datei-Uploads zulassen

Wenn Sie eine Formularfeldeingabe mit dem Attribut type="file" erstellen, zeigt der Browser des Kunden eine Datei-Upload-Schaltfläche für dieses Formularfeld an. Als Ladenbesitzer können Sie alle Dateien anzeigen, die Ihre Kunden hochladen. Das Hochladen von Dateien durch Kunden ermöglicht einige kreative Geschäftsideen – wie das Drucken von Kundengrafiken auf Leinwand oder das Akzeptieren von benutzerdefinierten Grafiken zum Drucken auf Kleidung.

Wenn das Formular in Ihrem product-template.liquid ein Datei-Upload-Feld enthält, muss das form Tag in Ihrer anpassbaren Produktvorlage das Attribut enctype="multipart/form-data" haben.

Hinweis : Datei-Uploads funktionieren nur auf einem Warenkorb im Seitenstil und sind nicht mit Warenkorb-Schubladen oder Warenkorb-Popups kompatibel. Um Ihren Warenkorbstil zu ändern, gehen Sie zum Theme-Editor.

Anpassungen im Warenkorb anzeigen

Wenn Ihr Design keine Anpassungen im Warenkorb anzeigt, können Sie Ihrer cart.liquid Datei Code hinzufügen, um die Eigenschaften von Line Item Properties zu überprüfen und diese anzuzeigen, falls vorhanden.

Line Item Properties im Einkaufswagen anzeigen

So zeigen Sie Produktanpassungsinformationen im Warenkorb an:

Gehen Sie in Ihrem Shopify-Adminbereich zu Onlineshop > Themes.
Suchen Sie das Theme, das Sie bearbeiten möchten, und klicken Sie dann auf Aktionen > Code bearbeiten.
Klicken Sie im Vorlagenverzeichnis auf cart.liquid.
Suchen Sie die Zeile mit dem Code {{ item.product.title }}. Fügen Sie in einer neuen Zeile unten den folgenden Code ein:

{% assign property_size = item.properties | size %}

{% if property_size > 0 %}

  {% for p in item.properties %}

    {% assign first_character_in_key = p.first | truncate: 1, '' %}

    {% unless p.last == blank or first_character_in_key == '_' %}

      {{ p.first }}:

      {% if p.last contains '/uploads/' %}

        <a class="lightbox" href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>

      {% else %}

        {{ p.last }}

      {% endif %}

      <br>

    {% endunless %}

  {% endfor %}

{% endif %}

Klicken Sie auf Speichern.

Dieser Code überprüft alle Lime Items, um festzustellen, ob sie Line Item Properties haben, und zeigt sie an, falls vorhanden.

Aktualisieren Sie Links, die Artikel aus dem Einkaufswagen entfernen

Alle Links, die Artikel aus Ihrem Einkaufswagen entfernen, müssen aktualisiert werden, damit sie mit benutzerdefinierten Line Item Properties funktionieren:

Gehen Sie in Ihrem Shopify-Adminbereich zu Onlineshop > Themes.
Suchen Sie das Theme, das Sie bearbeiten möchten, und klicken Sie dann auf Aktionen > Code bearbeiten.
Klicken Sie im Vorlagenverzeichnis auf cart.liquid.
Suchen Sie alle a Tags, deren href Wert mit /cart/change beginnt.
Ändern Sie den vollständigen href Wert in href="/cart/change?line={{ forloop.index }}&quantity=0".
Wiederholen Sie diese Schritte für jedes a Tag in cart.liquid, das einen href Wert hat, der mit /cart/change beginnt.
Klicken Sie auf Speichern.

Aktualisieren Sie die Artikelmengenfelder im Warenkorb

Alle Felder, die Artikelmengen in Ihrem Einkaufswagen anzeigen, müssen ebenfalls aktualisiert werden, damit sie mit benutzerdefinierten Line Item Properties funktionieren:

Gehen Sie in Ihrem Shopify-Adminbereich zu Onlineshop > Themes.
Suchen Sie das Theme, das Sie bearbeiten möchten, und klicken Sie dann auf Aktionen > Code bearbeiten .
Klicken Sie im Vorlagenverzeichnis auf cart.liquid.
Suchen Sie alle Eingabe-Tags mit einem Namenswert von updates[{{ item.id }}].
Ändern Sie den vollständigen Namenswert in name="updates[]".
Wiederholen Sie diese Schritte für alle input Tags in cart.liquid, die einen Namenswert von updates[] haben.
Klicken Sie auf Speichern.

Anpassungen in E-Mail-Vorlagen anzeigen

Sie können optional auch Line Item Properties in E-Mail-Benachrichtigungen anzeigen. Dadurch können Kunden ihre Produktanpassungen sehen, wenn sie eine E-Mail zu ihrer Bestellung erhalten.

Gehen Sie in Ihrem Shopify-Adminbereich zu Einstellungen > Benachrichtigungen.
Klicken Sie auf den Namen der Benachrichtigungsvorlage, der Sie Positionseigenschaften hinzufügen möchten.

Finden Sie den folgenden Code:

{{ line.title }}

Ersetzen Sie ihn durch:

{{ line.title }}{% for p in line.properties %}{% unless p.last == blank %} - {{ p.first }}: {{ p.last }}{% endunless %}{% endfor %}

Klicken Sie auf Speichern.

Wiederholen Sie diese Schritte für alle anderen E-Mail-Benachrichtigungen, denen Sie Werbebuchungseigenschaften hinzufügen möchten.

Line Item Properties ausblenden (optional)

Line Item Properties, die Sie in Ihre anpassbaren Produktvorlagen integriert haben, sind auf Ihren Produktseiten und, wenn Sie Ihren Warenkorbcode angepasst haben, auch auf Ihrer Warenkorbseite sichtbar. Die Eigenschaften der Line Item Properties sind auch auf der Checkout-Seite sichtbar. Es kann vorkommen, dass eine Positionseigenschaft für den Kunden nicht sichtbar sein soll, z. B. wenn Sie einem Produkt interne Informationen (z. B. eine Paket-ID oder eine Tracking-Nummer) hinzufügen möchten.

Wenn Sie möchten, dass die Line Item Properties auf den Warenkorb- oder Checkout-Seiten ausgeblendet wird, können Sie einen Unterstrich _ an den Anfang ihres name Wertes setzen. Der name Wert für eine interne Bundle-ID könnte beispielsweise so aussehen:

name="properties[_bundle_id]"

Wenn Sie den Code in diesem Tutorial nicht verwendet haben, um Line Item Properties (oder Anpassungen) im Einkaufswagen anzuzeigen, enthält Ihr Designcode möglicherweise nicht den Code, der Line Item Properties mit Namenswerten, die mit einem Unterstrich beginnen, ausgeblendet hält. Um Ihren Designcode so zu ändern, dass die Eigenschaften der Line Item Properties im Einkaufswagen ausgeblendet werden, können Sie die folgenden Codezeilen zu Ihrer cart-template.liquid oder cart.liquid-Datei hinzufügen:

{% assign first_character_in_key = p.first | truncate: 1, '' %}
{% unless p.last == blank or first_character_in_key == '_' %}

Die Ergebnisse sollten ungefähr so aussehen:

{% assign property_size = item.properties | size %}
{% if property_size > 0 %}
  {% for p in item.properties %}
    {% assign first_character_in_key = p.first | truncate: 1, '' %}
    {% unless p.last == blank or first_character_in_key == '_' %}
      {{ p.first }}:
      {% if p.last contains '/uploads/' %}
        <a href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
      {% else %}
        {{ p.last }}
      {% endif %}
    {% endunless %}
  {% endfor %}
{% endif %}

Eigenschaften der Line Item Properties beim Checkout anzeigen.

Line Item Properties sind für Kunden während des Bezahlvorgangs nur sichtbar, wenn sie als Zeichenfolge gespeichert werden. Die Nummern werden ausgeblendet, sind jedoch weiterhin mit der Bestellung verknüpft und werden im Bildschirm „Verwaltung“ > „Bestellungen“ angezeigt. Zum Beispiel:

line_item_prop: "1234" (wird auf der Bestellung und während des Bezahlvorgangs sichtbar)
line_item_prop: 1234 (wird auf der Bestellung sichtbar und während des Bezahlvorgangs ausgeblendet)

Aus Gründen des Kontexts wurde dies als Funktion eingeführt, da Line Item Properties häufig zum Speichern von IDs verwendet wurden, die nicht für den Kunden bestimmt waren. So können Designentwickler die Eigenschaften von Line Item Properties während des Bezahlvorgangs ausblenden, indem sie sie als Ganzzahl oder Zeichenfolge mit einem Unterstrich am Anfang speichern.

Kai | Social Care @ Shopify
- War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen!
- Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung
- Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

Produktseiten - Erhalten Sie Anpassungsinformationen für Produkte