🟢Compteurs animés
La section Compteurs Animés permet d'afficher dans une ou plusieurs colonnes un compteur dynamique qui mettra en valeur les chiffres clés d'un produit ou d'une entreprise.
Version 1.1.0
AVANT DE COMMENCER : Assurez-vous d'avoir une licence active installée sur votre boutique Shopify®. Si ce n'est pas le cas, commandez une licence SHOPIWEB PREMIUM en passant par ce lien.
Depuis le tableau de bord Shopify®
Cliquer sur Boutique en ligne > Thèmes > Personnaliser
Une fois l'interface de personnalisation ouverte, sélectionner la page sur laquelle travailler à l'aide du menu déroulant situé en haut au centre de l'écran
Ajouter la section Compteurs Animés
Depuis la colonne de droite, cliquer sur Sections > Ajouter une section > Compteurs Animés
Pour déplacer la section, maintenir le clic de la souris appuyé sur les 6 petits points situés à droite de la section puis faire glisser dans la zone de la page souhaitée
En cliquant sur l'œil à gauche des 6 petits points, il est possible d'afficher ou non la section
Personnaliser la section Compteurs Animés
Par défaut, la section affiche 4 items (4 colonnes)
Cliquer sur Ajouter Item pour insérer une nouvelle colonne avec un nouveau Compteur Animés
Pour supprimer un Item, cliquer sur l'Item concerné puis, tout en bas de la colonne située à droite de l'écran, cliquer sur Retirer la section
Ensuite, les options de personnalisation se trouvent dans la colonne à droite de l'écran
La Couleur de l'arrière plan permet de choisir la couleur de fond de la section qui sera afficher. Ces couleurs sont celles qui ont été au préalables insérées dans les Paramètres de thème
Cocher la case Dégradé d'arrière plan pour transformer la couleur d'arrière plan en dégradé (Attention : cette option ne fonctionne pas sur les couleurs claires)
Conteneur permet d'afficher la section en pleine largeur ou dans une dimension personnalisé en entrant la taille souhaitée en pixels dans le champs Largeur maximale (px)
Alignement de texte permet de justifier l'ensemble du texte de la section à Gauche ou au Centre
Écrire le titre de la section dans le champs Titre ou laisser vide pour ne pas afficher de titre
Taille du titre permet de régler la taille d'affichage du titre sans modifier le SEO
Description permet d'écrire une description qui apparaîtra sous le titre de la section. Laisser vide pour ne pas afficher de description
Taille de description permet de régler la taille d'affichage du texte de la description sans modifier le SEO du site
Animation permet de régler la vitesse de défilement en secondes des chiffres des Compteurs Animés (le délai dans lequel le chiffre est atteint)
Points d'arrêt permet de répartir les colonnes en fonction de chaque taille d'écran depuis lequel la boutique sera consultée (XS, SM, MD, LG, XL, XXL)
Le Padding supérieur et inférieur permet d'ajouter de l'espace à l'intérieur de la section
La Marge supérieure et inférieure permet d'jouter de l'espace à l'extérieur de la section, en dehors du rectangle bleu
Personnaliser un Item
Sélectionner l'Item en question depuis la colonne à gauche de l'écran
Les options de réglage de l'Item apparaissent dans la colonne à droite de l'écran
Inscrire le chiffre souhaité dans le champs Valeur en nombre
Inscrire le signe ou un mot souhaité dans le champs Suffixe
Taille de la valeur permet de régler la taille la Valeur en nombre et le Suffixe
Couleur de la valeur permet d'afficher la Valeur et le Suffixe dans l'une des couleurs entrées préalablement dans les [[Paramètres de thème]]
Titre permet d'écrire un titre qui apparaîtra sous la Valeur et le Suffixe
Taille du titre permet de régler la taille d'affichage du titre sans modifier le SEO
Description permet d'écrire une description qui apparaîtra sous le titre de l'Item. Laisser vide pour ne pas afficher de description
Taille de description permet de régler la taille d'affichage du texte de la description sans modifier le SEO du site
Le champs Texte du bouton permet d'écrire le texte à faire apparaître sur le bouton. Laisser vide pour ne pas afficher de bouton
URL du bouton permet de sélectionner la page sur laquelle le visiteur est dirigé après avoir cliqué sur le bouton
Couleur du bouton permet d'afficher le bouton dans l'une des couleurs préalablement réglées dans Paramètres de thème
Taille du bouton permet d'afficher le bouton de manière Petite, Normale ou Large
Recommencer la même procédure pour chacun des Items de la section.
Cliquer sur Enregistrer et c'est terminé
Retrouvez l'intégralité des explications dans le tutoriel vidéo suivant :
Besoin d'aide ? Réservez un micro-coaching personnalisé avec Xavier de 30 ou 60 minutes et obtenez une solution à vos soucis techniques et designs. En savoir plus >
Dernière mise à jour
