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.

Installons le variantes au clic sur les images du produit

Rentrons directement dans le vif du sujet

Rendez vous dans Boutique en ligne -> Actions -> Modifier le code -> Mise en page (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 Mise en page (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 🙂

Inclus dans Speedfly

Merci de me laisser une petite note 😉

[Note moyenne de: 5 sur 2 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.

« Tuto Empêcher vos concurrents de voir vos Best Sellers sur shopify

Comment agrandir le bouton ajout au panier sur shopify ? »

Cet article a 32 commentaires

Max
10 Oct 2017 Répondre

Hello,
pour moi ce tuto ne marchait pas (theme DEBUT)
avec celui ci tout marche comme je le voulais 🙂
https://help.shopify.com/themes/customization/products/variants/select-variants-by-clicking-images
1. dgeo22
  18 Oct 2017 Répondre
  
  Hello, ok merci de ton retour qui pourra en aider plus d’un sur ce thème 😉
guicherd
15 Mai 2018 Répondre

j’arrive pas a le placer sur brooklyn, sais tu si l’autre technique passe?
1. Dgeo Dev
  15 Mai 2018 Répondre
  
  Hello, comment ca tu n’arrive pas à le placer ?
  1. guicherd
    17 Mai 2018 Répondre
    
    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.
    1. guicherd
      17 Mai 2018 Répondre
      
      j ai fait une capture pour que tu me dise si je me trompe je les collé à la suite de ceci:
      
      https://www.noelshack.com/2018-20-4-1526542119-capture.jpg
      
      cordialement,
      
      Michael.
      1. guicherd
        17 Mai 2018
        
        hmmm désolé je t’ai mis le mauvais lien celui-la est le bon.
        
        https://image.noelshack.com/fichiers/2018/20/4/1526542119-capture.jpg
karim
28 Août 2018 Répondre

vraiment super génial ces tutos. mille merci mec
1. Dgeo Dev
  28 Août 2018 Répondre
  
  Hello, de rien et merci pour le message 😉
gems
15 Déc 2018 Répondre

il n y a pas de section « product liquid » dans layout. j’ai (avec le theme supply) giftcard/password/theme
1. Bixente
  9 Jan 2019 Répondre
  
  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
Bixente
9 Jan 2019 Répondre

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 🙂
Henry Bel
1 Sep 2019 Répondre

Bonjour, comment faire pour le theme jumpstart ? merci
1. Dgeo Dev
  3 Sep 2019 Répondre
  
  Hello, logiquement c’est générique
jobbi
5 Oct 2019 Répondre

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 ?
1. Dgeo Dev
  5 Oct 2019 Répondre
  
  Hello, oui ca dépend bcp des thèmes: essayer en suivant ce tuto sinon: https://help.shopify.com/en/themes/customization/products/variants/select-variants-by-clicking-images
  1. Vincent V
    15 Sep 2020 Répondre
    
    Bonsoir, j’ai installé ce code (le tuto de Shopify) sur mon thème Début, et il fonctionne bien sur la page produit, mais pas sur la page d’accueil. Comment faire pour que ce soit le cas ?
    1. Dgeo Dev
      16 Sep 2020 Répondre
      
      Hello, c’est un autre fichier qui est appelé sur la page d’accueil, généralement dans sections – featured-product.liquid 😉
      1. Vincent Vesga
        16 Sep 2020
        
        Super ! ça marche ! Merci ! 🙂
Mercier
18 Déc 2019 Répondre

Bonjour,
Cela n’a pas fonctionné malgré plusieurs tentatives..Aurais tu une solution ? (j’ai le thème supply).
Merci
1. Dgeo Dev
  19 Déc 2019 Répondre
  
  Bonjour, oui en effet ce tuto ne fonctionne plus depuis les mises à jour de certains thème 🙁
John
18 Déc 2019 Répondre

Salut, Comment appliquer cette fonction au 2eme bouton en bas de la fiche produit?
1. Dgeo Dev
  19 Déc 2019 Répondre
  
  Hello, c’est tellement spécifique que cela dépend de chaque thème. en gros pas possible sauf en développement spécifique.
Cedric Cousin
18 Jan 2020 Répondre

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. Dgeo Dev
  21 Jan 2020 Répondre
  
  Hello, héhé merci pour ce témoignage 😀 – oui c’est cela « dessus et coller » 😉 Bonne soirée
SANCHES
27 Mar 2020 Répondre

Tout d’abord Un énorme Merci pour tout vos tutos, (même si je pense que ça doit être le millième merci que vous recevez)
Sinon concernant ce tuto j’aimerai savoir comment faire pour qu’il fonctionne aussi sur un appareil mobile ?
1. Dgeo Dev
  27 Mar 2020 Répondre
  
  Bonjour, les mercis font tjs plaisir 😉 euh logiquement cela fonctionne sur mobile… Après cela dépend du thème
Emmanuel
26 Oct 2020 Répondre

Bonjour,
Quelqu’un aurait-il le lien pour la modification du thème « Début », apparamment celui fournit plus haut ne fonctionne plus.
Emmanuel
26 Oct 2020 Répondre

J’ai trouvé ceci qui fonctionne à merveille 🙂
https://shopify.dev/tutorials/customize-theme-select-variants-by-clicking-images
1. Dgeo Dev
  26 Oct 2020 Répondre
  
  Hello, cool et merci pour la communauté 😉
Eboss
5 Oct 2024 Répondre

Bonjour
Serait-il possible d’avoir la solution, car quand je clique sur le produit depuis ma page d’accueil, cela me met directement sur une variante sur la fiche produit. j’aimerais que la photo par défaut du produit s’affiche en premier lieux et une fois que le client a choisi la couleur cela affiche une photo de la variante. J’utilise le thème « Refresh ». J’ai parcouru les forum mais j’ai pas trouvé solution.

Merci d’avance.
1. Dgeo Dev
  28 Oct 2024 Répondre
  
  Hello, ca dépend vraiment du thème faudrait voir avec leur support si ils peuvent faire quelques choses sinon me contacter ici : https://comeup.com/fr/service/448077/ajouter-une-fonctionnalite-personnalisee-a-votre-boutique-shopify

Installons le variantes au clic sur les images du produit

Besoin d'aide ?

🤗 Vous souhaitez me remercier pour mes Tutos ?

Besoin de déléguer votre SAV ?

🤗 Vous souhaitez me remercier pour mes Tutos ?

Cet article a 32 commentaires

Max

dgeo22

guicherd

Dgeo Dev

guicherd

guicherd

guicherd

karim

Dgeo Dev

gems

Bixente

Bixente

Henry Bel

Dgeo Dev

jobbi

Dgeo Dev

Vincent V

Dgeo Dev

Vincent Vesga

Mercier

Dgeo Dev

John

Dgeo Dev

Cedric Cousin

Dgeo Dev

SANCHES

Dgeo Dev

Emmanuel

Emmanuel

Dgeo Dev

Eboss

Dgeo Dev

Laisser un commentaire Annuler la réponse

Installons le variantes au clic sur les images du produit

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 Effet de Survol d’un Menu sur Shopify

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

Comment Ajouter un Disclaimer Facebook sur Shopify

Cet article a 32 commentaires

Max

dgeo22

guicherd

Dgeo Dev

guicherd

guicherd

guicherd

karim

Dgeo Dev

gems

Bixente

Bixente

Henry Bel

Dgeo Dev

jobbi

Dgeo Dev

Vincent V

Dgeo Dev

Vincent Vesga

Mercier

Dgeo Dev

John

Dgeo Dev

Cedric Cousin

Dgeo Dev

SANCHES

Dgeo Dev

Emmanuel

Emmanuel

Dgeo Dev

Eboss

Dgeo Dev

Laisser un commentaire Annuler la réponse

Panier