Ajouter une option d’emballage cadeau à la page de votre panier
Vous pouvez offrir un service d’emballage cadeau à vos clients à la page du panier de votre boutique en ligne. Pour ceux qui souhaitent que leur commande soit emballée, vous pouvez facturer un tarif forfaitaire ou un certain montant par produit.
Avertissement : cette personnalisation ne convient pas aux styles de paniers coulissants ou pop-up, et ne fonctionne que pour une page de panier (à l'URL
your-store.com/cart
). Si vous utilisez un panier coulissant ou pop-up, vous devrez configurer votre style de panier sur Page dans l'éditeur de thème. Ajoutez un produit au panier dans l'aperçu du thème, puis cliquez sur l'onglet Page du panier dans l'éditeur de thème afin de voir vos paramètres de panier.
Sur cette page
Créer un emballage cadeau en tant que produit
Tout d’abord, vous devez créer votre option d’emballage cadeau en tant que produit :
Depuis votre interface administrateur Shopify, allez à Produits.
Cliquez sur Ajouter un produit.
Créez un produit « emballage cadeau » comme vous le feriez pour n’importe quel autre produit :
- Vous pouvez utiliser votre description de produit pour décrire les matériaux utilisés pour l'emballage cadeau des articles.
- Donnez à votre produit « emballage cadeau » le prix que vous voulez facturer pour le service. Si vous souhaitez qu'il soit gratuit, configurez le prix sur
0
. - Vous pouvez importer une image du produit pour montrer à vos clients à quoi ressemblera leur commande une fois emballée.
- Vérifiez que votre produit « emballage cadeau » inclut le stock, ou ajustez les paramètres de manière à ce que Shopify ne procède pas au suivi des stocks. Si votre boutique possède plusieurs emplacements, décochez la case Suivre la quantité afin d'empêcher Shopify de suivre les stocks du produit « emballage cadeau ».
- Cliquez sur Save (Enregistrer).
Créer un menu
Ensuite, créez un menu pointant vers votre produit « emballage cadeau » :
- Depuis votre interface administrateur Shopify, allez à Online Store (Boutique en ligne) > Navigation.
- Cliquez sur Ajouter un menu.
- Nommez votre menu
Gift wrapping
, afin que l'ancre qui lui est attribuée soitgift-wrapping
. -
Ajoutez le produit « emballage cadeau » au menu :
- Cliquez sur Ajouter un élément de menu et saisissez un nom pour le lien menant à l'emballage cadeau en tant que produit.
- Dans le champ Lien, sélectionnez Produits, puis sélectionnez le produit « emballage cadeau » dans le menu déroulant.
- Cliquez sur Ajouter.
Cliquez sur Enregistrer le menu.
- Dans l’application Shopify, appuyez sur le bouton …
- Dans la section Canaux de vente, appuyez sur Online Store (Boutique en ligne).
- Appuyez sur Navigation.
- Cliquez sur Ajouter un menu.
- Nommez votre menu
Gift wrapping
, afin que l'ancre qui lui est attribuée soitgift-wrapping
. -
Ajoutez le produit « emballage cadeau » au menu :
- Cliquez sur Ajouter un élément de menu et saisissez un nom pour le lien menant à l'emballage cadeau en tant que produit.
- Dans le champ Lien, sélectionnez Produits, puis sélectionnez le produit « emballage cadeau » dans le menu déroulant.
- Cliquez sur Ajouter.
Cliquez sur Enregistrer le menu.
- Dans l’application Shopify, appuyez sur le bouton …
- Dans la section Canaux de vente, appuyez sur Online Store (Boutique en ligne).
- Appuyez sur Navigation.
- Cliquez sur Ajouter un menu.
- Nommez votre menu
Gift wrapping
, afin que l'ancre qui lui est attribuée soitgift-wrapping
. -
Ajoutez le produit « emballage cadeau » au menu :
- Cliquez sur Ajouter un élément de menu et saisissez un nom pour le lien menant à l'emballage cadeau en tant que produit.
- Dans le champ Lien, sélectionnez Produits, puis sélectionnez le produit « emballage cadeau » dans le menu déroulant.
- Cliquez sur Ajouter.
Cliquez sur Enregistrer le menu.
Créer un extrait de code
- Dans l'interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.
- Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
- Dans le répertoire Snippets (Extraits), cliquez sur Ajouter un nouveau snippet (Ajouter un nouvel extrait).
- Nommez votre extrait
gift-wrapping
et cliquez sur Créer un extrait. Votre fichier d'extrait s'ouvrira dans l'éditeur de code. - À cette étape, vous devez coller du code dans votre nouveau fichier d'extrait
gift-wrapping
. Le code à coller dépend de la façon dont vous souhaitez facturer le service d’emballage cadeau à vos clients :
- Dans l’application Shopify, appuyez sur le bouton …
- Dans la section Canaux de vente, appuyez sur Online Store (Boutique en ligne).
- Appuyez sur Manage themes (Gérer les thèmes).
- Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
- Dans le répertoire Snippets (Extraits), cliquez sur Ajouter un nouveau snippet (Ajouter un nouvel extrait).
- Nommez votre extrait
gift-wrapping
et cliquez sur Créer un extrait. Votre fichier d'extrait s'ouvrira dans l'éditeur de code. - À cette étape, vous devez coller du code dans votre nouveau fichier d'extrait
gift-wrapping
. Le code à coller dépend de la façon dont vous souhaitez facturer le service d’emballage cadeau à vos clients :
- Dans l’application Shopify, appuyez sur le bouton …
- Dans la section Canaux de vente, appuyez sur Online Store (Boutique en ligne).
- Appuyez sur Manage themes (Gérer les thèmes).
- Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
- Dans le répertoire Snippets (Extraits), cliquez sur Ajouter un nouveau snippet (Ajouter un nouvel extrait).
- Nommez votre extrait
gift-wrapping
et cliquez sur Créer un extrait. Votre fichier d'extrait s'ouvrira dans l'éditeur de code. - À cette étape, vous devez coller du code dans votre nouveau fichier d'extrait
gift-wrapping
. Le code à coller dépend de la façon dont vous souhaitez facturer le service d’emballage cadeau à vos clients :
Ajouter un tarif forfaitaire pour l’emballage cadeau
Collez le code suivant et cliquez sur Enregistrer :
{% 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 %}
Ajouter un montant à multiplier par le nombre de produits inclus dans la commande
Avec cette option, si la commande contient trois produits, l’emballage cadeau est facturé trois fois. Collez le code suivant et cliquez sur Enregistrer :
{% 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 %}
Inclure l'extrait dans votre modèle de panier
Pour inclure l’extrait gift-wrapping (emballage cadeau) à votre modèle de panier :
Dans le répertoire Sections, cliquez sur
cart-template.liquid
. Si votre thème ne possède pas decart-template.liquid
, cliquez surcart.liquid
dans le répertoire Modèles.Recherchez la balise de fermeture
</form>
dans le code. Sur une nouvelle ligne juste au-dessus de la balise de fermeture</form>
, collez le code suivant :
{% render 'gift-wrapping' %}
- Cliquez sur Save (Enregistrer).