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

Laisser un commentaire

Fermer le menu

OFFRE SPÉCIALE -50% SUR LA FORMATION ECOMFLY

1 Bootcamp en vidéo sur le ECOM + 1 Formation Création de Boutique Brandée + 1 Formation SEO sur Shopify