Een optie voor een cadeauverpakking toevoegen aan je winkelwagenpagina
Je kunt een cadeauverpakkingsservice aanbieden aan je klanten op de winkelwagenpagina van je webshop. Voor klanten die hun bestelling willen verpakken met cadeauverpakking, kun je een vast tarief in rekening brengen of kosten op productbasis in rekening brengen.

Op deze pagina
Maak een product voor een cadeauverpakking aan
Maak eerst je cadeauverpakking aan als product:
Ga vanaf je Shopify-beheercentrum naar Producten.
Klik op Product toevoegen.
Maak een cadeauverpakkingsproduct aan net als je zou doen bij het aanmaken van een ander product:
- Je kunt je productbeschrijving gebruiken om uit te leggen welke materialen worden gebruikt om de artikelen in cadeaus te verpakken.
- Geef je cadeauverpakkingsproduct de prijs die je voor de service in rekening wilt brengen. Als je wilt dat cadeauverpakking gratis is, stel dan de prijs van je cadeaubon in op
0
. - Je kunt een afbeelding voor het product uploaden om je klanten te laten zien hoe een bestelling met cadeau eruit zal zien.
- Zorg ervoor dat er voorraad is van je cadeauverpakkingproduct. Zo niet, pas je de instellingen aan, zodat Shopify de voorraad voor het cadeauverpakkingsproduct niet bijhoudt. Als je winkel meerdere locaties heeft, vink je het selectievakje Hoeveelheid volgen uit om te voorkomen dat Shopify de voorraad voor het cadeauverpakkingsproduct bijhoudt.
- Klik op Opslaan.
Een menu aanmaken
Maak nu een menu aan dat naar je cadeauverpakkingsproduct wijst:
Desktop
Ga vanuit het Shopify-beheercentrum naar Content > Menu's.
Klik op Menu toevoegen.
Noem je menu
Gift wrapping
, zodatgift-wrapping
de handle is die aan het menu is toegewezen.-
Voeg het cadeauverpakkingsproduct aan het menu toe:
- Klik op Menu-item toevoegen en voer een Naam in voor de link naar het cadeauverpakkingsproduct.
- Selecteer in het veld Link Producten en selecteer vervolgens het cadeauverpakkingsproduct in de vervolgkeuzelijst.
- Klik op Toevoegen.
Klik op Menu opslaan.
iPhone
- Tik in de Shopify-app op de knop ….
- Tik op Content > Menu's.
- Klik op Menu toevoegen.
- Noem je menu
Gift wrapping
, zodatgift-wrapping
de handle is die aan het menu is toegewezen. -
Voeg het cadeauverpakkingsproduct aan het menu toe:
- Klik op Menu-item toevoegen en voer een Naam in voor de link naar het cadeauverpakkingsproduct.
- Selecteer in het veld Link Producten en selecteer vervolgens het cadeauverpakkingsproduct in de vervolgkeuzelijst.
- Klik op Toevoegen.
Klik op Menu opslaan.
Android
- Tik in de Shopify-app op de knop ….
- Tik op Content > Menu's.
- Klik op Menu toevoegen.
- Noem je menu
Gift wrapping
, zodatgift-wrapping
de handle is die aan het menu is toegewezen. -
Voeg het cadeauverpakkingsproduct aan het menu toe:
- Klik op Menu-item toevoegen en voer een Naam in voor de link naar het cadeauverpakkingsproduct.
- Selecteer in het veld Link Producten en selecteer vervolgens het cadeauverpakkingsproduct in de vervolgkeuzelijst.
- Klik op Toevoegen.
Klik op Menu opslaan.
Een codefragment maken
Desktop
- Ga in het Shopify-beheercentrum naar webshop > Thema's.
- Zoek het thema dat je wilt bewerken, klik op de knop … om het actiemenu te openen en klik vervolgens op Code bewerken.
- Klik in de directory Fragmenten op Een nieuw fragment toevoegen.
- Benoem je fragment
gift-wrapping
en klik op Maak fragment aan. Je fragmentbestand opent in de codebewerker. - In deze stap plak je code in je nieuwe
gift-wrapping
-fragmentbestand. De code die je plakt, is afhankelijk van hoe je je klanten kosten in rekening wilt brengen voor de cadeauverpakkingsservice:
iPhone
- Tik in de Shopify-app op de knop ….
- Tik in het gedeelte Verkoopkanalen op webshop.
- Tik op Thema's beheren.
- Zoek het thema dat je wilt bewerken, klik op de knop … om het actiemenu te openen en klik vervolgens op Code bewerken.
- Klik in de directory Fragmenten op Een nieuw fragment toevoegen.
- Benoem je fragment
gift-wrapping
en klik op Maak fragment aan. Je fragmentbestand opent in de codebewerker. - In deze stap plak je code in je nieuwe
gift-wrapping
-fragmentbestand. De code die je plakt, is afhankelijk van hoe je je klanten kosten in rekening wilt brengen voor de cadeauverpakkingsservice:
Android
- Tik in de Shopify-app op de knop ….
- Tik in het gedeelte Verkoopkanalen op webshop.
- Tik op Thema's beheren.
- Zoek het thema dat je wilt bewerken, klik op de knop … om het actiemenu te openen en klik vervolgens op Code bewerken.
- Klik in de directory Fragmenten op Een nieuw fragment toevoegen.
- Benoem je fragment
gift-wrapping
en klik op Maak fragment aan. Je fragmentbestand opent in de codebewerker. - In deze stap plak je code in je nieuwe
gift-wrapping
-fragmentbestand. De code die je plakt, is afhankelijk van hoe je je klanten kosten in rekening wilt brengen voor de cadeauverpakkingsservice:
Breng een vast tarief in rekening voor cadeauverpakking
Plak de volgende code en sla op:
{% 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 %}
Voeg kosten toe die worden vermenigvuldigd met het aantal producten in de bestelling
Als de bestelling met deze optie drie producten bevat, worden de kosten voor de cadeauverpakking vermenigvuldigd met drie. Plak de volgende code en sla op:
{% 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 %}
Voeg je fragment toe aan je winkelwagentemplate
Je kunt het fragment met cadeauverpakking in je winkelwagentemplate opnemen:
Klik in het menu Secties op
cart-template.liquid
. Als je thema geencart-template.liquid
bevat, klik dan opcart.liquid
in het menu Templates.Zoek de sluitende tag
</form>
in je code. Plak de volgende code op een nieuwe regel boven de sluitende tag</form>
:
{% render 'gift-wrapping' %}
- Klik op Opslaan.