Pourquoi utiliser un Sticky Add to Cart sur Shopify ?

Qu'est-ce qu'un bouton collant Ajouter au panier ?

Le bouton collant d'ajout au panier (également appelé sticky add to cart) est une barre collée en bas ou en haut de la page web d'un site e-commerce. Elle suit la navigation du visiteur et propose à n'importe quel moment d'ajouter le produit visité au panier.

Avantages de l'utilisation d'un bouton collant d'ajout au panier

Le bouton d'achat est toujours visible

Lorsque vous intégrez un bouton collant d'ajout au panier à votre page produit Shopify, le bouton d'achat est toujours visible pour les visiteurs. Même lorsqu'ils font défiler la page web, ils peuvent à tout moment accéder à l'achat du produit sans faire défiler toute la page vers le haut.

Informations importantes du produit toujours affichées

Un Sticky add to cart affiche les éléments les plus importants d'un produit peut importe où l'on se trouve sur la page : nom, prix, variantes disponibles. Cela améliore l'expérience utilisateur qui n'a pas a remonter tout en haut pour vérifier ces informations et peut donc lire la description et consulter les avis clients sans interruption.

Comment ajouter un bouton collant Ajouter au panier sur Shopify ?

Methode 1 : par le code

Cliquez ici si vous ne voulez pas vous aventurer dans du code et passer à une méthode plus simple.

• Depuis votre interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.
• Recherchez le thème que vous souhaitez modifier, puis cliquez sur Actions > Modifier le code.
• Dans le répertoire Snippets, cliquez sur Add a new snippet et appelez le sticky-atc-fuznet.

Puis ajoutez ces lignes de code :

{% if template contains 'product' %}
<div id="sticky-atc-fuznet">
<form action="/cart/add" method="post">
<select name="id">
{% for variant in product.variants %}
<option value="{{variant.id}}">{{variant.title}}</option>
{% endfor %}
</select>
<input type="number" name="quantity" value="1" min="1">
<button type="submit">Ajouter au panier</button>
</form>
</div>
<style>
#sticky-atc-fuznet{
display: flex;
justify-content: center;
position: fixed;
bottom: 0;
width: 100%;
z-index: 9999;
background: #fff;
padding-top: 5px;
border-top: 1px solid #e2e2e2;
}
#sticky-atc-fuznet select,
#sticky-atc-fuznet input,
#sticky-atc-fuznet button{
height:40px;
margin:0 5px;
vertical-align: middle;
}
#sticky-atc-fuznet input{
width: 60px;
text-align: center;
}
#sticky-atc-fuznet button{
padding:0 10px;
}
</style>
{% endif %}

Maintenant, retournez dans theme.liquid et trouvez la balise </body> (tout en bas).

Collez ce code juste au dessus : {% include 'sticky-atc-fuznet' %}

Méthode 2 : avec une app

Si vous n'avez pas envie de prendre des risques en touchant le code de votre thème ou si la solution précédente ne fonctionne pas sur votre thème actuel, le plus simple est d'utiliser notre application ATClone.

En effet notre application permet d'ajouter 2 choses :

• Un deuxième bouton ajouter au panier où vous le souhaitez sur la page produit.
• Un bouton collant (sticky) sur la page produit.