Comment créer un bouton ajouter au panier dans les collections sur Shopify

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 Ressources (Assets) – et votre fichier base.css, theme.css, style.css ou autre fichier .css que votre thème utilise.

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: 4.9 sur 10 votes]

Besoin d'aide ?

Vous avez un problème pour faire fonctionner ce tutoriel ou vous avez un besoin spécifique ?
Nous pouvons le faire pour vous ! pour ce faire merci de prendre contact avec notre équipe.

En savoir plus

🤗 Vous souhaitez me remercier pour mes Tutos ?

Cliquez sur le bouton ci-dessous pour m'encourager à continuer 😉

Payer un Café à Dgeo Dev

Besoin de déléguer votre SAV ?

Si vous avez besoin d'une personne pour gérer votre SAV j'ai la perle rare 😉 contactez moi en MP ou cliquez sur le bouton ci-dessous:

Je veux déléguer mon SAV

🤗 Vous souhaitez me remercier pour mes Tutos ?

Cliquez sur le bouton ci-dessous pour m'encourager à continuer 😉

Payer un Café à Dgeo Dev

Cet article a 90 commentaires

  1. max harder'Z

    30 Mai 2020 Répondre

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

  2. William Geisslhofer

    1 Juin 2020 Répondre

    nom du theme: simple

    1. Dgeo Dev

      1 Juin 2020 Répondre

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

  3. fabien

    2 Juin 2020 Répondre

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

  4. William Geisslhofer

    2 Juin 2020 Répondre

    nom;du theme: simple:collection template.liquid

    1. Dgeo Dev

      2 Juin 2020 Répondre

      Hello, merci c’est gentil 🙂

  5. John

    2 Juin 2020 Répondre

    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. Dgeo Dev

      2 Juin 2020 Répondre

      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. John

        2 Juin 2020 Répondre

        Magnifique ! Merci beaucoup !

      2. LUCAS

        24 Fév 2021 Répondre

        Bonjour et merci pour ce tutoriel ! la marge à été rajouter dans le code ?
        Merci

  6. john

    2 Juin 2020 Répondre

    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. Dgeo Dev

      3 Juin 2020 Répondre

      Me MP dans ce cas on verra ensemble 😉

  7. john

    2 Juin 2020 Répondre

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

  8. Romain

    5 Juin 2020 Répondre

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

  9. Guillaume Chauviere

    7 Juin 2020 Répondre

    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. Théo

      24 Juil 2020 Répondre

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

      Avez-vous trouvé la solution ?

      Merci d’avance

    2. Marielle

      19 Nov 2020 Répondre

      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. Théo

    24 Juil 2020 Répondre

    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. Dgeo Dev

      25 Juil 2020 Répondre

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

      1. Dylan Poirel

        13 Mai 2021 Répondre

        bonjour il semblerait que j’ai le meme probleme que Theo.
        Pourriez vous m’aider ?

        1. Dgeo Dev

          13 Mai 2021 Répondre

          Hello, il faut essayer de mettre le code plus haut ou plus bas 😉

  11. eljaja21

    11 Août 2020 Répondre

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

    1. Dgeo Dev

      11 Août 2020 Répondre

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

  12. Justine

    26 Août 2020 Répondre

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

    1. Dgeo Dev

      27 Août 2020 Répondre

      Hello et merci bcp

  13. Julie

    28 Août 2020 Répondre

    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. Dgeo Dev

      29 Août 2020 Répondre

      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. Valérie

        29 Sep 2020 Répondre

        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. Valérie

      29 Sep 2020 Répondre

      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. Dgeo Dev

        29 Sep 2020 Répondre

        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. nico

    25 Sep 2020 Répondre

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

    1. Dgeo Dev

      26 Sep 2020 Répondre

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

  15. Nico

    26 Sep 2020 Répondre

    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. Dgeo Dev

      29 Sep 2020 Répondre

      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. Valérie

    29 Sep 2020 Répondre

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

  17. Marie

    25 Oct 2020 Répondre

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

  18. Krystel

    27 Oct 2020 Répondre

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

    1. Dgeo Dev

      29 Oct 2020 Répondre

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

      1. Krystel

        3 Nov 2020 Répondre

        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. Dgeo Dev

          3 Nov 2020 Répondre

          Il faut mettre le code plus haut 😉

  19. Caroline

    2 Nov 2020 Répondre

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

  20. fabien

    8 Nov 2020 Répondre

    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. Dgeo Dev

      9 Nov 2020 Répondre

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

  21. chrabs

    8 Nov 2020 Répondre

    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. Dgeo Dev

      9 Nov 2020 Répondre

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

  22. Anthony

    8 Nov 2020 Répondre

    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. Dgeo Dev

      9 Nov 2020 Répondre

      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 🙂

    2. kevin

      22 Jan 2021 Répondre

      Salut Anthony, toi qui a le thème minimal, toi aussi as tu le bouton ajouter au panier qui redirige directement vers le panier?
      et salut DGEO dev ! UN IMMENSE MERCI POUR TOUT CE QUE TU FAIT ET LE TEMP DE REPONDRE A TOUT LE MONDE! TU FAIS UN TRAVAIL INCROYABLE ! RESPECT
      j’aimerais ne pas être rediriger vers le panier, mais seulement mettre le produits dans le panier, et pareil pour le bouton continuer vos achat, le lien de redirection n’est pas bon, je crois m’ettre tromper de lien dans le code, mais je ne retrouve pas ou c’était, thème minimal

      1. Dgeo Dev

        23 Jan 2021 Répondre

        Hello et merci pour le message 😉 Pour ne pas rediriger vers le panier il faut que le thème possède l’option. Ensuite il faut savoir comment il est codé et seulement ensuite prévoir un développement sur mesure pour mettre ce système en place… En gros on ne peut pas malheureusement créer un code générique sur ça 🙁

  23. Amandine

    17 Nov 2020 Répondre

    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. Dgeo Dev

      19 Nov 2020 Répondre

      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 😉

    2. Caroline

      27 Jan 2021 Répondre

      J’ai le même problème, vous avez trouvé une solution ?

  24. Laura

    26 Nov 2020 Répondre

    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 ?

  25. rose

    7 Déc 2020 Répondre

    Bonjour! j’utilise le theme Début: snippets, et j’ai réeussir a parametré les lajout au panier comme vous l’avey expliqué et il s’affiche. sauf que en voulant rajouté un panier j’ai aparament modifier des trucs et la quand j’appuie le bouton ajout au panier ou le bouton de selection , il me renvoie sur la page produit . j’ai aussi éssayé  »display:block; » comme vous l’aves expliqué en commentaire mais ça marche pas. De l’aide svp

    1. Dgeo Dev

      7 Déc 2020 Répondre

      Bonjour, étrange, revenez à une version antérieure du fichier ou supprimé les codes du tutoriels et au besoin nous pouvons intervenir en envoyant une demande ici: speedecom.freshdesk.com

  26. ROSE

    7 Déc 2020 Répondre

    Bonjour! comment caché la description en desous du produit svp?

    1. Dgeo Dev

      7 Déc 2020 Répondre

      Hello, logiquement directement via les options de votre thème 🙂

  27. Ladune

    13 Jan 2021 Répondre

    Hello ! Merci bcp pour ce tutoriel, ça ma grandement aider 🙂 Par contre je n’arrive pas à trouver comment ajouter des  » …  » au titre des produits sur shopify pour éviter que les icones du ajouter au panier soit décaler, tu saurait m’aider ? Je suis sur minimal 🙂

  28. Pinard

    16 Fév 2021 Répondre

    Hello
    Super tuto merci pour tout
    Thème BOUNDLESS
    J’ai été dans « Produc.card.liquid » j’ai recopié le code comme expliqué dans le tuto puis j’ai déplacé la ligne « div » à la fin du code pour refermer.
    Sans déplacer la ligne « div » les boutons s’affichaient les uns au dessus des autres. En la déplaçant ils se sont affichés sous les produits
    Ensuite 1 petit ajustement pour bien les faire rentrer sur la fiche produit
    Voilà le résultat : http://www.lespinards.fr
    Si ce n’est pas clair n’hésitez pas à me demander en me contactant via le site Pinard et je vous expliquerai en détail.
    A+ et merci encore pour le tuto

  29. Shirley

    23 Fév 2021 Répondre

    Allô,

    wow merci pour ce tuto ça fonctionne super bien 🙂
    Merci pour toutes ces supers informations.
    Une Québécoise heureuse 😀

    1. Dgeo Dev

      23 Fév 2021 Répondre

      Hello, merci pour le com et ravi que ca vous plaise 😉

  30. Shirley Dulmaine

    20 Mar 2021 Répondre

    Bonjour,

    j’ai du changer de thème.
    Je suis maintenant avec supply.
    J’ai trouvé les bons fichiers qui sont theme.scss et product.grid.item.liquid.
    Par contre, j’ai bien le  »ajouter au panier » qui s’affiche, mais pas le sélectionneur de taille.
    J’ai essayé le code à plusieurs endroits.
    Une idée ?
    Une idée

    1. Dgeo Dev

      22 Mar 2021 Répondre

      Hello, le thème doit reprendre la main pour le masquer 🙁 faudrait demander au support de shopify car vous avez doit à 60mn d’intervention gratuite sur leurs thèmes donc autant en profiter :p

  31. David

    31 Mar 2021 Répondre

    Bonjour, Super ce tuto ça fonctionne à merveille sur le thème bilionnaire, merci à toi.
    Par contre, comme d’autre personne, je suis redirigé directement vers le panier. J’ai bien une option à cocher pour « Rester sur la page actuelle lorsqu’un article est ajouté au panier » mais cela fonctionne uniquement lorsque je suis sur une page produit. As-tu une piste à me donner pour identifier l’endroit où se trouve le code qui gère ça et corriger le problème ? Merci d’avance pour ta réponse.

    1. Dgeo Dev

      1 Avr 2021 Répondre

      Hello et merci pour le com 😉 malheureusement chaque thème gère différemment l’ajout au panier et impossible de prévoir 🙁 c’est pour cela que le système est générique et renvoi vers le panier 🙂

  32. Dylan Poirel

    13 Mai 2021 Répondre

    Bonjour, alors voila mon problèmes, je suis sur le thème Brooklyn et après insertions des code html et css mes barres ajout au panier voila que celle-ci occupe la totalités de la largeur du site.
    Si j’ai bien compris en lisant les commentaires il semblerait que le thème reprend la main sur les modifications
    Pourriez-vous m’aider ?
    Merci d’avance.

  33. Shirley

    3 Juin 2021 Répondre

    Hello 🙂

    j’aimerais savoir s’il est possible d’enlever le changement de couleur lorsque nous pointons le curseur sur le bouton.
    La couleur change pour une que je n’aime pas du tout 😀 et j’aimerais que ça reste la même couleur que j’ai mis le bouton.

    Merci

    1. Dgeo Dev

      3 Juin 2021 Répondre

      Hello, alors la cela dépend du thème et le hover des boutons 🙂 faudrait voir avec leur support 😉

  34. Sarah

    27 Juin 2021 Répondre

    Hello, j’ai la version Brooklyn, j’ai fait tout ce que vous m’avez dit mais l’encart « ajouter au panier » était vraiment énorme. J’ai dû le supprimer. Savez-vous pourquoi ?

  35. lndy

    23 Sep 2021 Répondre

    Bonjour,

    Merci pour ce tuto.
    J’ai bien appliqué toutes les étapes. Toutefois, au moment ou l’ajout au panier apparaît j’ai du texte (souvent le titre du produit) qui s’affiche juste au dessus, j’ai essayé de regler le soucis mais impossible de comprendre d’ou ça vient (car sans l’ajout au panier ce texte n’apparaît pas) Si vous avez une solution ce serait top..
    Merci

    1. Dgeo Dev

      26 Sep 2021 Répondre

      Bonjour, hum étrange je ne saurais dire pourquoi… c’est surement le thème qui gère cela faut voir avec leur support directement.

  36. Barbara

    14 Nov 2021 Répondre

    Bonjour,
    Je ne trouve pas ce bout de code dans aucune des pages de mon code avec le thème Impulse avez vous eu d’autres remontées?
    Merci !

    1. Nosila

      29 Déc 2021 Répondre

      Bonjour,
      J’ai également le thème Impulse. Je peux peut-être vous aider (si mon bouton n’a pas été créé par l’ancien développeur du site :p).

      Si vous cherchez le formulaire affichant le bouton, pour moi il se trouve dans « snippet/product-form.liquid ».

      Nosila

      1. Dgeo Dev

        29 Déc 2021 Répondre

        Hello, merci pour la participation c’est sympa 😉

  37. Nosila

    29 Déc 2021 Répondre

    Bonjour,
    Merci pour tous ces tutos sympa pour débuter !

    Je dois avouer que je n’ai pas du tout fait comme ça, j’ai ajouté directement mon render du bouton (product-form) pour ne pas avoir à coller un code entier de bouton et alourdir mon site encore plus.
    Cependant mon problème (même si je c/c tout le code d’ailleurs), est que le bouton m’affiche « épuisé » même sur mes produits en stock.
    Avez-vous une idée de la condition qui a pu foirer ?

    Merci beaucoup !
    Nosila

    Theme : Impulse4.0.2/Section:product.liquid.
    Projet : Création d’une CartBar Sticky avec bouton d’ajout au panier en bas de la fiche produit.

    1. Dgeo Dev

      29 Déc 2021 Répondre

      Bonjour et merci pour le commentaire. Effectivement ce code ne prend pas en compte le stock. J’essaierai de l’améliorer en conséquence d’ici quelques temps.

  38. Elise

    17 Fév 2022 Répondre

    Hello à tous
    merci pour ce tutoriel qui correspond pile à ce que je recherche, en revanche je suis sur le thème Crave, et IMPOSSIBLE de mettre la main sur l’occurence {% include ‘product dans aucune des pages de mon code, j’ai épluché toutes les pages incluant tous les termes que vous évoquez (product, grid, template, collection etc). Et il n’y a jamais nulle part {% include ‘product
    Alors je suis bloquée là ce qui est un peu rageant ^^’
    Sauriez-vous m’aider ?
    Par avance merci

    1. Dgeo Dev

      18 Fév 2022 Répondre

      Hello, désolé je ne connais pas du tout ce thème – C’est assez délicat de répondre du coup ca dépend bcp de la nomenclature que le développeur a utilisé et visiblement il n’a pas suivi les bonnes pratiques. Faudrait essayer de regarder dans Templates – collection-template histoire de voir qu’elle section est appelée ensuite dans la section trouvée regarder si un render ou include est dispo et voir donc le fichier adéquate dans le dossier snippets – sinon demander à leur support de vous aider ou acheter mon thème qui inclus ca de base 😉

  39. florence

    9 Avr 2022 Répondre

    Bonjour

    Je n’arrive pas avec le theme Dawn. Je ne sais pas ajouter dans quelle section

    1. Dgeo Dev

      10 Avr 2022 Répondre

      Bonjour, sur dawn c’est dans snippets – product-thumbnail.liquid

      1. DUC

        14 Avr 2022 Répondre

        Bonjour, sur dawn dans quelle partie mettre le code html et dans quelle partie mettre le code CSS ?
        J’ai tenté dans
        snippets – product-thumbnail.liquid
        Rien n’a changé sur ma page
        Merci d’avance

        1. Dgeo Dev

          14 Avr 2022 Répondre

          Hello, le css se met dans base.css pour le reste je ne sais pas trop le mieux serait tester d’écrire des toto1 toto2 un peu partout dans les fichiers afin de déterminer les endroits

  40. DUC

    14 Avr 2022 Répondre

    Parfait je ferai ça.
    Merci à vous Dgeo Dev.

  41. Charlotte

    15 Avr 2022 Répondre

    Bonjour, malgré les différents commentaires pour le thème IMPULSE, je ne trouve pas le code : {% include ‘product , ni dans snipper, section, template. Est-il possible de m’aider?
    Merci bcp!
    Charlotte

    1. Dgeo Dev

      15 Avr 2022 Répondre

      Bonjour, recherche render au lieu de include – nouveauté shopify 🙂

  42. Optinuz

    12 Déc 2023 Répondre

    sur theme story moi je veux plutot l’enlever
    le boutton ajout au panier sous collection

    1. Dgeo Dev

      18 Déc 2023 Répondre

      Hello, désolé je ne connais pas ce theme. par contre y a surement une option au niveau de la collection pour le supprimer 🙂

Laisser un commentaire

Fermer le menu
×
×

Panier