Geschenkverpackungsoption zur Warenkorbseite hinzufügen
Du kannst deinen Kunden auf der Warenkorbseite deines Onlineshops einen Geschenkverpackungsservice anbieten. Kunden, die ihre Bestellung als Geschenk verpackt haben möchten, kannst du entweder eine Flat Rate oder eine Gebühr pro Produkt in Rechnung stellen.

Warnung: Diese Anpassung wird ausschließlich auf die Warenkorbseite angewendet, nicht aber auf Warenkorneinschübe oder Pop-ups (auf der URL
your-store.com/cart
). Wenn du einen Warenkorbeinschub oder ein Pop-up verwendest, musst du den Warenkorb-Stil im Theme-Editor zu Seite ändern. Füge in der Theme-Vorschau dem Warenkorb ein Produkt hinzu und klicke anschließend im Theme-Editor auf das Tab Warenkorbseite, um deine Warenkorneinstellungen anzuzeigen.
Auf dieser Seite
Geschenkverpackungsprodukt erstellen
Zuerst erstellst du eine Geschenkverpackungsoption als ein Produkt:
Gehe im Shopify-Adminbereich zu Produkte.
Klicke auf Produkt hinzufügen.
Erstelle ein Geschenkverpackungsprodukt auf dieselbe Art und Weise, wie du jedes andere Produkt erstellen würdest:
- Du kannst eine Produktbeschreibung verwenden, um anzuzeigen, welche Materialien für die Geschenkverpackung verwendet werden.
- Gib für das Geschenkverpackungsprodukt den Preis ein, den du für diesen Service berechnen möchtest. Wenn der Geschenkverpackungsservice kostenlos sein soll, dann lege für das Geschenkverpackungsprodukt
0
als Preis fest. - Du kannst ein Bild für das Produkt hochladen, um deinen Kunden zu zeigen, wie eine Bestellung mit Geschenkverpackung aussehen wird.
- Vergewissere dich, dass das Geschenkverpackungsprodukt Inventar enthält, oder passe die Einstellungen so an, dass Shopify das Inventar von Geschenkverpackungsprodukten nicht verfolgt. Wenn dein Shop über mehrere Standorte verfügt, deaktiviere das Kontrollkästchen Anzahl verfolgen, um zu verhindern, dass Shopify das Inventar von Geschenkverpackungsprodukten verfolgt.
- Klicke auf Speichern.
Menü erstellen
Erstelle anschließend ein Menü, das auf dein Geschenkverpackungsprodukt verweist:
Desktop
Gehe in deinem Shopify-Adminbereich zu Inhalt > Menüs.
Klicke auf Menü hinzufügen.
Benenne das Menü
Gift wrapping
, sodass das dem Menü zugewiesene Handlegift-wrapping
lautet.Füge das Geschenkverpackungsprodukt zum Menü hinzu:
- Klicke auf Menüpunkt hinzufügen und gib einen Namen für den Link, der zum Geschenkverpackungsprodukt führt, ein.
- Wähle im Feld Link die Option Produkte und anschließend das Geschenkverpackungsprodukt aus dem Dropdown-Menü aus.
- Klicke auf Hinzufügen.
Klicke auf Menü speichern.
iPhone
Tippe in der Shopify-App auf die Schaltfläche ....
Tippe auf Inhalt > Menüs.
Klicke auf Menü hinzufügen.
Benenne das Menü
Gift wrapping
, sodass das dem Menü zugewiesene Handlegift-wrapping
lautet.Füge das Geschenkverpackungsprodukt zum Menü hinzu:
- Klicke auf Menüpunkt hinzufügen und gib einen Namen für den Link, der zum Geschenkverpackungsprodukt führt, ein.
- Wähle im Feld Link die Option Produkte und anschließend das Geschenkverpackungsprodukt aus dem Dropdown-Menü aus.
- Klicke auf Hinzufügen.
Klicke auf Menü speichern.
Android
Tippe in der Shopify-App auf die Schaltfläche ....
Tippe auf Inhalt > Menüs.
Klicke auf Menü hinzufügen.
Benenne das Menü
Gift wrapping
, sodass das dem Menü zugewiesene Handlegift-wrapping
lautet.Füge das Geschenkverpackungsprodukt zum Menü hinzu:
- Klicke auf Menüpunkt hinzufügen und gib einen Namen für den Link, der zum Geschenkverpackungsprodukt führt, ein.
- Wähle im Feld Link die Option Produkte und anschließend das Geschenkverpackungsprodukt aus dem Dropdown-Menü aus.
- Klicke auf Hinzufügen.
Klicke auf Menü speichern.
Code-Snippet erstellen
Desktop
- Gehe im Shopify-Adminbereich zu Onlineshop > Themes.
- Suche das Theme, das du bearbeiten möchtest, klicke auf die Schaltfläche ..., um das Aktionsmenü zu öffnen, und klicke dann auf Code bearbeiten.
- Klicke in der Übersicht Snippets auf Neues Snippet hinzufügen.
- Benenne dein Snippet
gift-wrapping
und klicke auf Snippet erstellen. Deine Snippet-Datei wird im Code-Editor geöffnet. - In diesem Schritt fügst in der neuen Snippet-Datei
gift-wrapping
etwas Code ein. Der Code, den du einfügst, hängt davon ab, wie du deinen Kunden den Geschenkverpackungsservice in Rechnung stellen möchtest:
iPhone
- Tippe in der Shopify-App auf die Schaltfläche ....
- Klicke im Bereich Vertriebskanäle auf Onlineshop.
- Tippe auf Themes verwalten.
- Suche das Theme, das du bearbeiten möchtest, klicke auf die Schaltfläche ..., um das Aktionsmenü zu öffnen, und klicke dann auf Code bearbeiten.
- Klicke in der Übersicht Snippets auf Neues Snippet hinzufügen.
- Benenne dein Snippet
gift-wrapping
und klicke auf Snippet erstellen. Deine Snippet-Datei wird im Code-Editor geöffnet. - In diesem Schritt fügst in der neuen Snippet-Datei
gift-wrapping
etwas Code ein. Der Code, den du einfügst, hängt davon ab, wie du deinen Kunden den Geschenkverpackungsservice in Rechnung stellen möchtest:
Android
- Tippe in der Shopify-App auf die Schaltfläche ....
- Klicke im Bereich Vertriebskanäle auf Onlineshop.
- Tippe auf Themes verwalten.
- Suche das Theme, das du bearbeiten möchtest, klicke auf die Schaltfläche ..., um das Aktionsmenü zu öffnen, und klicke dann auf Code bearbeiten.
- Klicke in der Übersicht Snippets auf Neues Snippet hinzufügen.
- Benenne dein Snippet
gift-wrapping
und klicke auf Snippet erstellen. Deine Snippet-Datei wird im Code-Editor geöffnet. - In diesem Schritt fügst in der neuen Snippet-Datei
gift-wrapping
etwas Code ein. Der Code, den du einfügst, hängt davon ab, wie du deinen Kunden den Geschenkverpackungsservice in Rechnung stellen möchtest:
Pauschalgebühr für Geschenkverpackung hinzufügen
Füge den folgenden Code ein und klicke auf Speichern:
{% if linklists.gift-wrapping.links.size > 0 and
linklists.gift-wrapping.links.first.type == 'product_link' %}
<div
id="is-a-gift"
style="clear: left; margin: 30px 0"
class="clearfix rte"
>
<p>
<input
id="gift-wrapping"
type="checkbox"
name="attributes[gift-wrapping]"
value="yes"
{% if cart.attributes.gift-wrapping %}
checked="checked"
{% endif %}
style="float: none"
/>
<label
for="gift-wrapping"
style="display:inline; padding-left: 5px; float: none;"
>
For {{ linklists.gift-wrapping.links.first.object.price | money }}
please wrap the products in this order.
</label>
</p>
<p>
<label style="display:block" for="gift-note"
>Gift message (free and optional):</label
>
<textarea name="attributes[gift-note]" id="gift-note">
{{ cart.attributes.gift-note }}</textarea
>
</p>
</div>
{% assign id = linklists.gift-wrapping.links.first.object.variants.first.id
%} {% assign gift_wraps_in_cart = 0 %} {% for item in cart.items %} {% if
item.id == id %} {% assign gift_wraps_in_cart = item.quantity %} {% endif %}
{% endfor %}
<style>
#updates_{{ id }} { display: none; }
</style>
<script>
Shopify.Cart = Shopify.Cart || {};
Shopify.Cart.GiftWrap = {};
Shopify.Cart.GiftWrap.set = function() {
var headers = new Headers({ 'Content-Type': 'application/json' });
var request = {
method: 'POST',
headers: headers,
body: JSON.stringify({ updates: { {{ id }}: 1 }, attributes: { 'gift-wrapping': true } })
};
fetch('/cart/update.js', request)
.then(function() {
location.href = '/cart';
});
}
Shopify.Cart.GiftWrap.remove = function() {
var headers = new Headers({ 'Content-Type': 'application/json' });
var request = {
method: 'POST',
headers: headers,
body: JSON.stringify({ updates: { {{ id }}: 0 }, attributes: { 'gift-wrapping': '', 'gift-note': '' } })
};
fetch('/cart/update.js', request)
.then(function() {
location.href = '/cart';
});
}
// If we have nothing but gift-wrap items in the cart.
{% if cart.items.size == 1 and gift_wraps_in_cart > 0 %}
document.addEventListener("DOMContentLoaded", function(){
Shopify.Cart.GiftWrap.remove();
});
// If we have more than one gift-wrap item in the cart.
{% elsif gift_wraps_in_cart > 1 %}
document.addEventListener("DOMContentLoaded", function(){
Shopify.Cart.GiftWrap.set();
});
// If we have a gift-wrap item in the cart but our gift-wrapping cart attribute has not been set.
{% elsif gift_wraps_in_cart > 0 and cart.attributes.gift-wrapping == blank %}
document.addEventListener("DOMContentLoaded", function(){
Shopify.Cart.GiftWrap.set();
});
// If we have no gift-wrap item in the cart but our gift-wrapping cart attribute has been set.
{% elsif gift_wraps_in_cart == 0 and cart.attributes.gift-wrapping != blank %}
document.addEventListener("DOMContentLoaded", function(){
Shopify.Cart.GiftWrap.set();
});
{% endif %}
// When the gift-wrapping checkbox is checked or unchecked.
document.addEventListener("DOMContentLoaded", function(){
document.querySelector('[name="attributes[gift-wrapping]"]').addEventListener("change", function(event) {
if (event.target.checked) {
Shopify.Cart.GiftWrap.set();
} else {
Shopify.Cart.GiftWrap.remove();
}
});
document.querySelector('#gift-note').addEventListener("change", function(evt) {
var note = evt.target.value;
var headers = new Headers({ 'Content-Type': 'application/json' });
var request = {
method: 'POST',
headers: headers,
body: JSON.stringify({ attributes: { 'gift-note': note } })
};
fetch('/cart/update.js', request);
});
});
</script>
{% else %}
<p style="clear: left; margin: 30px 0" class="rte">
You attempted to add a gift-wrapping script to your shopping cart, but it
won't work because you don't have a link list with handle
<code>gift-wrapping</code> which, in turn, contains a link to your
gift-wrapping product. Please review the steps outlined
<a
href="https://help.shopify.com/manual/online-store/themes/os/customize/add-gift-wrap-option"
target="_blank"
rel="noopener noreferrer nofollow"
>here</a
>.
</p>
{% endif %}
Gebühr hinzufügen, die in der Bestellung pro Produkt berechnet wird
Wenn sich bei Auswahl dieser Option drei Produkte in der Bestellung befinden, wird die Gebühr für die Geschenkverpackung mit Drei multipliziert. Füge den folgenden Code ein und klicke auf Speichern.
{% if linklists.gift-wrapping.links.size > 0 and
linklists.gift-wrapping.links.first.type == 'product_link' %}
<div
id="is-a-gift"
style="clear: left; margin: 30px 0"
class="clearfix rte"
>
<p>
<input
id="gift-wrapping"
type="checkbox"
name="attributes[gift-wrapping]"
value="yes"
{% if cart.attributes.gift-wrapping %}
checked="checked"
{% endif %}
style="float: none"
/>
<label
for="gift-wrapping"
style="display:inline; padding-left: 5px; float: none;"
>
For {{ linklists.gift-wrapping.links.first.object.price | money }} per
item, please wrap the products in this order.
</label>
</p>
<p>
<label style="display:block" for="gift-note"
>Gift message (free and optional):</label
>
<textarea name="attributes[gift-note]" id="gift-note">
{{ cart.attributes.gift-note }}</textarea
>
</p>
</div>
{% assign id = linklists.gift-wrapping.links.first.object.variants.first.id
%} {% assign gift_wraps_in_cart = 0 %} {% for item in cart.items %} {% if
item.id == id %} {% assign gift_wraps_in_cart = item.quantity %} {% endif %}
{% endfor %} {% assign items_in_cart = cart.item_count | minus:
gift_wraps_in_cart %}
<style>
#updates_{{ id }} { display: none; }
</style>
<script>
Shopify.Cart = Shopify.Cart || {};
Shopify.Cart.GiftWrap = {};
Shopify.Cart.GiftWrap.set = function() {
var headers = new Headers({ 'Content-Type': 'application/json' });
var request = {
method: 'POST',
headers: headers,
body: JSON.stringify({ updates: { {{ id }}: {{ items_in_cart }} }, attributes: { 'gift-wrapping': true } })
};
fetch('/cart/update.js', request)
.then(function() {
location.href = '/cart';
});
}
Shopify.Cart.GiftWrap.remove = function() {
var headers = new Headers({ 'Content-Type': 'application/json' });
var request = {
method: 'POST',
headers: headers,
body: JSON.stringify({ updates: { {{ id }}: 0 }, attributes: { 'gift-wrapping': '', 'gift-note': '' } })
};
fetch('/cart/update.js', request)
.then(function() {
location.href = '/cart';
});
}
// If we have nothing but gift-wrap items in the cart.
{% if cart.items.size == 1 and gift_wraps_in_cart > 0 %}
document.addEventListener("DOMContentLoaded", function(){
Shopify.Cart.GiftWrap.remove();
});
// If we don't have the right amount of gift-wrap items in the cart.
{% elsif gift_wraps_in_cart > 0 and gift_wraps_in_cart != items_in_cart %}
document.addEventListener("DOMContentLoaded", function(){
Shopify.Cart.GiftWrap.set();
});
// If we have a gift-wrap item in the cart but our gift-wrapping cart attribute has not been set.
{% elsif gift_wraps_in_cart > 0 and cart.attributes.gift-wrapping == blank %}
document.addEventListener("DOMContentLoaded", function(){
Shopify.Cart.GiftWrap.set();
});
// If we have no gift-wrap item in the cart but our gift-wrapping cart attribute has been set.
{% elsif gift_wraps_in_cart == 0 and cart.attributes.gift-wrapping != blank %}
document.addEventListener("DOMContentLoaded", function(){
Shopify.Cart.GiftWrap.set();
});
{% endif %}
// When the gift-wrapping checkbox is checked or unchecked.
document.addEventListener("DOMContentLoaded", function(){
document.querySelector('[name="attributes[gift-wrapping]"]').addEventListener("change", function(event) {
if (event.target.checked) {
Shopify.Cart.GiftWrap.set();
} else {
Shopify.Cart.GiftWrap.remove();
}
});
document.querySelector('#gift-note').addEventListener("change", function(evt) {
var note = evt.target.value;
var headers = new Headers({ 'Content-Type': 'application/json' });
var request = {
method: 'POST',
headers: headers,
body: JSON.stringify({ attributes: { 'gift-note': note } })
};
fetch('/cart/update.js', request);
});
});
</script>
{% else %}
<p style="clear: left; margin: 30px 0" class="rte">
You attempted to add a gift-wrapping script to your shopping cart, but it
won't work because you don't have a link list with handle
<code>gift-wrapping</code> which, in turn, contains a link to your
gift-wrapping product. Please review the steps outlined
<a
href="https://help.shopify.com/manual/online-store/themes/os/customize/add-gift-wrap-option"
target="_blank"
rel="noopener noreferrer nofollow"
>here</a
>.
</p>
{% endif %}
Snippet in die Warenkorb-Vorlage einschließen
So schließt du das Snippet für die Geschenkverpackung in deine Warenkorb-Vorlage ein:
Klicke im Verzeichnis Abschnitte auf
cart-template.liquid
. Wenn dein Theme nicht übercart-template.liquid
verfügt, klicke im Verzeichnis Vorlagen aufcart.liquid
.Suche das abschließende Tag
</form>
im Code. Füge in einer neuen Zeile über dem abschließenden Tag</form>
den folgenden Code ein:
{% render 'gift-wrapping' %}
- Klicke auf Speichern.