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

Cet article a 51 commentaires

  1. 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. Salut et merci pour le com
      J’ai mis à jour le code pour traduire automatiquement le texte en FR 😉
      Dis moi si ca fonctionne bien
      Bonne soirée

      1. 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. 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 ?

          1. Le tuto est modifié pour prendre en compte les thèmes incompatibles 😉 vous pouvez retester

  2. Slt, stp tu peux me dire comment enlever le rectangle avec Default Title – Prix et celui de la quantité ?

    Merci beaucoup !

    1. Salut, sans voir le site je ne pourrai te dire ca à l’aveugle

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

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

  5. C’est bon j’ai trouvé ! J’ai trouvé comment centrer tout ça !
    Juste avant ton code j’ai mis cette balise :

    1. quelle est la balise stp ? °o°
      Le teaser de fou que tu m’as fait lol

    2. Bonjour, peux tu me dire quelle balise?

      1. Quel thème as tu?

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

  7. Le tuto est modifié pour prendre en compte les thèmes incompatibles 😉 vous pouvez retester

    1. Merci pour la modif, par contre pour le thème minimal j’ai toujours le « Default Title – Prix » qui apparaît

  8. 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é???

    1. Bonjour, non ce tuto ne gère pas le le changement de devises à la volée

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

    1. Bonjour, il suffit de reprendre le code de traduction du 1er formulaire 😉 le button{ texte :t….} un truc comme ca

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

  11. 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 🙂

    1. Salut, il est pourtant censé les afficher… quel thème ?

      1. Bonjour, je suis sur le thème supply j’ai également le même problème

      2. J’ai également le même problème je suis sur le thème Supply

      3. Bonjour,

        Et merci pour tous ces tutos si précieux .
        En revanche, j’ai le même problème, avec le thème supply.
        Après ma description, il y a de nouveau le titre du produit puis le bouton  » Acheter maintenant » mais il n’y a pas la liste des variantes…
        Merci à toi

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

    1. Bonjour, bien joué 😉 l’important dans le codage est de comprendre et de s’adapter en conséquence !

  13. 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, 🙂

    1. Bonjour,

      Je retrouve exactement les problèmes que vous avez cité.

      Avez vous trouver une solution depuis ?

      Merci

      1. Hello, il faudrait idéalement le linker la page qui pose problème pour regarder les erreurs et je pourrai vous orienter 😉
        MP Facebook au besoin.

  14. 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. 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 😉

  15. 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. 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 😉

    1. Bonjour et merci pour le commentaire 🙂

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

  17. Bonjour et merci pour le tuto mais il ne fonctionne pas correctement sur le thème supply sauf erreur de ma part.

  18. Merci…

    Le seule petit default pour moi est visuellement…Je m’explique, si ton produit n’a pas de variante, tu as tout de même la petite fleche qui laisse croire un menu déroulant…Peut etre que c’est modifiable…En tout cas, c’est top donc encore merci

    1. Bonsoir, oui c’est juste peut être une idée d’évolution 🙂

  19. Bonjour ! Merci pour tous ces tutos qui rendent mon site vraiment top pour un thème gratuit… !!
    Concernant celui-ci, j’ai juste question:
    – J’ai installé ton code qui permet de passer directement du bouton ajouter au panier « standard » au checkout (il fonctionne à merveille lorsque je clique sur le bouton de base-en haut de la description-).

    Sauf que lorsque je clique sur « acheter maintenant » -sous la description produit- du tuto de cette page, le client est redirigé vers la page panier, et plus vers le checkout ! :/

    Il y aurait-il un bout de code à ajouter, ou autre chose, pour que cela soit possible ?

    Merci d’avance pour ta réponse et pour tous ces tutos !
    Anaïs

    1. Merci pour le message,
      Il faut rajouter dans le code de ce tuto avant la le code < / form > le code suivant:
      <input type="hidden" name="return_to" value="/checkout" />

  20. Bonjour, merci pour ce tuto !
    Juste une question, j’ai installé le code pour que la page panier soit sautée et que le client arrive directement sur le checkout.

    Par contre, quand j’ajoute le tuto de cette page pour avoir le 2e bouton en bas de description, le client est redirigé vers la page panier.

    Il y aurait-il un code à ajouter/modifier pour que les 2 boutons « ajouter au panier » (donc du haut et du bas), dirigent tous les 2 vers le checkout ?

    Merci d’avance pour votre reponse,
    Anais

    1. Hello, dans le 2ème formulaire avant la fermeture du il faut rajouter ce bout de code:

  21. Quelqu’un a-t-il trouver la solution pour le thème Supply ? Le bouton ne s’affiche pas pour ma part , j’ai suivi le processus a la lettre et même en ayant ajouter le morceau de code manquant disponible dans les commentaires. Le seul moyen de faire apparaître le bouton « acheter maintenant » est d’activer :

    « Afficher le bouton de passage à la caisse dynamique
    Chaque client verra son moyen de paiement préféré parmi ceux qui sont proposés sur votre boutique, tels que PayPal ou Apple Pay. En savoir plus » dans le menu produit des personnalisations thème Shopify .

    Alors vous me dirais que du coup je n’ai pas besoin d’ajouter du code pour le faire apparaître ..

    Oui mais si j’active le passage a la caisse dynamique , mes variantes de produits disparaissent sur mes pages produits ..

    Une solution ??

  22. Bonjour et merci pour ces précieux conseil !
    Cependant dans mon thème « début » j’ai déjà un bouton ajouter au panier et la quantité mais il apparaît en haut et avant ma description produit. J’aimerai le mettre en dessous de la description, j’ai essayé mais en vain.
    Si tu peux m’aider ça serait vraiment super !!

    1. Hello, merci pour le message 😉
      Technique de dev… mettre dans le fichier product-template.liquid dans sections des toto1, toto2 toto3 un peu partout afin de déterminer l’emplacement voulu. Ensuite tu colles le code au toto voulu :p
      Bonne soirée.

Laisser un commentaire

Fermer le menu
×
×

Panier