FROM CACHE - fr_header

Theme Debut - Mise en place d'un slider d'aperçu sous l'image de la page produit

NicolasF
Nouveau membre
11 0 0

Bonjour, 

 

j'ai dans mes produits beaucoup de variations possibles, du fait d'un choix de 2 variables de coloris possible.

J'ai donc beaucoup de vignettes sous l'image du produit. (27) 

Ce que je voudrais, c'est limiter la hauteur à 1 seul vignette sur cette section, et la possibilité de faire défiler de gauche à droite les vignettes des déclinaisons du produit, via des flèches par exemple. 

 

Merci d'avance

5 RÉPONSES 5

NicolasF
Nouveau membre
11 0 0

Pour clarifier un peu ma demande, j'aimerais que cette div class ne s'affiche que sur 1 seule hauteur, et qu'il y ait des flèches pour aller de gauche à droite.

<div class="product-single__thumbnails-slider-track" data-slider-track="">

 

Passer de ça :

Capture d’écran 2020-11-12 à 14.57.40.png

 

A ça :

 

Capture d’écran 2020-11-12 à 14.57.40 copie.png

Rajameltine
Explorateur
59 4 3

Bonjour, pour le carousel des images tu peux utiliser la librairie Slick carousel.

Need fastly help, contact me : https://freelancerajameltine.000webhostapp.com/
Besoin d'aide rapidement, faites appel à moi : https://freelancerajameltine.000webhostapp.com/
Email: rajameltine@gmail.com
NicolasF
Nouveau membre
11 0 0

Bonjour Rajameltine,

 

en fait, le slider existe déjà dans le code. Il s'affiche pour les petits écrans, dès que la div thumbnails-wrapper slider-active dans laquelle il est devient trop petite.

 

J'aimerai faire en sorte que ce soit toujours le cas, mais je n'arrive pas à savoir si c'est dans le css du thème, dans une section liquid, ou si c'est ailleurs.

Rajameltine
Explorateur
59 4 3

Je ne vois pas d'autres solutions que de créer le slide directement en JavaScript avec la librairie Slick carousel. Si c'est pour chercher le code JS soit regarder sur le forum peut-être quelqu'un a déjà répondu à la question sinon c'est assez fastidieux de trouver le code lier à cette page dans le fichier normalement theme.js.liquid.

Comme il s'agit de configurer directement dans le code, je vous conseille de communiquer avec un Expert Shopify, pour personnaliser votre thème avec cette fonction, si le thème lui-même n’offre pas cette fonction.

Need fastly help, contact me : https://freelancerajameltine.000webhostapp.com/
Besoin d'aide rapidement, faites appel à moi : https://freelancerajameltine.000webhostapp.com/
Email: rajameltine@gmail.com
NicolasF
Nouveau membre
11 0 0

En fait, la solution existe déjà en natif depuis la mise à jour du thème, donc il n'y a rien à reprogrammer ou à modifier, il faut juste forcer un éventement conditionnel à la largeur pour qu'il soit permanent (faire en sorte que la section se comporte comme si l'écran était peu large, type smartphone). Pour moi, ce serait 100 fois plus simple, et déjà adapté puisque le reste est déjà paramétré pour que ça fonctionne avec le système de shopify.

 

C'est là où je trouve que Shopify est assez limité, c'est qu'il y a trop peu d'options pour les modules natifs.