Tuto comment mettre un formulaire et bouton ajouter au panier en dessous de la description sur shopify

1. Se rendre sur l’admin et cliquer sur « Online store »

2. Cliquer sur Action -> Edit HTML et CSS

3. Trouvez le dossier « Sections» et cliquez dessus cela va dérouler les fichiers qui le compose

4. Cliquer sur le fichier product-template.liquid

5. Trouvez la ligne de code {{ product.description }}  et copiez/coller le code ci-dessous juste en dessous

<style>.js-qty, .ajaxcart__qty {max-width:100px;margin: 10px auto;min-width: 75px;}</style>
 <form action="/cart/add" method="post" id="addToCartForm"><br />
 <strong style="margin-bottom:10px;">{{ product.title }}</strong><br />
 <select style="margin-bottom:10px;" name="id" id="productSelect-{{ section.id }}" class="product-variants product-variants-{{ section.id }}">
 {% 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>
 {% else %}
 <option disabled="disabled">
 {{ variant.title }} - {{ 'products.product.sold_out' | t }}
 </option>
 {% endif %}
 {% endfor %}
 </select>
 <br />
 <label style="margin:10px 0 5px 0;" for="quantity" class="quantity-selector quantity-selector-{{ section.id }}">{{ 'products.product.quantity' | t }}</label>
 <input type="number" id="quantity" name="quantity" value="1" min="1" class="quantity-selector">
 <button type="submit" name="add" id="addToCart" class="btn add-cart-secondary">
 <span class="icon icon-cart"></span>
 <span id="addToCartText-{{ section.id }}">Acheter maintenant</span>
 </button>
 </form>

6. Cliquez sur le bouton « save » ou faite ctrl + s

7. Trouvez ensuite le dossier « Assets» et cliquez dessus cela va dérouler les fichiers qui le compose

8. Trouvez votre fichier .js.liquid, theme.js.liquid, timber.js.liquid, style.js.liquid ou default.js.liquid

9. Rendez vous tout en bas et Copiez/Collez le code ci-dessous (ce bout de code va remplacer le Default Title au cas ou vous n’auriez pas de variantes…):

$(".product-variants option").each(function() { var text = $(this).text(); text = text.replace("Default Title", "Prix"); $(this).text(text); });

10. Cliquez sur le bouton « save » ou faite ctrl + s

Vous souhaitez me remercier et m’encourager à continuer mes tutos?

Alors n’hésitez pas à me faire un petit don même minime car c’est l’intention qui compte 😉

Je veux faire un don

37 commentaires sur “Tuto comment mettre un formulaire et bouton ajouter au panier en dessous de la description sur shopify

  1. Dan

    Salut Geoffrey , merci pour tout ces tutos très instructifs .. vraiment !
    par contre, je rencontre un petit soucis d’affichage sur mon panier et sur celui que j’ai rajouté grâce à toi : « Default Title » s’affiche quand je n’ai qu’un seul choix et pas de variantes sur le produit. De plus, un petit « Title » viens se glisser juste au dessus de la case ( choix de la variante) sur mon panier principal. j’aimerai bien enlever ce dernier et traduire le « titre par défaut » car mon site est pour l’instant exclusivement francophone. J’utilise le thème Début.
    Au plaisir , et chapeau !! tu fais un sacré boulot !

      1. Dan

        Salut , j’ai essayé mais cela n’a pas fonctionné .. jusqu’à ce que je regarde de plus près ton nouveau code. Vu que le thème Début est assez spécial , j’ai coupé la partie que tu a ajouté :

        $(« .product-variants option »).each(function() {
        var text = $(this).text();
        text = text.replace(« Default Title », « Prix »);
        $(this).text(text);
        });

        et je l’ai placé tout en bas de mon fichier « theme.js »
        j’ai enlevé les qu’il restait et ça fonctionne !! merci à toi !! encore et toujours efficace.

        Par contre j’ai toujours le même problème pour mon panier principal … un « Title » juste au dessus de la case variante et un « Default Title » dans cette case quand il n’y a qu’une seule variante … je vais essayer de voir si ton code fonctionne pour lui aussi. je te tiens au courant !

        1. cyril

          Bonjour , as tu réussi à résoudre ton problème ? J’ai le thème Début également et j’ai le « default title » qui s’affiche lorsque l’article à seulement une variante…

          Pourrais tu me partager ce que tu as modifié s’il te plait ?

  2. Gary

    Bonsoir MERCI infiniment pour tes tutos ! Je découvre ton site qui me remotive ! Je vais d’ailleurs acheter Speedfly.

    Sinon concernant ce code : j’aimerais pour centrer tout ça ( le formulaire, le texte, les cases), car le rendu n’est pas très esthétique, bien qu’il soit très utile !

    Peux-tu rajouter le ligne magique qui permet de centrer tous les éléments s’il te plait.

  3. Gary

    Bonsoir MERCI infiniment pour tes tutos ! Je découvre ton site qui me remotive ! Je vais d’ailleurs acheter Speedfly.

    Sinon concernant ce code : j’aimerais pouvoir centrer tout ça ( le formulaire, le texte, les cases), car le rendu n’est pas très esthétique, bien qu’il soit très utile !

    Peux-tu rajouter le ligne magique qui permet de centrer tous les éléments s’il te plait.

  4. Marie-Charlotte

    Bonjour et merci pour ce tuto !
    Serait-il possible de ne pas du tout afficher le champ « Default Title – Prix » lorsqu’il n’y a qu’une variante ? Ce « Default Title » fait vraiment tâche, je ne peux pas laisser ça sur ma boutique (d’autant plus qu’elle est en français), ça ne fait pas sérieux. J’ai réussi à l’enlever après avoir passé des heures à ajuster le code, mais dans ce cas c’est l’ajout au panier qui ne fonctionne plus. Je suis coincée…

    1. dgeo22

      Bonjour, le code est censé transformer ce texte, si ce n’est pas le cas c’est que votre thème n’a pas les identifiants de classes génériques, modifier le la classe du select en conséquence: .product-variants option (product-variants doit être autre chose chez vous)
      Bonne chance

  5. Pan

    Salut vraiment super ! j’ai installé le code sans aucun problème sauf qu’au niveau des devises sa reste en USD ya t’il un moyen de synchroniser les devises en même temps qu’on change la devise sur la fiche produit en haut à droite? Me suis-je bien expliqué???

  6. Pan

    Ha oui j’ai oublié le texte ACHETER MAINTENANT comment peut il changer en même temps qu’une traduction car il reste tout le temps en Français, mon site propose 2 langues.
    Merci

  7. FAB22

    Bonjour et merci pour le tuto !

    Petite question, après avoir modifié la première partie, je me retrouve avec un deuxième « Add to cart », mais qui chevauche la case « quantity » (mon site est en anglais). Comment faire pour ajouter un petit espace entre les 2 ?

    Deuxième question : A quoi sert vraiment la seconde partie du tuto ?

    Merci d’avance 🙂

    1. FAB22

      J’ai compris pour la seconde partie du tuto ! Manque plus que l’espace entre le rectangle « add to cart » et celui de la « quantité ».
      Merci encore

  8. Guillaume

    Salut !
    Super tuto !
    Ça faisait longtemps que je cherchais à rajouter un 2eme bouton !
    Ça marche super je te remercie, par contre, ça n’affiche pas la liste déroulante des « variants ».
    Comment la rajouter stp ?
    Je te remercie 🙂

  9. Gabriel

    Merci pour ce tuto

    J’ai le thème Debut, il n’y a pas de fichier .js.liquid, theme.js.liquid, timber.js.liquid, style.js.liquid ou default.js.liquid, alors je l’ai mis dans theme.js et ça marche!!

    Merci

  10. Jean-Paul ADOLLE

    Hello,

    J’utilise actuellement le thème Supply, et le résultat n’est pas bon. J’ai donc préféré abandonner cette fonction pour l’instant. Voici ce qui ne va pas :
    _Le bouton pour choisir la quantité est déporté sur la droite par rapport aux autres éléments, et ce avant et après la description
    _Il n’y a pas de menu déroulant permettant de choisir la taille / couleur accompagnant le bouton du bas
    _Mes « ajouts » (countdown timer) partent en bas de la page, et je trouve ça moche

    S’il y a des solutions par rapport à ça, je veux bien réessayer !

    Merci, 🙂

  11. STEPHANIE

    Bonjour,
    tout d’abord merci pour tes précieux tuto.

    J ai suivie celui ci mais , il ne se passe rien , je ne vois pas le 2nd bouton ..

    Merci de ton aide

    stephanie

    1. Dgeo GD

      Bonsoir, je pense qu’il n’est pas mis au bon endroit attention selon les thèmes il peut y avoir des zones de conditions d’affichage donc essaye de le coller un peu partout il finira bien par apparaître 😉

  12. DES EMERY Fabienne

    Bonjour,
    Merci pour vos tutos qui sont une aide précieuse, pour la mise en forme de nos shops.
    Cependant je n’ai pas trouvé tuto relatif à:
    METTRE BOUTON ATC sous chaque produit de ma page d’accueil?
    Pourriez vous me renseigner?
    Dans cette attente , cordiales salutations.
    Fabienne

    1. Dgeo GD

      Bonjour, vous devez avoir un fichier featured-product.liquid ou assimilé dans le dossier Sections, il faut donc faire le tuto en remplacant le product-template par celui ci 😉

  13. Florian

    Hello,

    Je ne trouve pas ces fichiers-là mon theme c’est Turbo :

    8. Trouvez votre fichier .js.liquid, theme.js.liquid, timber.js.liquid, style.js.liquid ou default.js.liquid

    Les seuls fichiers en .js que je trouve sont :
    app.js.liquid
    doubly.js
    ginit.js
    instantclick.min.js
    jquery.cart.min.js
    jquery.currencies.min.js
    jquery.min.js
    special-offers.js
    sticky-cart.js

    Est-ce que ce tuto est applicable pour ce theme ?

    1. Dgeo Dev

      Hello, turbo est codé différemment des autres thèmes, la compatibilité est donc plus hasardeuse que les autres… tu peux tenter dans le fichier app.js.liquid
      Bonne soirée

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*
*