Comment créer un carrousel d’images sur Shopify

Nous allons voir dans ce tutoriel comment créer un carrousel d’image sur Shopify. Couramment appelé Slider ou Slideshow ce type de fonctionnalité est idéal pour mettre en avant vos visuels et participer au branding de votre boutique. En effet ce type de slider permet de mettre en avant des éléments avec des animations pour attirer l’attention de l’internaute. De plus un site sans carrousel d’images est très fade et les gens ont pris pour habitude d’en voir sur la majorité des sites internet ! alors autant en mettre pour ne pas les contrarier hein 😀

Ai-je besoin d’un slider ?

Hey Dgeo ! tous les thèmes ont déjà un slideshow alors pourquoi en proposer un dans ce tuto ? En fait c’est assez simple 😉  la plupart des sliders des thèmes sont limités et vous n’allez pas pouvoir faire tout ce que vous avez envie comme par exemple:

  • Changer le temps d’affichage des images,
  • Afficher plusieurs images pour chaque slide,
  • Mettre des petits points de navigation en bas etc…

Bref entrons dans le vif du sujet 😉

Comment installer ce carrousel d’images sur Shopify ?

Cette fois ci nous n’allons pas parler de theme.js, theme.scss et ce genre de fichier car nous allons aller beaucoup plus loin et carrément créer une section dans votre thème Shopify.

Rendez-vous dans Boutique en ligne -> Actions – Modifier le code. A ce stade trouvez le dossier Sections et cliquez sur « Ajouter un nouveau Section » (oui je sais Shopify à du mal avec le féminin 😅)… et nommez-le dg-slider et cliquez sur « Créer une section » (tiens ils ont réussi à  gérer le féminin la…).

Bref il ne vous reste plus qu’à remplacer le contenu du fichier par le code fournit ci-dessous:

<div class="dg-slider" id="dg-slider-{{ section.id }}">
  {% assign width = section.settings.image_width %}
  {% if section.settings.image1 %}
  <div class="dg-slide"><div class="dg-slide-inner">
    <a href="{{ section.settings.slider1_call_to_action }}">
      <img src="{{ section.settings.image1 | img_url: width }}" alt="" loading="lazy" />
      {% if section.settings.slider1_call_to_action %}
      <span>{{ section.settings.slider1_call_to_action_text }}</span>
      {% endif %}
    </a>
    </div>
  </div>
  {% endif %}
  {% if section.settings.image2 %}
  <div class="dg-slide"><div class="dg-slide-inner">
    <a href="{{ section.settings.slider2_call_to_action }}">
      <img src="{{ section.settings.image2 | img_url: width }}" alt="" loading="lazy" />
      {% if section.settings.slider2_call_to_action %}
      <span>{{ section.settings.slider2_call_to_action_text }}</span>
      {% endif %}
    </a>
    </div>
  </div>
  {% endif %}
  {% if section.settings.image3 %}
  <div class="dg-slide"><div class="dg-slide-inner">
    <a href="{{ section.settings.slider3_call_to_action }}">
      <img src="{{ section.settings.image3 | img_url: width }}" alt="" loading="lazy" />
      {% if section.settings.slider3_call_to_action %}
      <span>{{ section.settings.slider3_call_to_action_text }}</span>
      {% endif %}
    </a>
    </div>
  </div>
  {% endif %}
  {% if section.settings.image4 %}
  <div class="dg-slide"><div class="dg-slide-inner">
    <a href="{{ section.settings.slider4_call_to_action }}">
      <img src="{{ section.settings.image4 | img_url: width }}" alt="" loading="lazy" />
      {% if section.settings.slider4_call_to_action %}
      <span>{{ section.settings.slider4_call_to_action_text }}</span>
      {% endif %}
    </a>
    </div>
  </div>
  {% endif %}
  {% if section.settings.image5 %}
  <div class="dg-slide"><div class="dg-slide-inner">
    <a href="{{ section.settings.slider5_call_to_action }}">
      <img src="{{ section.settings.image5 | img_url: width }}" alt="" loading="lazy" />
      {% if section.settings.slider5_call_to_action %}
      <span>{{ section.settings.slider5_call_to_action_text }}</span>
      {% endif %}
    </a>
    </div>
  </div>
  {% endif %}
  {% if section.settings.image6 %}
  <div class="dg-slide"><div class="dg-slide-inner">
    <a href="{{ section.settings.slider6_call_to_action }}">
      <img src="{{ section.settings.image6 | img_url: width }}" alt="" loading="lazy" />
      {% if section.settings.slider6_call_to_action %}
      <span>{{ section.settings.slider6_call_to_action_text }}</span>
      {% endif %}
    </a>
    </div>
  </div>
  {% endif %}
  {% if section.settings.image7 %}
  <div class="dg-slide"><div class="dg-slide-inner">
    <img src="{{ section.settings.image7 | img_url: width }}" alt="" loading="lazy" />
    <a href="{{ section.settings.slider7_call_to_action }}">
      {% if section.settings.slider7_call_to_action %}
      <span>{{ section.settings.slider7_call_to_action_text }}</span>
      {% endif %}
    </a>
    </div>
  </div>
  {% endif %}
  {% if section.settings.image8 %}
  <div class="dg-slide">
    <div class="dg-slide-inner">
      <a href="{{ section.settings.slider8_call_to_action }}">
        <img src="{{ section.settings.image8 | img_url: width }}" alt="" loading="lazy" />
        {% if section.settings.slider8_call_to_action %}
        <span>{{ section.settings.slider8_call_to_action_text }}</span>
        {% endif %}
      </a>
    </div>
  </div>
  {% endif %}
  {% if section.settings.image9 %}
  <div class="dg-slide"><div class="dg-slide-inner">
    <a href="{{ section.settings.slider9_call_to_action }}">
      <img src="{{ section.settings.image9 | img_url: width }}" alt="" loading="lazy" />
      {% if section.settings.slider9_call_to_action %}
      <span>{{ section.settings.slider9_call_to_action_text }}</span>
      {% endif %}
    </a>
    </div>
  </div>
  {% endif %}   
</div>

{% schema %}
{
  "name": "DG slider",
  "class": "index-section section-dg-slider",	
  "settings": [
	{
      "type": "text",
      "id": "image_width",
      "label": "Taille max de l'image",
	  "default": "1900x"
    },
	{
      "type": "image_picker",
      "id": "image1",
      "label": "Image"
    },
	{
  	  "id": "slider1_call_to_action",
  	  "type": "url",
  	  "label": "Lien (optionnel)"
	},
	{
  	  "id": "slider1_call_to_action_text",
  	  "type": "text",
  	  "label": "Texte (optionnel)"
	},
	{
      "type": "image_picker",
      "id": "image2",
      "label": "Image"
    },
	{
  	  "id": "slider2_call_to_action",
  	  "type": "url",
  	  "label": "Lien (optionnel)"
	},
	{
  	  "id": "slider2_call_to_action_text",
  	  "type": "text",
  	  "label": "Texte (optionnel)"
	},
	{
      "type": "image_picker",
      "id": "image3",
      "label": "Image"
    },
	{
  	  "id": "slider3_call_to_action",
  	  "type": "url",
  	  "label": "Lien (optionnel)"
	},
	{
  	  "id": "slider3_call_to_action_text",
  	  "type": "text",
  	  "label": "Texte (optionnel)"
	},
	{

      "type": "image_picker",
      "id": "image4",
      "label": "Image"
    },
	{
  	  "id": "slider4_call_to_action",
  	  "type": "url",
  	  "label": "Lien (optionnel)"
	},
	{
  	  "id": "slider4_call_to_action_text",
  	  "type": "text",
  	  "label": "Texte (optionnel)"
	},

	{
      "type": "image_picker",
      "id": "image5",
      "label": "Image"
    },
	{
  	  "id": "slider5_call_to_action",
  	  "type": "url",
  	  "label": "Lien (optionnel)"
	},
	{
  	  "id": "slider5_call_to_action_text",
  	  "type": "text",
  	  "label": "Texte (optionnel)"
	},
	{
      "type": "image_picker",
      "id": "image6",
      "label": "Image"
    },
	{
  	  "id": "slider6_call_to_action",
  	  "type": "url",
  	  "label": "Lien (optionnel)"
	},
	{
  	  "id": "slider6_call_to_action_text",
  	  "type": "text",
  	  "label": "Texte (optionnel)"
	},
	{
      "type": "image_picker",
      "id": "image7",
      "label": "Image"
    },
	{
  	  "id": "slider7_call_to_action",
  	  "type": "url",
  	  "label": "Lien (optionnel)"
	},
	{
  	  "id": "slider7_call_to_action_text",
  	  "type": "text",
  	  "label": "Texte (optionnel)"
	},
	{
      "type": "image_picker",
      "id": "image8",
      "label": "Image"
    },
	{
  	  "id": "slider8_call_to_action",
  	  "type": "url",
  	  "label": "Lien (optionnel)"
	},
	{
  	  "id": "slider8_call_to_action_text",
  	  "type": "text",
  	  "label": "Texte (optionnel)"
	},
	{
      "type": "image_picker",
      "id": "image9",
      "label": "Image"
    },
	{
  	  "id": "slider9_call_to_action",
  	  "type": "url",
  	  "label": "Lien (optionnel)"
	},
	{
  	  "id": "slider9_call_to_action_text",
  	  "type": "text",
  	  "label": "Texte (optionnel)"
	}
  ],
  "presets": [
    {
      "name": "Carrousel d'images",
      "category": "Dgeo dev - Tutoriels"      
    }
  ]
}
{% endschema %}

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" integrity="sha256-UK1EiopXIL+KVhfbFa8xrmAWPeBjMVdvYMYkTAEv/HI=" crossorigin="anonymous" />
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css" integrity="sha256-4hqlsNP9KM6+2eA8VUT0kk4RsMRTeS7QGHIM+MZ5sLY=" crossorigin="anonymous" />
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<script>
  
  let nombresImagesPc{{ section.id }} = 6;
  let nombresImagesTablet{{ section.id }} = 3;
  let nombresImagesMobile{{ section.id }} = 2;

  $('#dg-slider-{{ section.id }}').slick({      
    autoplay: true,
    autoplaySpeed: 4000,   
    arrows : true,
    dots: false,        
    slidesToShow: nombresImagesPc{{ section.id }},
    slidesToScroll: nombresImagesPc{{ section.id }}, 
    responsive: [
      {
        breakpoint: 900,
        settings: {
          slidesToShow: nombresImagesTablet{{ section.id }},
          slidesToScroll: nombresImagesTablet{{ section.id }}
        }
      },
      {
        breakpoint: 480,
        settings: {
          slidesToShow: nombresImagesMobile{{ section.id }},
          slidesToScroll: nombresImagesMobile{{ section.id }}
        }
      }
    ]    
  });

</script>
<style>
  .dg-slider img { width:100%; }
  .dg-slider .slick-prev, .dg-slider .slick-next { 
    z-index:1000;
    width:35px;
    height:35px;
  }
  .dg-slider .slick-prev {
    left:15px;
  }   
  .dg-slider .slick-next {
    right:15px;  
  }
  .dg-slider .slick-prev:before, .dg-slider .slick-next:before {
    font-size:35px;
  }
  .dg-slide { 
    text-align:center;    
  }
  .slick-dots { bottom:-30px; }
  .slick-dots li button:before { font-size:16px; }
  
  .dg-slide-inner {    
    margin:10px;
    // padding:10px;
    // background:#EEE;
    box-shadow:0 0 5px rgba(000,000,000,0.3);
  }
  .dg-slide-inner a span { 
    text-decoration:none;
    padding:15px;    
    font-weight:bold;
    font-size:17px;
    margin:10px auto;
    display:inline-block;
    //background:#000;
    //color:#FFF;
  }
  .dg-slide-inner a:hover { 
    //color:#FFF;
  }
</style/>

Comment installer le code ?

Avant tout décortiquons un peu le code !

Dans un premier temps vous avez la partie avant le {% schema %} qui est tout simplement votre code HTML c’est à dire l’affichage du carrousel.

Ensuite la partie  {% schema %} qui est le paramétrage de votre section, c’est grâce à cette partie que vous allez pouvoir administrer votre slider dans la personnalisation de votre page d’accueil.

Et pour finir la partie SCRIPT qui nous permettra de modifier le fonctionnement sans oublier la partie CSS que vous connaissez pour mettre en forme et styliser un peu tout ça.

Comment mettre en place le slider ?

Maintenant que notre section est crée il va falloir l’afficher sur la page d’accueil. Pour ce faire rien de plus simple car c’est le fonctionnement normal de shopify. Rendez-vous dans Boutique en ligne – Personnaliser – Vous êtes normalement  sur l’onglet  Sections ! descendez tout en bas et cliquez sur « Ajouter une section ». A ce stade vous allez voir apparaitre votre nouvelle section dg-slider 😉, activez-la et commencez à mettre vos images !

Disclaimer : Vos images doivent être de même format et ratio pour éviter les décalages disgracieux ! donc si vous voulez un slider de 1900px sur 450px vous devez mettre toutes vos images à cette taille !

Côté options

Ce tuto vous propose 9 images maximum et un champ taille maximale de l’image pour éviter les débordements. mais aussi le paramétrage standard que nous allons détailler:

  • slideToShow et slidesToScroll = le nombre d’image par slide à aficher,
  • autoPlay = défilement automatique des images,
  • autoPlaySpeed = la vitesse du slide,
  • arrows = si les flèches de défilement sont visibles,
  • dots = si les points de navigation son visibles,
  • infinite = si le défilement des images est infini et qu’il revient au début dés qu’il arrive à la fin.

Légende : true = vrai et false = faux – cela permet d’activer ou non certaines options.

Vous aller donc pouvoir tester des choses mais faites attention à ne pas casser le code !

Comment personnaliser le design ?

Lorsque vous allez commencer à vouloir modifier des options comme par exemple afficher plus d’une image par slide vous allez constater que les images seront toutes collées… Etant donné qu’il est difficile par écrit de vous expliquer tout cela je vous invite à regarder la version vidéo.

Ce tutoriel existe aussi en vidéo

Merci de me laisser une petite note 😉
[Note moyenne de: 5 sur 9 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.

En savoir plus

🤗 Vous souhaitez me remercier pour mes Tutos ?

Cliquez sur le bouton ci-dessous pour m'encourager à continuer 😉

Payer un Café à Dgeo Dev

Besoin de déléguer votre SAV ?

Si vous avez besoin d'une personne pour gérer votre SAV j'ai la perle rare 😉 contactez moi en MP ou cliquez sur le bouton ci-dessous:

Je veux déléguer mon SAV

🤗 Vous souhaitez me remercier pour mes Tutos ?

Cliquez sur le bouton ci-dessous pour m'encourager à continuer 😉

Payer un Café à Dgeo Dev

Cet article a 59 commentaires

  1. Fabien

    13 Juil 2020 Répondre

    merci dgeo,
    super tuto 😉

  2. Yann

    14 Juil 2020 Répondre

    merci et bonne fête d’indépendance

  3. Max Harder'Z

    17 Juil 2020 Répondre

    Super efficace pour faire un slider de produits, même si tu m’avais dit que c’était pas trop utile sur speedfly. Il a fallu que je le fasse quand même ^^

    1. Dgeo Dev

      17 Juil 2020 Répondre

      Héhé j’en m’en doutais :p accro un jour accro tjs 😉

  4. Joel

    27 Juil 2020 Répondre

    Salut Dgeo, toujours aussi bien, par contre vue que nos clients sont assez faignants lol , Comment peut-on faire pour que l’image soit cliquable pour basculer directement sur le lien ? Merci à toi

    1. Dgeo Dev

      29 Juil 2020 Répondre

      Hello et merci 🙂 oui c’est une bonne idée souvent demandée, je vais surement faire une v2 de ce tuto 🙂

  5. Michaël

    25 Août 2020 Répondre

    bonjour Dgeo,
    J’aimerai aussi avoir la possibilité de cliquer uniquement sur l’image afin qu’elle amène directement sur le lien, pas de bouton.
    Est ce qu’il serait possible de modifier la taille et la couleur des flèches de défilement des images ?
    Merci à vous pour votre tuto il est vraiment intéressant et bien expliqué, bravo !

    1. Dgeo Dev

      26 Août 2020 Répondre

      Hello et merci pour le message, c’est effectivement demandé et prévu dans une prochaine mise à jour du tuto 🙂

  6. Laurent

    28 Août 2020 Répondre

    Bonjour, tout d’abord merci pour ce que tu partage avec nous ça m’a beaucoup aidé, j’aurais juste une question à propos de ce code j’ai réussi à faire les modifications que je souhaitais mais mes images sont flous… j’ai essayé plusieurs format( pnj, jpg; svg ( pas pris en compte avec les images dommage )), des tailles différentes mais rien à faire.

    J’ai affiché 6 images, par ce que si je met moins images, elles sont plus grandes donc elles sont totalement flous. Quand je télécharge l’image pour voir sa taille et sa résolution elle ne mesure que 100px alors que initialement elle fait 800px, je voudrais savoir si il est possible d’afficher l’image avec une meilleure résolution pour que ce soit moins dégradé.

    Merci encore bon courage pour tous tes projets à venir et je suis pressé de revoir tes vidéos début septembre

    1. Dgeo Dev

      29 Août 2020 Répondre

      Hello et merci pour le message 🙂 tu as peut être modifié la valeur « taille de l’image » ? elle doit rester avec un x à la fin du style 1900x 🙂

      1. Laurent

        29 Août 2020 Répondre

        Rebonjour, et encore un grand merci, je suis bête… j’avais absolument pas pensé à ça… ça a réglé le problème c’est parfait merci 🙂

        1. Dgeo Dev

          29 Août 2020 Répondre

          Cool 🙂 bonne journée

  7. Zoé

    20 Sep 2020 Répondre

    Bonjour,
    Super tuto, très clair !
    Néanmoins, je rencontre un petit souci (thème Flow) : mon slider n’apparaît pas comme un slider mais comme des images les unes après les autres en vertical.
    Avez-vous une idée du problème ?
    Merci d’avance ! 🙂

    1. Dgeo Dev

      20 Sep 2020 Répondre

      Hello, je ne connais pas ce theme mais il doit manquer jquery… va dans Layout – theme.liquid et avant le </head> met ceci : <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>

      1. Damien

        8 Jan 2021 Répondre

        Bonjour Dgeo Dev
        Merci beaucoup pour ce tuto!
        En revanche j’ai le même problème que Zoé:
        Les images n’apparaissent pas comme un slider mais se suivent les unes aprés les autres. J’ai ajouté le code jquery dans layout mais rien ne change. Mon thème est supply. Savez vous ce qu’il ne va pas?
        Merci d’avance 🙂

        1. Dgeo Dev

          11 Jan 2021 Répondre

          Bonjour, typiquement une erreur javascript, je vous invite à demander assistance au support de votre thème qui sera plus à même de corriger le soucis 🙂

  8. arji

    4 Oct 2020 Répondre

    merci pour le tuto. comment faire pour englober les images de produis dans le fiche produits dans un carrousel

    1. Dgeo Dev

      5 Oct 2020 Répondre

      Hello, il faut que le thème le prévoit nativement sinon trop complexe à coder 🙂

  9. Lina

    27 Nov 2020 Répondre

    Bonjour Dgeo, merci infiniment pour ce tuto qui m’a bien était utile, j’ai une question concernant le texte du slide, j’aimerais plutôt qu’il soit sur l’image plutôt que dessous avec un petit bouton pour permettre au clients de cliquer dessus comment puis je faire ça ? merci beaucoup

    1. Dgeo Dev

      27 Nov 2020 Répondre

      Hello et merci pour le message. C’est délicat sans l’intervention d’un développeur 🙂

    1. Elie Gambotti

      7 Déc 2020 Répondre

      Bonjour Dgeo, une fois de plus merci beaucoup je progresse beaucoup grâce à tout tes tutos super pédagogue

      Je souhaite savoir si il est possible de créer un slider juste pour TOUTES mes pages produit?

      Je souhaite mettre 4-5 photos par produit.

      Merci par avance.

  11. Mireille

    18 Jan 2021 Répondre

    Bonjour Dgeo et meilleurs vœux

    Merci pour ce tuto depuis le temps que je le chercher 😉 tres utile pour afficher les partenaires, et tres bon pour le seo

    1. Dgeo Dev

      18 Jan 2021 Répondre

      Bonjour et merci pour le commentaire 🙂 meilleurs vœux également !

  12. Mireille

    18 Jan 2021 Répondre

    J ai une autre question.

    Je voulais savoir, lorsque je fais la mise a jour de speedFly dois je réinstaller les codes ???

    1. Dgeo Dev

      18 Jan 2021 Répondre

      Tout dépend des l’emplacements des codes si c’est uniquement css et js alors speedfly possède des fichiers express pour ne pas perdre les modifications mais si c’est des codes html la ou faudra les reprendre… pour plus d’info vous pouvez nous contacter ici: sav@speed-ecom.eu 🙂

  13. Gilles

    15 Fév 2021 Répondre

    Merci infiniment pour ce tuto. Cependant ce carrousel d’image m’a donné l’idée d’un carrousel sous forme de reviews clients. Stp peux-tu ajouter une option nous permettre d’insérer un texte/commentaire client en dessous de l’image?
    Du genre:

    Image

    Magalie Vernon ⭐️⭐️⭐️⭐️ achat vérifié

    Depuis que j’utilise ce shampooing, mes cheveux ont gagné en volume……

    1. Dgeo Dev

      16 Fév 2021 Répondre

      Hello, au besoin c’est inclus dans speedfly 😉 mais je ferai peut être un tuto pour mettre des étoiles 😉

  14. Xavier-D76

    5 Mar 2021 Répondre

    Bonjour, merci pour ce tuto et cet outil très sympa :-), une petite question cependant, comment supprimer les marges générées automatiquement avant et après ce caroussel ? à priori on ne peut les modifier dans le code fourni ?

    1. Dgeo Dev

      6 Mar 2021 Répondre

      Hello et merci pour le commentaire 😉 les marges sont gérées nativement par le thème.

  15. SEPH

    2 Avr 2021 Répondre

    hello super tes tutos merci beaucoup ! est-ce que tu proposes aussi un TUTO pour faire un carrousel sur la page d’un produit lorsqu’il y a plusieurs images ? comme tu peux le voir sur mon site web sur le thème BOUNDLESS elles apparaissent à la fin de la page c’est hyper moche !! :/

    1. Dgeo Dev

      2 Avr 2021 Répondre

      Hello et merci pour le com 🙂 le mieux est de changer de thème qui possède ce type de carrousel comme Speedfly par exemple :p c’est trop complexe pour un simple tuto car les variantes doivent pouvoir interagir entre elles que ce soit en cliquant sur les variantes ou en cliquant sur les vignettes pour faire changer la variante. D’un point de vue technique c’est une des choses les plus complexe à coder sur un thème 🙂

  16. Chris

    11 Avr 2021 Répondre

    Bonjour,
    Merci pour ce super tuto.
    Est il possible de modifier l’encadré de la photo svp , la photo s’affiche correctement mais il y a un espace blanc en dessous de celui ci, comment peut on réduire cette partie svp, merci

    1. Dgeo Dev

      12 Avr 2021 Répondre

      Hello, il faut regarder dans les fichiers css du thème et supprimer cette marge native

  17. chris

    11 Avr 2021 Répondre

    Je viens de comprendre, c’est la zone de texte qui s’affiche en dessous, est il possible de la supprimer ?
    merci

    1. Dgeo Dev

      12 Avr 2021 Répondre

      Oui en supprimant le titre dans le code

  18. Youva

    2 Mai 2021 Répondre

    bonjr, comment faire pour ajouter un titre au dessus des image

    1. Dgeo Dev

      2 Mai 2021 Répondre

      Bonsoir, en mettant une section html de votre thème uniquement avec un titre 😉

  19. Andréa Buisset

    19 Mai 2021 Répondre

    Bonjour,

    J’ai mis en place ce carrousel sur notre thème (SpeedFly), malheureusement je n’ai pas de flèches affichées, ni de points, quand bien même la propriété « arrow » et « dots » étant sur « true ».
    Des idées ?

    1. Dgeo Dev

      19 Mai 2021 Répondre

      Hello, si vous avez speedfly il suffit de contacter notre support ici 😉 speedecom.freshdesk.com

  20. Hamza

    25 Mai 2021 Répondre

    bonjour est il possible d’enlever le cadre autour des images

    1. Dgeo Dev

      25 Mai 2021 Répondre

      Hello, il n’y pas pas de base de bordure ca doit être le thème qui les rajoutent. Faudrait demander à leur support du coup 😉

  21. Doria

    9 Juin 2021 Répondre

    Bonjour, est-il possible d’ajouter un carrousel d’image sur un article de blog ?

    Merci d’avance

    1. Dgeo Dev

      11 Juin 2021 Répondre

      Hello, alors c’est assez compliqué car le système de sections de shopify n’est nativement actif que sur la page d’accueil. Après c’est possible sur certains thèmes comme speedfly mais très peu d’autres. Impossible en tuto par contre car trop complexe.

  22. Mélissa

    15 Juin 2021 Répondre

    bonjour , est il possible de changer la dimension du slider pour ne pas qu’il prenne toute la page du site ?

    1. Dgeo Dev

      16 Juin 2021 Répondre

      Hello, tout dépend du thème mais vous pouvez certainement le mettre dans un conteneur du thème

  23. Gaby

    30 Juin 2021 Répondre

    Bonjour
    Mes images restent une dessus les autres en grand format et non en slider pouvez vous m’aider
    Merci

    1. Dgeo Dev

      30 Juin 2021 Répondre

      Hello, c’est un problème javascript, il doit manquer cette partie ou alors le thème n’est pas compatible.

  24. NEF

    4 Oct 2021 Répondre

    Bonjour, le carrousel ne fonctionne pas avec les nouveaux thème shopify, les images sont à la suite sur le site , vous auriez une solution? Cdt

    1. lakraa

      15 Oct 2021 Répondre

      j’ai le meme soucis mais moi je veux enlever la bordure au tour auriez vous une solution je suis preneur

      1. Dgeo Dev

        16 Oct 2021 Répondre

        Hello, oui il faut supprimer la ligne suivante : box-shadow:0 0 5px rgba(000,000,000,0.3);

        1. lakraa

          21 Oct 2021 Répondre

          je vous remercie de tout coeur

  25. vigeon

    2 Nov 2021 Répondre

    Bonjour,
    Pareil 🙁 les images se mettent les une derrière les autres, et non en carroussel … j’ai essayé d’autres thèmes sans succès, auriez vous une autre possibilité ? Quel thème avez vous choisi vous ? Merci

  26. Romain

    26 Nov 2021 Répondre

    Bonjour,

    J’ai voulu le mettre comme {% section ‘dg-slider’ %} dans le theme.liquid. Malheureusement cela ne fonctionne pas correctement puisque le script est mal lu. Les images s’affichent automatiquement en grands. Alors que j’ai bien indiqué dans le script que je voulais 6 images sur ordinateur par exemple. Sachant qu’en tant que section cela fonctionne parfaitement. Comment y remédier ? La seule solution que je vois est de copier coller le code et de l’inclure dans le footer mais je trouve ça dommage.

    1. Dgeo Dev

      26 Nov 2021 Répondre

      Bonjour, navré que cela ne fonctionne pas. La comme ca je ne saurai dire désolé… Faudrait voir avec le support du thème si ils peuvent rendre la compatibilité.

  27. Pia

    4 Jan 2022 Répondre

    Bonjour,

    Merci pour ce tuto super utile ! Je voudrais savoir si c’est possible d’ajouter plus d’images au carrousel pour qu’il y en ait 10 ou 12 par exemple et éventuellement comment faire

    1. Dgeo Dev

      6 Jan 2022 Répondre

      Hello, oui c’est possible il suffit de dupliquer les zones dans le json et le liquid donc image1 etc et de mettre image10 image11 etc.

  28. Mo

    30 Mar 2022 Répondre

    Bonjour Dgeo,
    Merci pour ce tuto. Pouvez-vous me dire si ce tuto convient pour le thème DAWN 2.0?

    Merci d’avance.

    1. Dgeo Dev

      3 Avr 2022 Répondre

      Hello, je ne pourrai l’affirmer mais il me semble oui 🙂 j’ai prévu de refaire des tutos pour les thèmes shopify nouvelle génération

Laisser un commentaire

Fermer le menu