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;
  float:left;
  // 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 2 votes]

Cet article a 25 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

  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>

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