# Compteurs animés {% hint style="info" %} Version 1.1.0 {% endhint %}
Capture d'écran de la section COMPTEURS ANIMÉS du thème français SHOPIWEB PREMIUM

Section COMPTEURS ANIMÉS de la boutique demo du thème SHOPIWEB PREMIUM

{% hint style="success" %} **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](https://www.shopiweb.fr/). {% endhint %} ### 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](/theme-premium/documentation/parametres-du-theme/couleurs.md) * 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](/theme-premium/documentation/parametres-du-theme/couleurs.md) * 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 : {% embed url="" %} Vidéo explicative pour apprendre à personnaliser la section COMPTEURS ANIMÉS du thème SHOPIWEB PREMIUM {% endembed %} {% hint style="success" %} **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 >](https://theme.shopiweb.fr/micro-coaching) {% endhint %} --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://www.docs.shopiweb.fr/theme-premium/documentation/sections/compteurs-animes.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.