Comment créer une Timeline sur Shopify

Afin de personnaliser votre boutique shopify et apporter une social proof je vous propose de créer une timeline ! Une timeline c’est quoi ? c’est une sorte de dates chronologiques des éléments manquants de votre société.

Création de la page et du contenu

Créez une page sur Shopify et passez en mode code en cliquant sur le bouton en haut à droite de l’éditeur un truc du genre : <>

Copiez/collez le code suivant et adaptez les dates et les textes :


<div class="timeline">  
  <div class="tm-container tm-left">
    <div class="tm-content">
      <h2>2022</h2>
      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dignissimos deleniti porro facilis praesentium illum, enim voluptates exercitationem amet iure molestiae quia harum deserunt perspiciatis sapiente omnis labore rem cum optio!</p>
    </div>
  </div>
  <div class="tm-container tm-right">
    <div class="tm-content">
      <h2>2021</h2>
      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dignissimos deleniti porro facilis praesentium illum, enim voluptates exercitationem amet iure molestiae quia harum deserunt perspiciatis sapiente omnis labore rem cum optio!</p>
    </div>
  </div>
  <div class="tm-container tm-left">
    <div class="tm-content">
      <h2>2020</h2>
      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dignissimos deleniti porro facilis praesentium illum, enim voluptates exercitationem amet iure molestiae quia harum deserunt perspiciatis sapiente omnis labore rem cum optio!</p>
    </div>
  </div>
  <div class="tm-container tm-right">
    <div class="tm-content">
      <h2>2019</h2>
      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dignissimos deleniti porro facilis praesentium illum, enim voluptates exercitationem amet iure molestiae quia harum deserunt perspiciatis sapiente omnis labore rem cum optio!</p>
    </div>
  </div>
</div>

Si vous souhaitez rajouter des zones il suffira de dupliquer les :

<div class="tm-container tm-right">
    <div class="tm-content">
      <h2>2021</h2>
      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dignissimos deleniti porro facilis praesentium illum, enim voluptates exercitationem amet iure molestiae quia harum deserunt perspiciatis sapiente omnis labore rem cum optio!</p>
    </div>
  </div>

et des modifier les informations.

Info SEO : les dates sont en h2 car sur shopify le titre d’une page est un h1.

Mise en forme en timeline

Rendez-vous dans Boutique en ligne -> Actions -> Modifier le code et rendez-vous dans le dossier « Ressources » (Assets) et trouvez votre fichier .css ou .css.liquid. Généralement theme, style, base !

Mettez-vous tout en bas et collez le code suivant :

Adapter le design

Je vous invite à visionner la version vidéo qui arrivera bientôt 🙂


.timeline {
  --timeline-bg: #EEE;
  --timeline-circle: #CCC; /* #FF9F55; */
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}

.timeline::after {
  content: '';
  position: absolute;
  width: 6px;
  background-color: var(--timeline-circle);
  top: 0;
  bottom: 0;
  left: 50%;
  
}

.tm-container {
  padding: 10px 40px;
  position: relative;
  width: 50%;
}

.tm-container::after {
  content: '';
  position: absolute;
  width: 25px;
  height: 25px;
  right: -15px;
  background-color: #FFF;;
  border: 4px solid var(--timeline-circle);
  top: 15px;
  border-radius: 50%;
  z-index: 1;
} 

.tm-content {
  background:var(--timeline-bg);
}

.tm-left {
  left: 0;
}

.tm-right {
  left: 50%;
}

.tm-left::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  right: 30px;
  border: medium solid var(--timeline-bg);
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent var(--timeline-bg);
}

.tm-right::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  left: 30px;
  border: medium solid var(--timeline-bg);
  border-width: 10px 10px 10px 0;
  border-color: transparent var(--timeline-bg) transparent transparent;
}

.tm-right::after {
  left: -10px;
}

.tm-content {
  padding: 20px 30px;
  background-color: var(--timeline-bg);
  position: relative;
  border-radius: 6px;
}

@media screen and (max-width: 749px) {

  .timeline::after {
    left: 31px;
   
  }

  .tm-container {
    width: 100%;
    padding-left: 70px;
    padding-right: 25px;
  }

  .tm-container::before {
    left: 60px;
    border: medium solid var(--timeline-bg);;
    border-width: 10px 10px 10px 0;
    border-color: transparent var(--timeline-bg); transparent transparent;
  }

  .tm-left::after, .tm-right::after {
    left: 21px;
  }

  .tm-right {
    left: 0%;
  }
  
}

Merci de me laisser une petite note 😉

[Note moyenne de: 5 sur 3 votes]

Cet article a 4 commentaires

Jean Claude
8 Déc 2022 Répondre

Super !
Shirley
30 Mai 2023 Répondre

Coucou 🙂

curieuse de savoir ce qu’est un Timeline svp 🙂
1. Dgeo Dev
  1 Juin 2023 Répondre
  
  Hello, c’est tout simplement une suite d’évenements, un historique de dates clés 🙂
  1. Shirley
    3 Juin 2023 Répondre
    
    Merci 🙂