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 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 cotenu 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>

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: 0 sur 0 votes]

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

Laisser un commentaire

Fermer le menu

Envie d'apprendre à Coder et Maitriser ton Thème 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