Besoin d'un devis ou d'un conseil sur Shopify ? Appelez nous au 01 84 25 92 21

Comment ajouter le bouton "Ajouter au panier" sur les pages de collection Shopify ?

Vous avez besoin de modifier votre theme Shopify pour le personnaliser et vous avez envie d'avoir un bouton "Ajouter au panier" sur vos pages de collections ?

Malheureusement, tous les thèmes ne proposent pas cette option directement. Il va donc falloir mettre les mains dans le code pour obtenir cette nouvelle fonctionnalité. 

Voici la marche à suivre avec le code qui va bien. 

Pourquoi avoir un bouton "ajouter au panier" sur les pages collection ?

Vous pouvez facilement créer sous Shopify un bouton "Ajouter au panier" qui présente un seul produit qui comprend une ou toutes les variantes du produit sur vos pages de collection. Cela permettra à vos clients d'ajouter facilement et sans effort des produits au panier sans avoir à ouvrir la page du produit.

C'est une bonne pratique de l'ergonomie qu'il est évidement important d'AB tester pour voir si cela peut augmenter votre taux de conversion. 

Généralement, plus vous rendez facile l'accès à vos produits, plus vous aurez un panier moyen élevé et un taux de conversion élevé. 

Voici les étapes à suivre pour créer un bouton "ajouter au panier"

  1. Connectez-vous à votre back office Shopify (admin)
  2. Trouvez le theme que vous voulez modifier et cliquez sur "Action / Modifier le code" 
  3. Dans la liste des templates, cherchez le template "collection"
  4. Cherchez (ctrl + F ) le code {% for product in collection.products %} Ajoutez le code suivant juste en dessous :
    <form action="/cart/add" method="post"> {% if product.variants.size == 1 %} <input type="hidden" name="id" value="{{ product.variants.first.id }}" /> {% else %} <select name="id">{% for variant in product.variants %}<option value="{{ variant.id }}">{{ variant.title }}</option>{% endfor %}</select> {% endif %} <div><button type="submit" name="add">Add to cart</button></div> </form>
  5. Cliquez sur Enregistrer
  6. Cliquez sur Aperçu pour voir le résultat sur votre site 

 

📚 A lire aussi 👇

  • Un site Shopify peut-il être performant sur Gtmetrix ? 

    Vous avez déjà peut être entendu une rumeur sur la performances des sites Shopify. Il ne serait pas forcément aussi que d’autres solutions e-commerce et cela pourrait se ressentir sur le business. ...

  • Quel thème gratuit de Shopify choisir ? 

    Vous avez choisi Shopify pour la création ou la refonte de votre site e-commerce et vous voulez utiliser un des thèmes gratuit de Shopify ?  Cela tombe bien, il en existe 8 sur le site officiel The...

  • Propulsé par Shopify : Comment l’enlever de votre site (définitivement) 

    Vous avez créé un beau site Shopify, vous êtes fier de votre beau projet mais au final, vous ne voyez qu’une seule chose sur votre site, c’est ce fameux “Propulsé par shopify”  ou “Powered By shopi...

  • A quoi sert Shopify ?

    Vous avez entendu parler de Shopify ? Vous avez peut être vu la publicité de Shopify dans les couloirs du métro ? Mais au fait c’est quoi Shopify et à quoi ça sert ? Pourquoi cette solution canadie...

  • Comment mettre en ligne sa boutique Shopify ?

    Vous avez envie de vous lancer dans l’e-commerce et de mettre en ligne votre boutique Shopify ? Vous avez déjà tout préparer et c’est enfin l’heure de la mise en ligne ? Comment procéder pour rendr...

Laisser un commentaire

Veuillez noter que les commentaires doivent être approuvés avant d'être publiés