Einen Buy Button oder einen eingebetteten Warenkorb bearbeiten oder löschen

Buy Buttons und Warenkörbe werden aus dem Einbettungscode generiert, den du dem Quell-HTML deiner Webseite hinzufügst. Wenn du das Erscheinungsbild oder Verhalten einer Schaltfläche oder eines Warenkorbs auf einer Webseite ändern möchtest, musst du den zugehörigen Einbettungscode ändern.

Löschen eines Buy Buttons, einer eingebetteten Kategorie oder eines eingebetteten Warenkorbs

So löschst du einen bestehenden Buy Button, eine Kategorie oder einen eingebetteten Warenkorb:

  1. Öffne den HTML-Quellcode der Webseite, die den Buy Button, die eingebettete Kategorie oder den eingebetteten Warenkorb enthält.

  2. Lösche den gesamten Einbettungscode aus dem Quell-HTML. Der Einbettungscode für einen Buy Botton sieht wie folgt aus:

 

<div data-embed_type="product" data-shop="yourstorename.myshopify.com" data-product_name="Product Name" data-product_handle="product-name" data-has_image="true" data-display_size="compact" data-redirect_to="checkout" data-buy_button_text="Buy now" data-buy_button_out_of_stock_text="Out of Stock" data-buy_button_product_unavailable_text="Unavailable" data-button_background_color="7db461" data-button_text_color="ffffff" data-product_modal="false" data-product_title_color="000000" data-next_page_button_text="Next page"></div>

<script type="text/javascript">
document.getElementById(&#39;ShopifyEmbedScript&#39;) || document.write(&#39;<script type="text/javascript" src="https://widgets.shopifyapps.com/assets/widgets/embed/client.js" id="ShopifyEmbedScript">&lt;\/script&gt;&#39;);
</script><noscript><a href="https://yourstorename.myshopify.com/cart/1590898625:1" target="_blank">Kaufe dein Produkt</a></noscript> 
  1. Speichere deine Änderungen.

Bearbeiten eines Buy Buttons

Um das Erscheinungsbild oder die Einstellungen eines vorhandenen Buy Buttons zu ändern, musst du den Inhalt des Haupt-div-Tags im Einbettungscode bearbeiten, der im HTML-Quellcode angezeigt wird:

 

<div data-embed_type="product" data-shop="yourstorename.myshopify.com" data-product_name="Product Name" data-product_handle="product-name" data-has_image="true" data-display_size="compact" data-redirect_to="checkout" data-buy_button_text="Buy now" data-buy_button_out_of_stock_text="Out of Stock" data-buy_button_product_unavailable_text="Unavailable" data-button_background_color="7db461" data-button_text_color="ffffff" data-product_modal="false" data-product_title_color="000000" data-next_page_button_text="Next page"></div>

 

Jede Funktion des eingebetteten Buy Buttons wird durch ein separates Attribut im Haupt-div-Tag gesteuert. Du kannst diese Attribute direkt im Quell-HTML hinzufügen, entfernen oder aktualisieren.

Wenn du beispielsweise einen vorhandenen Buy Button verwenden möchtest, um den Benutzer auf die Produktseite anstatt auf die Checkout-Seite zu verweisen:

  1. Öffne den HTML-Code der Seite mit dem Buy Button, den du ändern möchtest.

  2. Suche das Attribut data-redirect_to im Haupt-div-Tag des Einbettungscodes des Buy Buttons:

    data-redirect_to="checkout"

  3. Ändere den Attributswert in product:

    data-redirect_to="product"

  4. Speichere deine Änderungen.

Das Haupt-Tag div eines Buy Buttons hat viele Attribute, die du bearbeiten kannst:

Editierbare Buy Button-Tag-Attribute
Attribut Wert Standard
data-shop Die myshopify-Domain (z. B storename.myshopify.com .), die mit der Schaltfläche verbunden ist. Deine Shopify-Domain
data-product_handle Der Handle des vorgestellten Produkts, der auf dem Produkttitel basiert. Jedes deiner Produkte hat in Shopify einen einzigartigen Handle. Der Handle des vorgestellten Produkts
data-embed_type Unterscheidet zwischen Einbettungscode für Buy Buttons, eingebetteten Kategorien und eingebettete Warenkörbe. Mögliche Werte sind product , cart und collection. Produkt
data-display_size Die maximale Breite der gesamten Einbettung (nicht der Schaltfläche). Kann compact (230 Pixel) oder regular (450 Pixel) sein. Gilt nur für den Buy Button eines einzelnen Produkts. compact
data-has_image Ob es sich um eine vollständige Produkteinbettung (true) oder nur einen Buy Button (false) handelt. true
data-redirect_to Worauf der Buy Button verweist. Kann checkout, product oder cart sein. Wenn du möchtest, dass sich der Buy Button mit einem eingebetteten Warenkorb auf derselben Seite verbindet, muss data-redirect_to auf cart gesetzt sein. Checkout
data-product_modal Löst das Produktmodal aus, das beim Klicken auf ein Produkt angezeigt wird. Wenn der Wert von data-redirect_to modal ist, muss dieses Attribut true sein, andernfalls sollte es false sein. false
data-buy_button_text Der Text, der auf dem Buy Button angezeigt wird. Kaufe jetzt
data-button_background_color Der Hex-Code der Farbe des Buy Buttons, ohne das #. Kann drei Hex-Zeichen oder sechs umfassen. 7db461
data-button_text_color Der Hex-Code der Textfarbe des Buy Buttons, ohne das #. Kann drei Hex-Zeichen oder sechs umfassen. ffffff
data-background_color Die Hintergrundfarbe des Bereichs um den Buy Button. Kann ein Hex-Code (gemäß obiger Regeln) oder transparent sein. Wenn er transparent ist, wird kein Padding auf den Inhalt der Einbettung angewendet. transparent
data-show_product_price Überschreibung, ob der Produktpreis angezeigt werden soll oder nicht. Kann auf true oder false gesetzt werden. Der aktuelle Wert von data-has_image
data-show_product_title Überschreibung, ob der Produkttitel angezeigt werden soll oder nicht. Kann auf true oder false gesetzt werden. Der aktuelle Wert von data-has_image
Daten buy_button_out_of_stock_text Der Text, der angezeigt wird, wenn ein Produkt nicht auf Lager ist. Ausverkauft
data-buy_button_product_unavailable_text Der Text, der angezeigt wird, wenn ein Produkt nicht verfügbar ist. Nicht verfügbar
data-product_title_color Der Hex-Code der Textfarbe des Produkttitels, ohne das #. Kann drei Hex-Zeichen oder sechs umfassen. 000000

Den Warenkorb deiner Website bearbeiten

Wenn du das Erscheinungsbild oder Verhalten des Warenkorbs deiner Website ändern möchtest, musst du ein separates HTML-Code-Snippet hinzufügen und dann dessen Attribute bearbeiten. Jedes Attribut steuert einen anderen Teil dessen, wie der Warenkorb aussieht oder wie er funktioniert.

So bearbeitest du den Warenkorb deiner Website:

  1. Öffne den HTML-Code der Seite mit dem Warenkorb, den du bearbeiten möchtest.

  2. Füge den folgenden Code ein:

<div data-sticky="true" data-embed_type="cart" data-shop="your-shop-name.myshopify.com"></div>
<script type="text/javascript">document.getElementById('ShopifyEmbedScript') || document.write('<script type="text/javascript" src="https://widgets.shopifyapps.com/assets/widgets/embed/client.js" id="ShopifyEmbedScript"><\/script>');</script>
  1. Ersetzen Sie your-shop-name.myshopify.com durch die myshopify.com Adresse Ihres Shops.

  2. Füge die relevanten Attribute dem Haupt-Tag des Einkaufswagens hinzu div und ändere es so, dass es den gewünschten Wert enthält. Wenn du zum Beispiel den Text ändern möchtest, der oben im Warenkorb angezeigt wird, musst du im Code-Snippet data-cart_title="your text" zum Haupt div-Tag hinzufügen. Das Ergebnis würde folgendermaßen aussehen:

<div data-sticky="true" data-embed_type="cart" data-shop="your-shop-name.myshopify.com" data-cart_title="your text">
  1. Wenn du fertig bist, speichere deine Änderungen.

Warenkorbattribute

Es gibt viele Attribute, mit denen Sie den Warenkorb auf Ihrer Website anpassen können:

Attribute für die Warenkorb-Anpassung
Attribut Wert Standard
data-shop Die relevante myshopify-Domain (wie zum Beispiel shopname.myshopify.com). Deine Shopify-Domain
data-embed_type Unterscheidet zwischen Einbettungscode für Buy Buttons, eingebetteten Kategorien und eingebettete Warenkörbe. Mögliche Werte sind product , cart und collection. Warenkorb
Daten checkout_button_text Der Text, der auf der Schaltfläche angezeigt wird, die vom Warenkorb aus zur Checkout-Seite führt (nicht die Warenkorb-Schaltfläche). Checkout
data-button_text_color Der Hex-Code der Textfarbe der Warenkorb-Schaltfläche, ohne das #. Kann drei Hex-Zeichen oder sechs umfassen. ffffff
data-button_background_color Der Hex-Code der Farbe der Warenkorb-Schaltfläche, ohne das #. Kann drei Hex-Zeichen oder sechs umfassen. 7db461
data-background_color Die Hintergrundfarbe des Bereichs um den eingebetteten Warenkorb. Kann ein Hex-Code (gemäß obiger Regeln) oder transparent sein. Wenn er transparent ist, wird kein Padding auf den Inhalt der Einbettung angewendet. transparent
data-text_color Der Hex-Code der Textfarbe der Warenkorb-Schaltfläche, ohne das #. Kann drei Hex-Zeichen oder sechs umfassen. 000000
data-accent_color Der Hex-Code der Rahmenfarbe, die den Warenkorb umrahmt, ohne das #. Kann drei Hex-Zeichen oder sechs umfassen. 000000
data-cart_title Der Text, der oben im eingebetteten Warenkorb angezeigt wird, wenn er auf einer Seite geöffnet wird. Dein Warenkorb
data-cart_total_text Der Text, der neben dem Gesamtbetrag im eingebetteten Warenkorb angezeigt wird. Gesamt
data-discount_notice_text Der Hinweis für Rabatte, der im eingebetteten Warenkorb angezeigt wird. Versand-und Rabattcodes werden beim Checkout hinzugefügt.
data-sticky Gibt an, ob die Schaltfläche an der Stelle angezeigt wird, an der sie im Markup platziert wird, oder klebt an der Seite der Seite. In neu erstellten, eingebetteten Warenkörben wird dieser Wert true in der Ausgabe des Einbettungscodes festgelegt. false
data-empty_cart_text Der Text, der angezeigt wird, wenn der Warenkorb leer ist. Dein Warenkorb ist leer.
data-next_page_button_text Der Text, der auf der Schaltfläche Nächste Seite in einer eingebetteten Kategorie angezeigt wird. Nächste Seite

Eine eingebettete Kategorie bearbeiten

Der Einbettungscode für eine eingebettete Kategorie enthält zwei div Elemente. Der erste div enthält den Code für einen eingebetteten Warenkorb, und der zweite div enthält den Code für die eingebetteten Buy Buttons, die in Form einer modalen Fenster Schaltfläche für jedes Produkt in der Kategorie angezeigt werden.

Das zweite div-Element enthält außerdem die folgenden Attribute:

Definition von Attributen im Buy Button-Code
Attribut Wert Standard
data-collection_handle Der Handle der vorgestellten Kategorie, der auf dem Kategorietitel basiert. Jede deiner Kategorien hat in Shopify einen einzigartigen Handle. Der Handle der vorgestellten Kategorie
data-embed_type Unterscheidet zwischen Einbettungscode für Buy Buttons, eingebetteten Kategorien und eingebettete Warenkörbe. Mögliche Werte sind product , cart und collection. Kategorie

Bereit, mit Shopify zu verkaufen?

Kostenlos testen