Modifier ou supprimer un bouton d'achat ou un panier intégré

Attention

Il s’agit d’un tutoriel avancé, qui n’est pas pris en charge par Shopify. La connaissance des langages de design web tels que HTML, CSS, JavaScript et Liquid est requise. Si vous avez besoin d’aide, vous pouvez engager un(e) Partenaire Shopify.

Les boutons d'achat et les paniers sont générés à partir du code d'intégration que vous ajoutez au code HTML source de votre page web. Si vous souhaitez modifier l'apparence ou le comportement d'un bouton ou d'un panier sur une page web, vous devez modifier le code d'intégration qui y est associé.

Conseil

Le code d’intégration au code HTML source remplace les paramètres que vous choisissez lors de la création d’un bouton ou d’un panier dans votre interface administrateur Shopify. Si vous saisissez une valeur incorrecte par erreur dans le code d’intégration, elle est automatiquement remplacée par la valeur par défaut.

Supprimer un bouton d'achat, une collection intégrée ou un panier intégré

Pour supprimer un bouton d'achat, une collection ou un panier intégré :

1. Ouvrez le code HTML source de la page web contenant le bouton d'achat, la collection intégrée ou le panier intégré.

2. Supprimez le code d'intégration complet du code HTML source. Pour un bouton d'achat, le code d'intégration ressemble au code suivant :

 

<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">Achetez votre produit</a></noscript> 

1. Enregistrez vos modifications.

Modifier un bouton d'achat

Pour modifier l'apparence ou les paramètres d'un bouton d'achat existant, vous devez modifier le contenu de sa balise div principale dans le code d'intégration, qui s'affiche dans le code HTML source :

 

<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>

 

Chaque fonctionnalité du bouton d'achat intégré est contrôlée par un attribut distinct dans la balise div principale. Vous pouvez ajouter, supprimer ou mettre à jour ces attributs directement dans le code HTML source.

Par exemple, si vous souhaitez qu'un bouton d'achat existant amène l'utilisateur vers la page du produit au lieu de la page de paiement :

1. Ouvrez le code HTML de la page contenant le bouton d'achat que vous souhaitez modifier.

2. Trouvez l'attribut data-redirect_to dans la balise div principale du code d'intégration du bouton d'achat :

   data-redirect_to="checkout"

3. Changez la valeur de l'attribut pour product (produit) :

   data-redirect_to="product"

4. Enregistrez vos modifications.

La balise div principale d'un bouton d'achat possède de nombreux attributs que vous pouvez modifier :

Attributs de balise de bouton d’achat modifiables

Attribut	Valeur	Par défaut
data-shop	Le domaine myshopify (tel que storename.myshopify.com) connecté au bouton.	Votre domaine Shopify
data-product_handle	L'ancre du produit vedette, basée sur le titre du produit. Chacun de vos produits a une ancre unique dans Shopify.	L'ancre du produit vedette
data-embed_type	Fait la distinction entre le code d'intégration pour les boutons d'achat, les collections intégrées et les paniers intégrés. Les valeurs possibles sont produit, panier et collection.	produit
data-display_size	La largeur maximale de tout l'élément intégré (pas du bouton). Peut être compact (230 px) ou régulier (450 px). S'applique uniquement à un seul bouton d'achat de produit.	compact
data-has_image	Qu’il s’agisse d’un produit intégré intégral (vrai) ou d’un bouton d’achat uniquement (faux).	vrai
data-redirect_to	Où le bouton d'achat est Lié à. Peut être passage à la caisse, produit ou panier. Si vous souhaitez que le bouton d'achat soit connecté à un panier intégré sur la même page, data-redirect–to doit être un panier.	paiement
data-product_modal	Déclenche le modal du produit à s'afficher lorsqu'un produit est activé. Si la valeur de data-redirect_to est modal, cet attribut doit être vrai, sinon il doit être configuré sur faux.	faux
data-buy_button_text	Le texte affiché sur le bouton d'achat.	Acheter maintenant
data-button_background_color	Le code hexadécimal de la couleur du bouton d'achat, sans le #. Peut comporter trois caractères hexadécimaux ou six.	7db461
data-button_text_color	Le code hexadécimal de la couleur du texte du bouton d'achat, sans le #. Peut comporter trois caractères hexadécimaux ou six.	ffffff
data-background_color	La couleur d'arrière-plan de la zone entourant le bouton d'achat. Elle peut être configurée sur code hexadécimal (selon les règles ci-dessus), ou sur transparent. Si elle est configurée sur transparent, aucun remplissage n'est appliqué au contenu de l'élément intégré.	transparent
data-show_product_price	Remplacer pour afficher ou non le prix du produit. Peut être vrai ou faux.	La valeur actuelle de data-has_image
data-show_product_title	Remplacer pour afficher ou non le titre du produit. Peut être vrai ou faux.	La valeur actuelle de data-has_image
data-buy_button_out_of_stock_text	Le texte qui apparaît lorsqu'un produit est en rupture de stock.	En rupture de stock
data-buy_button_product_unavailable_text	Le texte qui apparaît lorsqu'un produit n'est pas disponible.	Indisponible
data-product_title_color	Le code hexadécimal de la couleur du titre du bouton d'achat, sans le #. Peut comporter trois caractères hexadécimaux ou six.	000000

Modifier le panier de votre site web

Si vous souhaitez modifier l'apparence ou le comportement du panier de votre site web, vous devez ajouter un extrait de code HTML distinct, puis modifier ses attributs. Chaque attribut contrôle une partie différente de l'apparence du panier ou de son fonctionnement.

Pour modifier le panier de votre site web :

1. Ouvrez le code HTML de la page contenant le panier que vous souhaitez modifier.

2. Collez le code suivant :

<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. Remplacez your-shop-name.myshopify.com par l'adresse myshopify.com de votre boutique.

2. Ajoutez les attributs pertinents à la balise div principale du panier et modifiez-la pour inclure la valeur souhaitée. Par exemple, si vous souhaitez modifier le texte qui apparaît en haut du panier, vous devez ajouter data-cart_title="your text" à la balise div principale dans l'extrait de code. Le résultat ressemblerait à ceci :

<div data-sticky="true" data-embed_type="cart" data-shop="your-shop-name.myshopify.com" data-cart_title="your text">

1. Lorsque vous avez terminé, enregistrez vos modifications.

Attributs du panier

Remarque

Assurez-vous que les attributs de panier que vous ajoutez ou modifiez sont inclus à la même balise <div> qui contient l'attribut data-embed_type="cart", et non à la balise <div> contenant l'attribut data-embed_type="product".

Il existe de nombreux attributs que vous pouvez utiliser pour personnaliser le panier de votre site web :

Attributs de personnalisation du panier

Attribut	Valeur	Par défaut
data-shop	Le domaine myshopify pertinent (tel que nomboutique.myshopify.com).	Votre domaine Shopify
data-embed_type	Fait la distinction entre le code d'intégration pour les boutons d'achat, les collections intégrées et les paniers intégrés. Les valeurs possibles sont produit, panier et collection.	panier
data-checkout_button_text	Le texte affiché sur le bouton qui mène à la page de paiement à partir du panier (pas le bouton du panier).	Paiement
data-button_text_color	Le code hexadécimal de la couleur du texte du bouton d'achat, sans le #. Peut comporter trois caractères hexadécimaux ou six.	ffffff
data-button_background_color	Le code hexadécimal de la couleur du bouton d'achat, sans le #. Peut comporter trois caractères hexadécimaux ou six.	7db461
data-background_color	La couleur d'arrière-plan de la zone entourant le panier intégré. Elle peut être configurée sur code hexadécimal (selon les règles ci-dessus), ou sur transparent. Si elle est configurée sur transparent, aucun remplissage n'est appliqué au contenu de l'élément intégré.	transparent
data-text_color	Le code hexadécimal de la couleur du texte du bouton d'achat, sans le #. Peut comporter trois caractères hexadécimaux ou six.	000000
data-accent_color	Le code hexadécimal de la couleur de la bordure qui apparaît autour du panier, sans #. Peut comporter trois caractères hexadécimaux ou six.	000000
data-cart_title	Le texte qui apparaît en haut du panier intégré lorsqu'il est ouvert sur une page.	Votre panier
data-cart_total_text	Le texte qui apparaît à côté du montant total dans le panier intégré.	Total
data-discount_notice_text	L'avis de réduction qui apparaît dans le panier intégré.	Les codes d'expédition et de réduction sont ajoutés à la caisse.
data-sticky	Indique si le bouton apparaît à l'endroit où il est placé dans le balisage ou s'il est collé sur le côté de la page. Pour les paniers intégrés récemment créés, cela est configuré sur vrai dans le code d'intégration en sortie.	faux
data-empty_cart_text	Le texte qui apparaît si le panier est vide.	Votre panier est vide.
data-next_page_button_text	Le texte qui apparaît sur le bouton Page suivante dans une collection intégrée.	Page suivante

Modifier une collection intégrée

Le code d'intégration d'une collection intégrée inclut deux éléments div. Le premier div contient le code pour un panier intégré, et le second div contient le code pour les boutons d'achat intégrés, qui prennent la forme d'un bouton de fenêtre modale pour chaque produit de la collection.

Remarque

Le code du panier intégré et les boutons d'achat peuvent être modifiés comme décrit ci-dessus, mais l'attribut data-redirect_to doit être configuré sur modal, et data-product_modal doit être configuré sur true.

Le deuxième élément div contient également les attributs suivants :

Définition des attributs dans le code du bouton d’achat

Attribut	Valeur	Par défaut
data-collection_handle	L'ancre de la collection en vedette, basée sur le titre de la collection. Chacune de vos collections a une ancre unique dans Shopify.	L'ancre de la collection en vedette
data-embed_type	Fait la distinction entre le code d'intégration pour les boutons d'achat, les collections intégrées et les paniers intégrés. Les valeurs possibles sont produit, panier et collection.	collection