Agence Shopify à votre service ! Besoin d'un devis ou d'un conseil ? 📞 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 👇

  • Est-ce que Shopify est gratuit ?

    Shopify est un logiciel e-commerce payant et il n’existe pas de version gratuite pour le moment. Shopify propose tout de même une version d’essai de 14 jours qui ne nécessite pas de carte bleue, de...

  • Quel est le nombre de produits maximum sur Shopify ?

    Vous êtes intéressés par Shopify mais vous avez beaucoup de produits ou de variantes ? Vous avez envie de connaître les limites techniques de Shopify ? Vous avez envie de savoir si le nombre de pro...

  • Erreur I18n Error: Missing interpolation value

    Vous etes confronté à une erreur de type "Erreur I18n Error: Missing interpolation value" dans Shopify et vous ne savez pas comment résoudre ce probleme ? pas de souci, on vous donne la solution ci...

  • Quelles apps utiliser sur un site Shopify en 2020 ?

    Vous avez un beau site Shopify ? Il réalise pas mal de ventes mais vous aimeriez quand même augmenter votre chiffre d’affaires e-commerce ? Vous avez envie de vous faciliter la vie de e-commerçant ...

  • Shopify lance Cdiscount Feed ! 

    Shopify à beau être une solution Nord Américaine, depuis plusieurs mois, elle a à coeur de s’attaquer au marché français et de proposer les meilleurs apps pour les e-commerçants. Dans cette lancée...

1 commentaire

  • Bonjour j’ai le thème sense et je voudrais savoir ou dans le code je dois placer ce code pour les bouton ajut au panier dans collection.
    merci

    steve

Laisser un commentaire

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