Eine Schaltfläche "Kaufen" oder einen eingebetteten Warenkorb bearbeiten oder löschen

Achtung

Dies ist ein Tutorial für Fortgeschrittene und wird von Shopify nicht unterstützt. Kenntnisse in Webdesign-Sprachen wie HTML, CSS, Javascript und Liquid sind erforderlich. Solltest du Hilfe benötigen, kannst du einen Shopify-Partner engagieren.

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.

Tipp

Der Einbettungscode im HTML-Quellcode überschreibt die Einstellungen, die du beim Erstellen einer Schaltfläche oder eines Warenkorbs in deinem Shopify-Adminbereich verwendest. Wenn du versehentlich einen ungültigen Wert für den Einbettungscode eingibst, wird dieser automatisch durch den Standardwert ersetzt.

Löschen einer Schaltfläche "Kaufen", einer eingebetteten Kollektion oder eines eingebetteten Warenkorbs

So löschst du eine bestehende Schaltfläche "Kaufen", eine Kollektion oder einen eingebetteten Warenkorb:

1. Öffne den HTML-Quellcode der Webseite, die die Schaltfläche "Kaufen", die eingebettete Kollektion 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 einer Schaltfläche "Kaufen"

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 eine vorhandene Schaltfläche "Kaufen" verwenden möchtest, um den Benutzer auf die Produktseite anstatt auf die Checkout-Seite zu verweisen:

1. Öffne den HTML-Code der Seite mit der Schaltfläche "Kaufen", die 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 Attribute des Tags der Schaltfläche "Kaufen"

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 die Schaltfläche "Kaufen" eines einzelnen Produkts.	compact
data-has_image	Ob es sich um eine vollständige Produkteinbettung (true) oder nur eine Schaltfläche "Kaufen" (false) handelt.	true
data-redirect_to	Worauf die Schaltfläche "Kaufen" verweist. Kann checkout, product oder cart sein. Wenn du möchtest, dass sich die Schaltfläche "Kaufen" 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 der Schaltfläche "Kaufen" 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 die Schaltfläche "Kaufen". 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

Hinweis

Stelle sicher, dass die Warenkorbattribute, die du hinzufügst oder änderst, in demselben Tag <div> enthalten sind, der das Attribut data-embed_type="cart" enthält, und nicht in dem Tag <div>, der das Attribut data-embed_type="product" enthält.

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 Kollektion angezeigt wird.	Nächste Seite

Eine eingebettete Kollektion bearbeiten

Der Einbettungscode für eine eingebettete Kollektion 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 Kollektion angezeigt werden.

Hinweis

der Code für den eingebetteten Warenkorb und die Buy Buttons kann wie oben beschrieben bearbeitet werden, aber das data-redirect_to -Attribut muss auf modalgesetzt werden, und data-product_modal muss truewerden.

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

Definition von Attributen im Code der Schaltfläche "Kaufen"

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