Nous allons voir dans ce tutoriel comment créer un bouton ajouter au panier dans les collections sur Shopify. Ce système est assez pratique pour permettre à vos clients d’acheter directement au niveau de vos collections sans avoir besoin d’aller sur les fiches produits. De plus votre taux de conversion sera grandement boosté 😉

Vous pouvez voir le résultat ici : https://dgeodev.myshopify.com/collections/frontpage

ajouter au panier collection shopify

Comment installer le système ?

Il va falloir trouver le fichier qui liste vos produits dans vos collections et liste de produits de votre page d’accueil. Par contre tous les thèmes ne sont pas codés pareil sinon ça serait trop beau… On va devoir tâtonner pour trouver le bon fichier ! Je vous propose donc de créer ensemble une liste de chemins quie vous allez me fournir dans les commentaires 😉 Ainsi vous allez pouvoir améliorer et participer à ce tuto Shopify 🙂

La partie HTML

Rendez-vous dans Boutique en ligne – Actions – Modifier le code – Trouvez le dossier Sections et essayez de trouver le fichier collection-template.liquid – faites un crtl + F ou cmd + F pour recherche l’occurrence suivante {% include 'product en général c’est product-grid-item.liquid, product-item.liquid etc… Désormais nous allons déterminer ensemble le chemin pour chaque thème 😉

  • Speedfly : pas besoin le système est intégré
  • Debut : Snippets – product-card-grid.liquid ou product-card-list.liquid – à copier tout en bas du fichier
  • Brooklyn : Snippets – product-grid-item.liquid  – à copier tout en bas du fichier
  • Venture : Snippets – product-card.liquid ou product-card-list.liquid – à copier tout en bas du fichier
  • Simple – Sections – collection template.liquid – à copier tout en bas du fichier

A vous de jouer en écrivant un commentaire de ce style : nom du thème : chemin du fichier

Une fois le fichier et la zone trouvée il ne vous reste plus qu’à copier/coller le code ci-dessous:

<form action="/cart/add" method="post" class="dg-addToCartFormGrid" >  
  <div style="min-height:50px;">
    <select style="margin-bottom:10px;font-size:12px;width:100%;max-width:100%;{% unless product.variants.size > 1 %}display:none;{% endunless %}" name="id" id="productSelect-{{ section.id }}" class="product-variants product-variants-{{ section.id }}">
      {{ product.variants.size }}
      {% for variant in product.variants %}
      {% if variant.available %}
      <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">
        {{ variant.title }} - {{ variant.price | money_with_currency }}
      </option>    
      {% endif %}
      {% endfor %}
    </select>
  </div>
  <div style="display:none;">  
    <input type="number" id="quantity" name="quantity" value="1" min="1" class="quantity-selector">
  </div>
  <button type="submit" name="add" class="btn addToCart add-cart-secondary" style="width:100%;">
    
	<!-- vous pouvez changer cette ligne pour supprimer ou changer le panier -->
    <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-cart" viewBox="0 0 37 40"><path d="M36.5 34.8L33.3 8h-5.9C26.7 3.9 23 .8 18.5.8S10.3 3.9 9.6 8H3.7L.5 34.8c-.2 1.5.4 2.4.9 3 .5.5 1.4 1.2 3.1 1.2h28c1.3 0 2.4-.4 3.1-1.3.7-.7 1-1.8.9-2.9zm-18-30c2.2 0 4.1 1.4 4.7 3.2h-9.5c.7-1.9 2.6-3.2 4.8-3.2zM4.5 35l2.8-23h2.2v3c0 1.1.9 2 2 2s2-.9 2-2v-3h10v3c0 1.1.9 2 2 2s2-.9 2-2v-3h2.2l2.8 23h-28z"></path></svg>
	
    <span id="addToCartText-{{ section.id }}">Ajouter au panier</span>
  </button>
</form>

La partie CSS

Rendez-vous dans Boutique en ligne – Actions – Modifier le code – Trouvez le dossier Assets – et votre fichier xxx.scss.liquid… généralement theme.scss.liquid, style.scss.liquid ou timber.scss.liquid.

Mettez vous tout en bas du fichier et copiez/collez le bouton de code ci-dessous:

.dg-addToCartFormGrid { margin-bottom:25px; }
.dg-addToCartFormGrid svg {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  fill: currentColor;
  display:inline-block;  
  // display:none !important;
}
.dg-addToCartFormGrid button {
  // background:#FF8900 !important;
  // color:#FFFFFF !important;
}
@media screen and (max-width: 600px) {
  .dg-addToCartFormGrid svg { display:none; }
  .dg-addToCartFormGrid button { font-size:10px; }
}

La partie // display:none !important; est masquée car en css les // devant un attribut permet de ne pas l’interpréter. Vous pouvez enlever les // de cette ligne pour supprimer l’icône du panier. De plus si vous souhaitez changer l’icône du panier regardez la vidéo ça sera plus simple.

De la même manière vous allez vous 2 autres lignes:

// background:#FF8900 !important;
// color:#FFFFFF !important;

Il vous suffit de supprimer les 2 premiers // de chaque ligne pour reprendre la main sur la couleur de fond et de texte du bouton.

Les boutons ajouter au panier ne sont pas bien alignés !!!

Alala ! je la vois venir à 100 kilomètres cette question 😀

Pourquoi on le peut pas tout bien aligner ?

Cela dépend de pas mal de choses et c’est la question qui est la plus souvent posée par les clients du web et qui énerve le plus les UX designer…

  • Les images doivent être de même ratio carrées, rectangles peu importe mais l’important est qu’elles soient homogènes.
  • La taille du titre doit être cohérent et pas trop long (on peut couper les mot et mettre des … option dans le thème)
  • Si le produit a des avis qui peut engendrer une ligne en plus.
  • Si le prix du produit ou le à partir de … est trop long sur certains produits

En gros j’ai tendance à dire depuis pas mal d’années qu’un site web vit et que ce n’est pas des cases de petites annonces qui ne débordent jamais. Il doit pouvoir se redimensionner sans problème et le fait de figer des tailles en hauteur est une très mauvaise pratique.

Et si on figent les éléments quand même ? que va t-il se passer sur tablettes (petites ou grandes) petit pc ou grand, mobile petit moyen grand etc… et bien c’est simple ça va être la cata 😀

Ce tutoriel existe aussi en vidéo

Bon tuto à tous et merci pour votre participation 😉

Inclus dans Speedfly
Merci de me laisser une petite note 😉
[Note moyenne de: 5 sur 3 votes]

Cet article a 50 commentaires

  1. Super tuto bien pratique encore une fois 🙂 j’utilise venture, donc le chemin était déjà trouvé ^^

  2. nom du theme: simple

    1. Hello, merci mais il manque le chemin du fichier 🙂 t’en rappelle tu ? merci d’avance

  3. merci beaucoup dgeo,
    Comment peut ton mettre à la place un bouton style amazon sur le theme debut

  4. nom;du theme: simple:collection template.liquid

    1. Hello, merci c’est gentil 🙂

  5. Hello, top ce tuto ! Je l’ai configuré sur le coté HTML sur mon modele début .
    3 petites questions cependant :
    1) Est ce possible de rajouter l’icone Quantité à coté de chaque produit ? et si oui comment ?
    2) Quand on fait « ajouter au panier », comment faire pour rester sur la page de la collection plutôt que d’aller directement au panier ?
    3) Le Ajouter au panier est collé à la photo du produit d’en dessous, y a un moyen de changer cela ?

    Merci beaucoup pour votre aide.

    1. Hello et merci pour le message 🙂
      1. dans la partie html trouver le display:none; et remplacer par display:block;
      2. la c’est assez compliqué, il faudrait un petit développement sur mesure
      3. Je vais adapter le code du tuto pour rajouter une marge – vous pouvez le reprendre à partir du 3 juin 😉

      1. Magnifique ! Merci beaucoup !

  6. re-
    j’ai fait . dans la partie html trouver le display:none; et remplacer par display:block;
    pour avoir le quantité à coté d’ajouter au panier dans les collections, mais cela ne change rien…

    1. Me MP dans ce cas on verra ensemble 😉

  7. c’est bon y avait 2 display:none !
    C’est nickel !

  8. Bonjour, avez vous la solutions pour fastlane je ne trouve pas, Merci

  9. Bonjour,

    Tout d’abord merci pour tout ces tutos, grâce a vous j’améliore mon site un peu plus tous les jours.

    Malgré tout, je n’arrive pas à régler la taille du bouton ajout au panier qui s’affiche en gros sur pratiquement toute la page. J’utilise le theme brooklin. J’ai suivis toute la démarche à la lettre mais rien n’y fait …

    Merci pour votre aide.

    Guillaume

    1. J’ai exactement le même problème…

      Avez-vous trouvé la solution ?

      Merci d’avance

    2. Bonjour à tous,
      et merci Dgeo pour tous tes autos c’est vraiment génial!
      j’ai le même problème sur Brooklin
      – La barre de sélection de choix fait toute la largeur de la page mais la hauteur est bonne,

      est ce que l’un de vous à résolu ce problème ?

  10. Bonjour,

    Tout d’abord merci pour tous ces tutos, ils m’aident beaucoup,

    En revanche, j’ai un soucis avec le panier et la barre de sélection de choix,
    La barre de sélection de choix fait toute la largeur de la page mais la hauteur est bonne,
    Et la barre d’ajout au panier, quant à elle, fait toute la largeur de la page mais également la même hauteur, soit un carré monumentale qui prend toute la page,

    Mon thème est Brooklin
    Ma collection de produits est en grille,

    Pourrie-vous m’aider ?

    Merci d’avance,

    1. Bonjour, c’est le thème qui reprend la main sur le style. faudrait m’envoyer la page en MP pour que je regarde.

  11. Bonjour pour ma part le « Ajouter au panier se met à droite de mon image produit et non en dessous…. Une solution ?

    1. Hello, il faut essayer dans ce cas de le mettre plus bas 🙂

  12. Bonjour,
    Sur pop c’est snippets/product-grid-item.liquid

    1. Hello et merci bcp

  13. Bonjour,
    Ce tuto a l’air super !
    Cependant, quand je l’ai ajouté sur mon thème, les boutons se sont tous ajoutés en liste en haut à gauche de ma page et pas du tout en-dessous des produits comme prévu…
    J’en profite pour indiquer que pour Narrative il s’agit de product-card.liquid 🙂
    Merci

    1. Hello et merci pour le message 🙂 essaie de mettre le code un peu plus bas sinon juste avant le code mettre ce code pour breaker: <div style="clear:both;overflow:hidden;width:100%;"></div>

      1. Bonjour,
        Tout d’abord merci beaucoup pour ces tutos qui sont d’une grande utilité.
        Je suis comme Julie en narrative restent tous en liste en haut à gauche de la page malgré l’ajout du bout de code pour breaker. Y-a-t-il une autre solution ?

        Merci beaucoup.
        Valérie

    2. Bonjour Julie,
      J’ai le même problème avec mon site en Narrative. Est-ce que que la solution du saut de ligne ou code pour breaker a fonctionnée ?

      Merci !
      Valérie

      1. Hello, il faudrait essayer de mettre le code plus bas afin de voir si c’est mieux sinon m’envoyer l’url en MP sur mon messenger 😉 Bonne journée

  14. salut dgeo , le tuto fonctionne !
    mais je ne comprends pas pourquoi sur mobile je ne vois pas les variantes et ajout au panier?

    1. Hello, le thème a peut être une taille max des grilles… faudrait voir de ce côté la.

  15. Le problème est résolu ! Je suis idiot.
    Un grand merci à toi pour tous le taf que tu nous fournis !
    Dernière question, j’ai suivi le tuto pour les logo au niveau du footer, il y a pas moyen de rendre plus esthétique sur la version mobile ?
    Car il se superposé un par un et prend bcp de place

    1. Hello, ok super et merci pour le com 🙂 pour l’esthétique c’est hérité du thème il faudrait donc voir au cas par cas ou demander à leur support ce qu’il est possible de faire 🙂

  16. Précision : les boutons restant tous en liste en haut à gauche.

  17. Bonjour, super contenu comme d’habitude. Merci infiniment! Il fonctionne super bien!

  18. Bonjour, comment faire pour que le bouton ajouter au panier se mette à coté du sélecteur de quantité?
    Merci pour votre aide

    1. Hello, c’est dépendant du thème.

      1. Bonjour, j’ai le même thème que vous, sur votre site d’exemple, début, mais mon sélecteur est au dessus du bouton ajouter au panier

        1. Il faut mettre le code plus haut 😉

  19. Merci pour ce tuto, en revanche impossible de trouver le bon endroit pour le thème Prestige 🙁

  20. salut dgeo, merci pour tes tutos gratis et de ton temps,
    j’ai 2 choses qui me pose problème avec ce tuto,
    1. quand l’article est en rupture de stock on a une page d’erreur
    2. quand on clique la page le panier s’affiche (est il possible d’afficher la pop up panier afin de revenir facilement à la page d’avant)

    1. Hello et merci pour le commentaire j’en prends note pour éventuellement l’améliorer bientôt 😉

  21. Hello merci pour le tuto mais dès le départ du tuto impossible même de trouver include.product ni d’ailleurs même derrière en cherchant le fichier product-item rien de tout ca dans le thème prestige.
    une piste peut être merci.

    1. Hello, tout dépend du thème. le mieux et de demander au support de celui ci de vous aiguiller 😉

  22. Pour le thème Minimal : Snippets -> product-grid-item.liquid et Assets -> theme.scss.liquid.
    Question : Tout fonctionne parfaitement pour moi, le seul problème est que le bouton ajouter au panier et le selecteur de variante sont trop éloigné l’un de l’autre et surtout trop éloigné du produit (contre le bas) mais seulement sur mobile, sur PC tout est ok.
    As-tu une solution ? merci pour tout

    1. Hello, c’est le thème et son design qui reprend le dessus 🙂 le mieux est de demander au support du thème de vous aider 🙂

  23. Bonjour et merci pour ce tutoriel, j’utilise le thème Supply et j’ai trouvé les bons fichiers à priori qui sont product.grid.item.liquid et theme.scss.liquid. J’ai suivis les instructions mais toute la mise en page est décalée. les produits se mettent à la ligne 1 à 1. Je ne pense pas avoir fait d’erreur car je réalise tous les tutos et d’habitude zéro soucis.
    Une idée Dgeo Dev ?
    Merci en tout cas

    1. Hello, hum non navré la comme ça je vois pas. L’emplacement ne doit pas être bon sinon demander à shopify vous avez droit à 60mn d’intervention gratuite 😉

  24. Bonjour, merci pour tes conseils, ça fonctionne très bien de ma part. J’aimerais par contre changer la taille de mon texte pour afficher la quantité de mes articles en plus grand. Cette option s’affiche avant le bouton « Ajouter au panier ». J’utilise le thème Debut. Peux-tu m’aider, stp ?

Laisser un commentaire

Fermer le menu

Envie d'apprendre à Coder et Maitriser ton Thème Shopify  ?

Alors abonne-toi à la chaine et active la cloche pour ne pas louper l'arrivée des prochaines vidéos !

S'abonner à la chaine