> For the complete documentation index, see [llms.txt](https://www.docs.shopiweb.fr/theme-premium/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://www.docs.shopiweb.fr/theme-premium/documentation/sections/compteurs-animes.md).
# Compteurs animés
{% hint style="info" %}
Version 1.1.0
{% endhint %}
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 %}