Comment faire un Carrousel d’Extra infos sur Shopify

Nous allons voir dans ce tutoriel comment créer une petite barre d’informations en mode carrousel. Ce slider va vous permettre d’afficher des informations importants d’une manière dynamique afin d’attirer l’attention de vos clients.

Comment mettre le système en place ?

Javascript

Rendez-vous dans Boutique en ligne – Actions – Modifier le code – Ouvrez le dossier Ressources (Assets) et essayez de trouver votre fichier javascript ! Généralement appelé theme.js, global.js, app.js ou base.js (il peut y avoir des extensions de type .js.liquid).

Mettez-vous tout en bas du fichier et copiez/collez le code suivant:


if ((typeof window.DG) == 'undefined') {
  window.DG = {};
}

DG.SliderExtraInfos = params => {
  const splideOptions = {
    type: "loop",
    interval: 6000,
    speed: 600,
    perPage: params.desktopSlidesVisibles,
    perMove: 1,   
    autoplay: params.autoplay,
    pagination: false,
    height: 20,     
    heightRatio: 1,
    breakpoints: {
      750: {
        perPage: params.mobileSlidesVisibles,
        arrows: true          
      }
    }
  };

  const splides = document.querySelectorAll('.splide');
  splides.forEach((elem) =>{ 
    let splide = new Splide( elem, splideOptions);
    splide.mount();
  })  
}

CSS

Ensuite en restant dans le même dossier vous devriez avoir un .css ou .scss ou .css.liquid ou .scss.liquid – comme tout à l’heure il faudra trouver le bon, souvent theme, style, app, base etc…

Pareil tout en bas et copiez/collez le code ci-dessous:

.slider-extra-infos {
  text-align:center;
  background:#EEE;
  padding:10px 0;
}
.slider-extra-infos .splide__slide {

  display:flex;
  justify-content:center;
  align-items:center;
  flex:1;
}

.slider-extra-infos .splide__arrow {
  background:inherit;
  width:1.2em;
}

@media screen and (min-width: 750px) {
  .slider-extra-infos .splide__slide {
    text-transform:uppercase;
    border-right:1px solid #CCC;
  }
  .slider-extra-infos .is-visible:nth-of-type(3n){
    border:none;
  }

  .slider-extra-infos  .splide__arrows {
    // display:none;
  }  
}

HTML

Une fois le système en place il va falloir l’afficher et l’administrer. Pour ce faire vous allez devoir créer une section au niveau votre thème sur la page d’accueil et si votre thème le propose également sur tous les types de contenus ! ps: Speedfly le proposera à partir de Janvier 2022 😉

Créez donc une section de type contenu HTML ou code personnalisé et copiez/collez le code suivant:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@2.3.1/dist/css/splide.min.css">
    <script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@2.3.1/dist/js/splide.min.js" defer></script>
    <div class="slider-extra-infos splide">
      <div class="splide__track">
        <ul class="splide__list">
          <li class="splide__slide">Livraison OFFERTE</li>
          <li class="splide__slide">+10000 clients ravis</li>
          <li class="splide__slide">Paiement 100% sécurisé</li>
          <li class="splide__slide">Support très réactif</li>
          <li class="splide__slide">Fabriqué en france</li>
          <li class="splide__slide">Suivi de vos commandes</li>
        </ul>
      </div>
    </div>  
    <script defer>
      document.addEventListener( 'DOMContentLoaded', () => {
        const sliderExtraInfosParams = {
          desktopSlidesVisibles: 3,
          mobileSlidesVisibles: 1,
          autoplay: 'playing'
        }
        DG.SliderExtraInfos(sliderExtraInfosParams);
      });
    </script>

Vous n’avez pas de section HTML ?

Mettez le directement dans Layout (Mise en page) – theme.liquid – Juste en avant l’appel du header – généralement après l’ouverture de la balise <body …> ici…

Explication du système

L’exemple donné propose 6 éléments, il vous suffit de modifier directement le texte à votre convenance. Si vous en souhaitez moins ou plus, supprimez les lignes <li …>…</li> ou dupliquez-en 😉

Côté options

J’en propose 3:

desktopSlidesVisibles: 3, = Nombre d’éléments visibles par slide sur grand écran
mobileSlidesVisibles: 1, = Nombre d’éléments visibles par slide sur mobile
autoplay: ‘playing’ = Si l’autoplay est actif ou non

Envie de plus d’options . dans ce cas il faudra bidouiller dans le fichier .js mais attention à ne rien casser : au besoin la documentation du slider est disponible ici: https://splidejs.com/guides/options/

Envie modifier le design ?

Je vous invite à attendre la vidéo qui vous montrera comment faire !

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

  1. Jean Claude

    4 Oct 2022 Répondre

    Salut, depuis que je suis vos tutos ma boutique devient de plus en plus belle.
    Merci beaucoup. Plein de succès à vous !

    1. Dgeo Dev

      5 Oct 2022 Répondre

      Hello, ravi de l’apprendre et merci bcp pour le commentaire 🙂

  2. samuel

    5 Avr 2023 Répondre

    salut, J’ai du mal a trouver les bonnes sections… Allez vous faire une vidéo pour ce tuto?

    1. Dgeo Dev

      7 Avr 2023 Répondre

      Hello, navré que vous ayez du mal – oui la reprise des vidéos est prévue courant mai

  3. Matteo

    2 Mai 2023 Répondre

    Bonjour, comment je pourrai changer la couleur de la barre svp

  4. Rivelt

    23 Juin 2023 Répondre

    Merci pour tout, le vidéo c’est pour quand. Vous m’avez beaucoup aider dans un laps de temps.

    1. Dgeo Dev

      26 Juin 2023 Répondre

      Hello et merci pour le commentaire 🙂 la reprise des vidéos se fera mi septembre 🙂

  5. héloise

    13 Août 2023 Répondre

    Bonjour , Allez vous faire une video sur ce tuto ? il a l’air bien mais j’ai du mal 🙁 . Merci pour tous vos tutos qui sont d’une grande aide 🙂

  6. Philippe

    11 Sep 2023 Répondre

    Merci du tuto.
    Comment faire pour mettre ce carrousel à la place du bandeau du header svp ?
    Merci d’avance

    1. Dgeo Dev

      18 Sep 2023 Répondre

      Hello, ca dépend du thème mais généralement on peut désactiver cette zone dans les options du header et ensuite mettre mon code dans le header.liquid ou fichier assimilé

Laisser un commentaire

Fermer le menu
×
×

Panier