DOCUMENTATION SHOPIWEB PREMIUM
  • 👋Bienvenue
  • Présentation
    • 🏆Shopiweb Premium
    • 💳Achat du thème
    • ✨Nos Fonctionnalités
  • Documentation
    • PARAMÈTRES DU THÈME
      • 🟢ÉCOSYSTÈME DU THÈME
      • 🟠CODE PERSONNALISÉ
      • 🟢COULEURS
      • 🟢STYLE
      • 🟢TYPOGRAPHIE
      • 🟠ANIMATIONS
      • 🟢RÉSEAUX SOCIAUX
      • 🟠APPLICATIONS
        • 🟢Titre onglet inactif
        • 🟠Compte à rebours panier
        • 🟠Objectif panier
        • 🟠Chat WhatsApp
        • 🟠Protection boutique
        • 🟠Cookies RGPD
      • 🟢PANIER
        • 🟠Panier coulissant
        • 🟢🏆 Protection Colis
        • 🟢Témoignage Panier
      • 🟢RECHERCHE
      • 🟢VARIANTES
        • 🟢Sélecteur de devise
      • 🟠PASSAGE À LA CAISSE
      • 🟠CSS PERSONNALISÉ
    • EN-TÊTE
      • 🟢En-tête (navigation)
        • 🟢🏆 Bouton
        • 🟢🏆 Micro menu
    • SECTIONS
      • 🟢Accordeon visuel
      • 🟢Scrolling images
      • 🟢🏆 Barre d'annonces
      • 🟢🏆 Stories animées
      • 🟢Diaporama
      • 🟢Texte/Logo défilant
      • 🟢Collection en vedette
      • 🟢Liste de collections
      • Récemment consultés
      • 🟢Texte enrichi
      • 🟢Texte défilant
      • 🟢Texte dynamique
      • 🟢Image parallaxe
      • 🟢Carte avec image
      • 🟠Cartes avec vidéo
      • 🟢🏆 TikTok galerie
      • 🟢🏆 Instagram galerie
      • 🟢Image avec texte
      • 🟢Vidéo avec texte
      • 🟢Image comparaison
      • 🟢🏆 Compteur élite
      • 🟢Compteurs animés
      • 🟢Produit en vedette
      • 🟢F.A.Q
      • 🟢🏆 HTML / Liquid
      • 🟢Vidéo interne
      • 🟢Vidéo externe
      • 🟢🏆 Newsletter Popup
      • 🟢Newsletter
      • 🟢Formulaire de contact
      • 🟢Articles de blog
      • 🟢Bordure personnalisée
      • 🟢Image
      • 🟢Multicolonne
      • 🟢Témoignages
      • 🟢Tableau comparatif
      • 🟢Flip Flap texte
      • 🟢Galerie de style
      • 🟢Chronologie
      • 🟢Collage dynamique
      • 🟢Média navigation
      • 🟢🏆 Vidéo Sticky
      • 🟢Tracking
      • 🟢Barre de réduction
      • 🟢Texte déroulant
      • 🟢Image texte explorateur
      • 🟢Ajouter un fil d’Ariane sans code sur Shopify
      • 🟢Comment créer un effet parallaxe sur une boutique shopify
      • 🟢Multi-images avec texte
      • 🟢🏆 Quiz
      • 🟠Image texte slider
      • 🟠Image pack produits
      • 🟢Image texte compteurs
      • 🟠Image texte image
    • PIED DE PAGE
      • 🟢Pied de page
    • METAFIELDS
      • 🟢🏆 Upsell Pop-up
      • 🟢🏆 Pack Produit Quantité
      • 🟢🏆 Offre Groupée
      • 🟢🏆 Évaluations ShopiTrust
      • 🟢🏆 Badges Personnalisés
      • 🟢Sous-titre de produit
      • 🟢Image Vendeur Produit
      • 🟢Texte rotatif
    • PAGE PRODUIT
      • Produit (modèle)
        • Distributeur
        • Titre
        • SKU
        • Blocs d'application
        • 🟢Évaluations (native)
        • 🟢🏆 Évaluations ShopiTrust
        • 🟢Sous-titre
        • Prix
        • 🟢Sélecteur de variante
        • 🟢Guide des tailles
        • Options d'achat
        • Boutons d'achat
        • Rangée réductible
        • Séparateur
        • 🟠Info livraison
        • Description produit
        • Texte enrichi
        • Texte défilant
        • Média
        • 🟢🏆Stories Animées
        • 🟢🏆 Trust badges
        • 🏆 Offre limitée
        • 🟠🏆 Estimation livraison
        • 🟠🏆 Live visiteurs
        • 🟠🏆 Barre d'inventaire
        • 🟠🏆 Icônes paiement
        • 🟢🏆 Packs Produits
        • 🟢🏆 Offre Groupée
        • 🟢🏆 Upsell Pop-up
        • 🏆 Précédent/Suivant
        • 🏆 Champ personnaliser
        • 🟢🏆 HTML / Liquid
        • 🟢🏆 Témoignages produit
        • 🟢🏆 Carte Cadeau
      • 🟢Applications Shopify
      • 🟢🏆 Sticky ATC
    • PAGE COLLECTION
      • Collection
      • 🏆 Collection bundle
  • Informations
    • CLUF SHOPIWEB
  • LAISSEZ UN AVIS
Propulsé par GitBook
Sur cette page
  • COMMENT AJOUTER LA SECTION
  • COMMENT PERSONNALISER LA SECTION
  • COMMENT AJOUTER UN ITEM
  • L'ASTUCE
  • LA VIDÉO

Cet article vous a-t-il été utile ?

  1. Documentation
  2. SECTIONS

Chronologie

La section CHRONOLOGIE permet de présenter une roadmap (frise chronologique) des dates importantes de votre marque e-commerce.

PrécédentGalerie de styleSuivantCollage dynamique

Dernière mise à jour il y a 8 mois

Cet article vous a-t-il été utile ?

Disponible depuis la version 1.6. Si vous avez une version antérieure, merci d'.

AVANT DE COMMENCER : Assurez-vous d'avoir une licence active installée sur votre boutique Shopify®. Si ce n'est pas le cas, .

COMMENT AJOUTER LA SECTION

  • Depuis la personnalisation du thème, cliquez sur SECTIONS > AJOUTER UNE SECTION > CHRONOLOGIE. Il est possible d’ajouter cette section sur la page de votre choix, y compris sur un modèle de page produit.

COMMENT PERSONNALISER LA SECTION

Général

  • Optez pour un affichage de la section dans un conteneur ou en pleine largeur. Si vous choisissez l'affichage CONTENEUR, entrer la largeur souhaitée en pixels dans le champs du dessous. Si vous choisissez un affichage PLEINE LARGEUR, enlevez la taille du champs ; ce format d'affichage permet à la section de prendre tout l'écran.

  • Alignement du texte : Préférez-vous que le texte (titre et description de la section) soit à gauche ou centré ?

En-tête de la section

  • Légende image : Pour afficher une petite image dans l'en-tête de la section, importez-en une puis réglez la taille en entrant le chiffre en pixels dans le champs du dessous.

  • Écrire le texte à afficher en tant que Légende de section ou bien le supprimer pour ne pas en mettre. Si vous en avez mis un, réglez ensuite sa taille et sa couleur à l'aide des deux options suivantes.

  • Titre overlay : Écrire le titre à afficher en tant que "Titre overlay" (titre affiché en transparence en arrière-plan) de section ou bien le supprimer pour ne rien afficher. Si vous en avez mis un, réglez ensuite sa taille et sa couleur à l'aide des deux options suivantes.

  • Écrire le titre souhaité pour la section dans le champ texte, puis réglez sa balise SEO (choisissez de préférence un H2 sauf si la section est la première de votre page). Réglez ensuite la taille d'affichage du titre.

  • Écrire la description générale souhaitée pour la section dans le champ texte suivant. Pour ne rien afficher, supprimez simplement le texte. Ensuite, réglez sa taille à l'aide de l'option suivante.

Chronologie

Ces options n'étant pas visible tant que vous n'avez pas ajoutez des items (les cartes de la frise chronologique), vous pourrez revenir à cette étape du tutoriel plus tard.

  • Largeur de la ligne : Faites glisser le curseur pour régler l'épaisseur du trait de la frise chronologique. Le trait n'apparaît pas tant qu'il n'y a pas d'item ajouté.

  • Couleur de la ligne : Sélectionnez la couleur de la ligne de votre frise chronologique (ces couleurs dépendent de celles ajoutées dans les paramètres de thème).

  • Diamètre des points : Ajustez la taille du diamètre des points qui seront devant chacun des items.

Bouton 'En savoir plus'

  • Si vous le souhaitez, il est possible d'ajouter un Appel à l'action à votre section CHRONOLOGIE. Inscrivez le texte, sélectionnez le lien vers lequel sera redirigé l'utilisateur et terminez par la couleur du bouton.

Espacement de la section

  • Padding supérieur : Ajoutez de l'espace à l'intérieur du HAUT de la section.

  • Padding inférieur : Ajoutez de l'espace à l'intérieur du BAS de la section.

  • Marge supérieure : Ajoutez de l'espace à l'extérieur du HAUT de la section.

  • Marge inférieure : Ajoutez de l'espace à l'extérieur du BAS de la section.

COMMENT AJOUTER UN ITEM

  • Dans la colonne des sections située à gauche de l'écran, cliquer sur le lien AJOUTER ITEM sous la section CHRONOLOGIE.

  • Une fois l'item ajouté, sélectionnez-le pour afficher les options de personnalisation dans la colonne située à droite de l'écran.

General

  • Alignement du texte : Souhaitez-vous que le texte de la carte soit aligné sur la gauche, à droite ou centré ? Sélectionnez l'option correspondante.

  • Couleur de la bordure : Vous pouvez ajouter une bordure à la carte en choisissant la couleur depuis le menu déroulant.

  • Largeur de la bordure : Ajustez maintenant la taille de la bordure. Mettez la taille à zéro si vous ne voulez pas afficher de bordure.

  • Ombre : Pour afficher une ombre ou pas, sélectionnez le réglage de votre choix à partir du menu déroulant.

Animation

  • Effet d'animation : Sélectionnez l'une des 43 animations disponibles dans le thème SHOPIWEB PREMIUM avec laquelle la section apparaîtra à l'écran de l'utilisateur.

  • Vitesse d'animation : Réglez à présent la vitesse à laquelle cette animation va s'effectuer.

Image

Il est possible d'ajouter une image à la carte. Pour en afficher une, sélectionnez-la depuis votre bibliothèque ou importez-en une. Ajustez ensuite son orientation et son éventuel recadrage. Souhaitez-vous que l'attention du visiteur soit attiré sur le haut, le centre, le bas, la droite ou la gauche de l'image ? Cliquez sur l'option de votre choix.

Texte

  • Date : Inscrivez la date lié à l'évènement de votre frise chronologique. Le thème permet de la mettre en valeur.

  • Couleur de l'arrière plan 'Date' : Sélectionnez la couleur du cartouche de la date. Les couleurs dépendent de celles entrées dans les paramètres de thème.

  • Titre : Écrivez le titre de la carte.

  • Taille du titre : Sélectionnez la taille d'affichage du titre. De préférence, optez pour un titre de taille inférieur à celui de la section pour respecter la hiérarchie visuelle.

  • Description : Écrivez la description de la carte. Ajustez ensuite sa taille à l'aide de l'option suivante : Taille de description.

Bouton

  • Pour afficher un bouton à votre carte, écrivez le texte du bouton dans le champs TEXTE DU BOUTON (laissez ce champs vide si vous ne souhaitez pas mettre de bouton). Dans l'option suivante, sélectionnez l'URL vers laquelle les utilisateurs seront redirigés après avoir cliqué sur le bouton. Ensuite, choisissez la couleur du bouton à l'aide du menu déroulant (les couleurs dépendent de celles entrées dans vos paramètres de thème). Terminez par la taille du bouton : PETIT, NORMAL ou LARGE.

Recommencez la même procédure pour chaque item ou élément de votre frise chronologique.

Félicitations, vous avez réussi à ajouter et personnaliser la section CHRONOLOGIE du thème SHOPIWEB PREMIUM.

L'ASTUCE

Mettez en valeur les grandes étapes ou date de votre marque. Vous pouvez ainsi présenter aux visiteurs les objectifs et prochaines améliorations de vos produits. La section CHRONOLOGIE apporte de l'interactivité à votre contenu.

LA VIDÉO

Choisissez la COULEUR D'ARRIÈRE PLAN (les dépendent de celles que vous avez ajoutés depuis vos paramètres de thème). Il est possible de créer un effet de dégradé en cochant la case DÉGRADÉ D'ARRIÈRE PLAN à condition d'avoir choisi une couleur foncé.

🟢
couleurs
effectuer la mise à jour
commandez une licence SHOPIWEB PREMIUM
La section CHRONOLOGIE
Ajouter la section CHRONOLOGIE avec le thème SHOPIWEB PREMIUM
Cliquer sur AJOUTER ITEM pour insérer une date à la frise chronologique
Un Item ou Élément sans image de la frise chronologique
La section CHRONOLOGIE du thème SHOPIWEB PREMIUM permet de présenter les moments importants de votre projet e-commerce sous forme de frise chronologique.
Depuis l'interface de personnalisation du thème, cliquer sur ajouter une section puis sur la section CHRONOLOGIE
Pour ajouter une date sous forme de carte à votre frise chronologique, cliquez sur AJOUTER ITEM
Un Item de la section CHRONOLOGIE se compose essentiellement d'une Date, d'un Titre, d'une Description et d'un Bouton d'appel à l'action