🟢Image texte compteurs

La section "Image Texte Compteurs" vous aide à mettre en valeur les bénéfices de votre produit ou de votre entreprise en chiffres.

C'est une section qui inclut une image, un titre, une description, et la possibilité d'ajouter un texte de légende et même un logo.

Version 1.6. Pour utiliser cette section, vous devez avoir au minimum la version 1.6 du thème Shopiweb Premium. Si vous avez une version antérieure, vous devez faire la mise à jour, en vous référant à la documentation.

Voici les étapes pour ajouter et personnaliser la section :

Étape 1 : Accéder à l'interface de personnalisation du thème

1. Depuis votre tableau de bord Shopify, allez dans "Boutique en ligne".

2. Cliquez sur "Thèmes".

3. Cliquez sur le bouton "Personnaliser" de la version du thème sur laquelle vous souhaitez travailler. L'interface de personnalisation s'ouvre.

Étape 2 : Ajouter la section "Image Texte Compteurs"

1. Choisissez la page sur laquelle vous voulez ajouter la section. La section Image Texte Compteurs peut être ajoutée sur n'importe quelle page.

2. Dans la colonne de gauche, cliquez sur "Ajouter une section".

3. Dans la liste des sections, recherchez ou tapez "Image texte compteur".

4. Cliquez sur la section pour l'ajouter à votre page. Elle apparaîtra dans la colonne de gauche.

Étape 3 : Personnalisation initiale (Espacements et Fond)

1. Une fois la section ajoutée, cliquez dessus dans la colonne de gauche pour accéder à ses options de personnalisation dans la colonne de droite.

2. Il est recommandé de commencer par ajouter du padding (espacement à l'intérieur de la section) pour faire respirer le contenu et donner un effet professionnel. Allez tout en bas des options et ajoutez un padding minimum de 10 ou 13 au-dessus et en dessous.

3. Vous pouvez régler la couleur de l'arrière-plan de la section. Vous pouvez choisir une couleur prédéfinie (primaire, secondaire, tertiaire) ou une couleur personnalisée. Si vous mettez une couleur foncée, le texte se met automatiquement plus clair. Vous pouvez aussi ajouter une image d'arrière-plan, en réglant son opacité et son flou.

Étape 4 : Personnaliser le contenu général

1. Image : Vous pouvez ajouter une image à votre section.

2. Texte de légende (Label) : Vous pouvez ajouter un texte d'étiquette (label) au-dessus du titre. C'est un petit texte qui peut servir à "étiqueter" la section. Choisissez la taille (petit, moyen, grand) et la couleur. La couleur doit généralement être moins visible que le titre pour respecter une hiérarchie visuelle.

3. Titre : Ajoutez le titre de votre section.

4. Balise SEO : Définissez la balise SEO (H1 à H6 ou aucune) pour votre titre. Pour une section secondaire, il est recommandé de mettre un H2 ou un H3, car il ne doit y avoir qu'un seul H1 par page (généralement pour le titre principal).

5. Taille du titre : Réglez la taille de votre titre (moyen, grand, très grand, etc.). Il est recommandé de conserver une certaine cohérence avec les tailles de titres des autres sections de votre page.

6. Description : Ajoutez votre texte de description. Réglez la taille de la description si nécessaire.

7. Contenu caché : Si vous avez une longue description, vous pouvez activer l'option "contenu caché" (hidden content). Cela ajoute un bouton "Voir plus" qui permet aux utilisateurs de dérouler le texte complet, évitant ainsi que la section ne devienne trop longue et ne déséquilibre la mise en page. Si vous utilisez un fond sombre avec cette option, assurez-vous que la couleur du fondu correspond à la couleur de l'arrière-plan.

8. Alignement du texte : Vous pouvez choisir l'alignement du texte (gauche, centre, droite).

NOUVEAUTÉ depuis la version 1.7 : Ajout de cadres SVG sur les images.

Étape 5 : Ajouter et personnaliser les compteurs

1. La section "Image Texte Compteurs" permet d'ajouter jusqu'à trois compteurs.

2. Sous votre section dans la colonne de gauche, cliquez sur "Ajouter compteur". Répétez l'opération pour ajouter un deuxième et un troisième compteur si vous le souhaitez.

3. Cliquez sur le premier compteur ajouté dans la colonne de gauche pour le personnaliser.

4. Texte lié au chiffre : Ajoutez le texte qui présente le bénéfice ou l'information lié au chiffre (ex: "vos bénéfices liés aux chiffres").

5. Chiffre/Pourcentage : Ajoutez le chiffre ou le pourcentage que vous voulez afficher.

6. Couleur du chiffre : Choisissez la couleur du chiffre. Notez que les compteurs peuvent afficher une barre de chargement autour du chiffre, dont la couleur peut être définie.

7. Répétez ces étapes pour chaque compteur que vous avez ajouté.

Étape 6 : Ajouter un bouton optionnel

1. Si vous souhaitez ajouter un bouton pour renvoyer l'utilisateur vers une autre page, ajoutez le texte de votre bouton. Si vous ne mettez pas de texte, le bouton n'apparaîtra pas.

2. Entrez l'URL vers laquelle le bouton doit rediriger.

3. Choisissez la couleur du bouton. Les couleurs reprennent généralement celles définies dans les paramètres de votre thème.

4. Vous pouvez choisir si le bouton est plein ou s'il a juste un contour.

5. Définissez la taille du bouton (petit, normal, large). Il est conseillé d'utiliser la même taille que vos autres boutons sur la page pour la cohérence.

Étape 7 : Enregistrer vos modifications

1. Une fois que vous avez ajouté et personnalisé la section, pensez à cliquer sur le bouton "Enregistrer" pour sauvegarder vos modifications. Enregistrer permet de ne pas perdre votre travail et rafraîchit la page pour afficher les modifications et lancer les scripts.

En suivant ces étapes, vous aurez ajouté et personnalisé la section "Image Texte Compteurs" sur votre boutique. C'est un processus simple et sans code qui vous permet d'obtenir un rendu professionnel.