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">
    <img src="{{ section.settings.image1 | img_url: width }}" alt="" />
    {% if section.settings.slider1_call_to_action %}
    <a href="{{ section.settings.slider1_call_to_action }}">{{ section.settings.slider1_call_to_action_text }}</a>
    {% endif %}
    </div>
  </div>
  {% endif %}
  {% if section.settings.image2 %}
  <div class="dg-slide"><div class="dg-slide-inner">
    <img src="{{ section.settings.image2 | img_url: width }}" alt="" />
    {% if section.settings.slider2_call_to_action %}
    <a href="{{ section.settings.slider2_call_to_action }}">{{ section.settings.slider2_call_to_action_text }}</a>
    {% endif %}
    </div>
  </div>
  {% endif %}
  {% if section.settings.image3 %}
  <div class="dg-slide"><div class="dg-slide-inner">
    <img src="{{ section.settings.image3 | img_url: width }}" alt="" />
    {% if section.settings.slider3_call_to_action %}
    <a href="{{ section.settings.slider3_call_to_action }}">{{ section.settings.slider3_call_to_action_text }}</a>
    {% endif %}
    </div>
  </div>
  {% endif %}
  {% if section.settings.image4 %}
  <div class="dg-slide"><div class="dg-slide-inner">
    <img src="{{ section.settings.image4 | img_url: width }}" alt="" />
    {% if section.settings.slider4_call_to_action %}
    <a href="{{ section.settings.slider4_call_to_action }}">{{ section.settings.slider4_call_to_action_text }}</a>
    {% endif %}
    </div>
  </div>
  {% endif %}
  {% if section.settings.image5 %}
  <div class="dg-slide"><div class="dg-slide-inner">
    <img src="{{ section.settings.image5 | img_url: width }}" alt="" />
    {% if section.settings.slider5_call_to_action %}
    <a href="{{ section.settings.slider5_call_to_action }}">{{ section.settings.slider5_call_to_action_text }}</a>
    {% endif %}
    </div>
  </div>
  {% endif %}
  {% if section.settings.image6 %}
  <div class="dg-slide"><div class="dg-slide-inner">
    <img src="{{ section.settings.image6 | img_url: width }}" alt="" />
    {% if section.settings.slider6_call_to_action %}
    <a href="{{ section.settings.slider6_call_to_action }}">{{ section.settings.slider6_call_to_action_text }}</a>
    {% endif %}
    </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="" />
    {% if section.settings.slider7_call_to_action %}
    <a href="{{ section.settings.slider7_call_to_action }}">{{ section.settings.slider7_call_to_action_text }}</a>
    {% endif %}
    </div>
  </div>
  {% endif %}
  {% if section.settings.image8 %}
  <div class="dg-slide">
    <div class="dg-slide-inner"><img src="{{ section.settings.image8 | img_url: width }}" alt="" />
      {% if section.settings.slider8_call_to_action %}
    <a href="{{ section.settings.slider8_call_to_action }}">{{ section.settings.slider8_call_to_action_text }}</a>
    {% endif %}
    </div>
  </div>
  {% endif %}
  {% if section.settings.image9 %}
  <div class="dg-slide"><div class="dg-slide-inner">
    <img src="{{ section.settings.image9 | img_url: width }}" alt="" />
    {% if section.settings.slider9_call_to_action %}
    <a href="{{ section.settings.slider9_call_to_action }}">{{ section.settings.slider9_call_to_action_text }}</a>
    {% endif %}
    </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 .slick-prev:after, .dg-slider .slick-next:after { display:none; }
  .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 { 
    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.

La vidéo arrive bientôt…

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

Cet article a 6 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 🙂

Laisser un commentaire

Fermer le menu

meilleure chaine youtube dropshipping shopify

Envie de tout savoir sur le Dropshipping & Shopify  ?

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

S'abonner à la chaine