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

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.

« Comment créer un système de Tracking suivi colis sur Shopify

Comment Ajouter des Traductions sur Shopify »

Cet article a 90 commentaires

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é ^^
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
fabien
2 Juin 2020 Répondre

merci beaucoup dgeo,
Comment peut ton mettre à la place un bouton style amazon sur le theme debut
1. Dgeo Dev
  2 Juin 2020 Répondre
  
  Hello, vous pouvez essayer de mixer avec ce tutoriel https://dgeodev.com/tuto-comment-faire-un-bouton-amazon-sur-shopify/
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 🙂
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
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 😉
john
2 Juin 2020 Répondre

c’est bon y avait 2 display:none !
C’est nickel !
1. Dgeo Dev
  3 Juin 2020 Répondre
  
  Ok cool :p
Romain
5 Juin 2020 Répondre

Bonjour, avez vous la solutions pour fastlane je ne trouve pas, Merci
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 ?
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 😉
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 🙂
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
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
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.
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 🙂
Valérie
29 Sep 2020 Répondre

Précision : les boutons restant tous en liste en haut à gauche.
Marie
25 Oct 2020 Répondre

Bonjour, super contenu comme d’habitude. Merci infiniment! Il fonctionne super bien!
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 😉
Caroline
2 Nov 2020 Répondre

Merci pour ce tuto, en revanche impossible de trouver le bon endroit pour le thème Prestige 🙁
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 😉
  1. fabien
    9 Nov 2020 Répondre
    
    top 😉
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 😉
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 🙁
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 ?
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 ?
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
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 🙂
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 🙂
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
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 😉
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
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 🙂
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.
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 😉
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 ?
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.
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 😉
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.
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 😉
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
DUC
14 Avr 2022 Répondre

Parfait je ferai ça.
Merci à vous Dgeo Dev.
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 🙂
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 🙂

Comment installer le système ?

La partie HTML

La partie CSS

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

Pourquoi on le peut pas tout bien aligner ?

Ce tutoriel existe aussi en vidéo

Besoin d'aide ?

🤗 Vous souhaitez me remercier pour mes Tutos ?

Besoin de déléguer votre SAV ?

🤗 Vous souhaitez me remercier pour mes Tutos ?

Vous devriez également aimer

Comment Créer un Système d’images Avant / Après sur Shopify

Comment Ajouter des Traductions sur Shopify

Comment Créer un Zoom sur Image sur Shopify

Cet article a 90 commentaires

max harder'Z

William Geisslhofer

Dgeo Dev

fabien

Dgeo Dev

William Geisslhofer

Dgeo Dev

John

Dgeo Dev

John

LUCAS

john

Dgeo Dev

john

Dgeo Dev

Romain

Guillaume Chauviere

Théo

Marielle

Théo

Dgeo Dev

Dylan Poirel

Dgeo Dev

eljaja21

Dgeo Dev

Justine

Dgeo Dev

Julie

Dgeo Dev

Valérie

Valérie

Dgeo Dev

nico

Dgeo Dev

Nico

Dgeo Dev

Valérie

Marie

Krystel

Dgeo Dev

Krystel

Dgeo Dev

Caroline

fabien

Dgeo Dev

fabien

chrabs

Dgeo Dev

Anthony

Dgeo Dev

kevin

Dgeo Dev

Amandine

Dgeo Dev

Caroline

Laura

rose

Dgeo Dev

ROSE

Dgeo Dev

Ladune

Pinard

Shirley

Dgeo Dev

Shirley Dulmaine