Nous allons voir dans ce tutoriel comment mettre à jour les variantes sur shopify en cliquant sur les images associées

Ce sytème est très utiles pour que les clients voient directement le changement de variantes au clic sur l’image correspondante. Cela permet également d’éviter au client de se tromper.

Rentrons directement dans le vif du sujet

Rendez vous dans Online store -> Actions -> Edit CSS/HTML -> Layout-> product.liquid

Ensuite copiez le code ci-dessous tout en bas du fichier

{% comment %}
Place this in your product.liquid template, at the bottom.
{% endcomment %}
{% if product.variants.size > 1 %}
<script>
(function($) { 
 var variantImages = {},
 thumbnails,
 variant,
 variantImage,
 optionValue;
 {% for variant in product.variants %}
 variant = {{ variant | json }};
 if ( typeof variant.featured_image !== 'undefined' && variant.featured_image !== null ) {
 variantImage = variant.featured_image.src.split('?')[0].replace(/http(s)?:/,'');
 variantImages[variantImage] = variantImages[variantImage] || {};
 {% for option in product.options %}
 {% assign option_value = variant.options[forloop.index0] %}
 {% assign option_key = 'option-' | append: forloop.index0 %}
 if (typeof variantImages[variantImage][{{ option_key | json }}] === 'undefined') {
 variantImages[variantImage][{{ option_key | json }}] = {{ option_value | json }};
 }
 else {
 var oldValue = variantImages[variantImage][{{ option_key | json }}];
 if ( oldValue !== null && oldValue !== {{ option_value | json }} ) {
 variantImages[variantImage][{{ option_key | json }}] = null;
 }
 }
 {% endfor %}
 }
 {% endfor %}
 $(function() {
 thumbnails = $('img[src*="/products/"]').not(':first');
 if (thumbnails.size()) {
 thumbnails.bind('click', function() {
 var image = $(this).attr('src').split('?')[0].replace(/(_thumb\.)|(_small\.)|(_compact\.)|(_medium\.)|(_large\.)|(_grande\.)/,'.');
 if (typeof variantImages[image] !== 'undefined') {
 {% for option in product.options %}
 optionValue = variantImages[image]['option-{{ forloop.index0 }}'];
 if (optionValue !== null && $('.single-option-selector:eq({{ forloop.index0 }}) option').filter(function() { return $(this).text() === optionValue }).length) {
 $('.single-option-selector:eq({{ forloop.index0 }})').val(optionValue).trigger('change');
 }
 {% endfor %}
 }
 });
 }
 });
})(jQuery);
</script> 
{% endif %}

Il ne vous reste plus qu’a tester tout ca !

Si cela ne fonctionne pas, c’est que votre thème n’a pas Jquery de chargé. Dans ce cas rendez-vous dans Layout – theme.liquid et avant la fermeture du </head> collez ce bout de code:

<script src="https://code.jquery.com/jquery-1.12.4.min.js" crossorigin="anonymous"></script>

Je rappelle que ce code n’est pas de moi cette fois ci 😉

Source: https://github.com/carolineschnapp/make-image-change-variant

ps: ce code ne fonctionne pas avec tous les thèmes

Bon tuto à tous 🙂

Merci de me laisser une petite note 😉
[Note moyenne de: 5 sur 1 votes]

🤗 Vous souhaitez m'encourager à continuer mes Tutos ?

Cliquez sur le bouton ci-dessous pour me laisser un petit pourboire 😉

Payer un coup à Dgeo Dev

Cet article a 22 commentaires

    1. Hello, ok merci de ton retour qui pourra en aider plus d’un sur ce thème 😉

  1. j’arrive pas a le placer sur brooklyn, sais tu si l’autre technique passe?

    1. Hello, comment ca tu n’arrive pas à le placer ?

      1. en clair je les placer a l’endroit où tu l’indique et sur brooklyn ca ne fonctionne pas. à tu une idèe?

        je me suis mal exprimé excuse moi.

        cdlmt,

        Michael.

  2. vraiment super génial ces tutos. mille merci mec

    1. Hello, de rien et merci pour le message 😉

  3. il n y a pas de section « product liquid » dans layout. j’ai (avec le theme supply) giftcard/password/theme

    1. va dans >boutique en ligne > ensuite ton thème il y a un bouton actions > clique et il y a modifier le code > ensuite au lieux de chercher le product.liquid, tape le dans la barre de recherche et tu fais comme il a dit copier coller tout simplement !

      au top

  4. Waou au top !
    Par contre pourquoi c’est pas de base dans le code cette action ???
    je sors de 10 ans de prestashop et ce genre de détails est en natif !
    1h que je cherche a comment faire cette manipulation …

    Un grand merci a toi 🙂

  5. Bonjour, comment faire pour le theme jumpstart ? merci

    1. Hello, logiquement c’est générique

  6. hello, tout d’abord merci pour ton taf, le site est une mine d’info !
    Parcontre j’ai un probleme avec ce tuto, il ne fonctionne pas chez moi avec le theme DEBUT, du coup, j’ai essayé avec le lien en premier commentaire, j’ai tout suivi à la lettre et idem. quelqu un aurait la solution ?

  7. Bonjour,
    Cela n’a pas fonctionné malgré plusieurs tentatives..Aurais tu une solution ? (j’ai le thème supply).
    Merci

    1. Bonjour, oui en effet ce tuto ne fonctionne plus depuis les mises à jour de certains thème 🙁

  8. Salut, Comment appliquer cette fonction au 2eme bouton en bas de la fiche produit?

    1. Hello, c’est tellement spécifique que cela dépend de chaque thème. en gros pas possible sauf en développement spécifique.

  9. Merci Dgeo, je suis une vraie merde en informatique, mais grace a toi j’ai reussi quelque petit exploit (aucun mérite, je fais que te mimer, mais je m’en fou, je suis content).
    Grand merci.
    Parfois ca ne fonctionne pas, mais souvent si, sinon quand tu dis avant le ca veut dire dessus, coller ???
    Trop complexe pour moi.

    Merci pour tout, et bravo, méga sympa de ta pars.

    1. Hello, héhé merci pour ce témoignage 😀 – oui c’est cela « dessus et coller » 😉 Bonne soirée

Laisser un commentaire

Fermer le menu

formation seo gratuite shopify

Une formation Gratuite SEO sur Shopify ça te tente ?

Alors abonne-toi à la chaine et active la cloche pour ne pas louper l'arrivée des prochains modules !

Commencer la formation