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 INTERCALAIRE À L'ACCORDÉON VISUEL
  • L'ASTUCE
  • LA VIDÉO

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

  1. Documentation
  2. SECTIONS

Accordeon visuel

La section ACCORDÉON VISUEL permet d'afficher jusqu'à 8 images avec titres et descriptions accessibles depuis des intercalaires présentés sous forme d'accordéons.

PrécédentSECTIONSSuivantScrolling images

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 > ACCORDÉON VISUEL. 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

  • Choisissez la COULEUR D'ARRIÈRE PLAN (les couleurs 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é.

  • 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, centré ou à droite ?

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.

Images

  • Hauteur images (px) : Réglez la taille en pixels des images de l'accordéon ou laissez celle par défaut. Cette option ne concerne que l'affichage sur ordinateur car depuis un smartphone, l'ajustement se fait automatiquement.

  • Afficher la première image développée : Cocher cette option pour que, par défaut, le premier accordéon soit ouvert. Cela invite l'utilisateur à consulter votre contenu et à comprendre comment fonctionne la section.

  • Couleur des images : Choisissez la couleur qui viendra créer un effet de flou au-dessus de l'image de l'accordéon lorsque celui-ci est fermé. Ajustez ensuite l'opacité et le flou entre la couleur choisie et l'image à l'aide des deux options suivantes : opacité, flou images.

  • Couleur des textes : Choisissez la couleur d'affichage des textes de l'accordéon lorsque celui-ci est fermé.

  • Poids de la police : Préférez-vous que ce titre apparaisse en poids normal ou en Bold (gras) ? Sélectionnez l'option qui vous convient.

  • Bordure de l'image : Il est possible de créer une bordure sur vos images. Choisissez donc sa couleur, sa taille et l'ombre à l'aide des options : Bordure de l'image, Couleur de la bordure, Largeur de la bordure, Ombre.

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.

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 INTERCALAIRE À L'ACCORDÉON VISUEL

  • Dans la colonne des sections située à gauche de l'écran, cliquer sur le lien AJOUTER ITEM sous la section ACCORDÉON VISUEL. Vous pouvez ajouter jusqu'à 8 ITEMS (images avec titres et descriptions).

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

Item

  • Image : Cliquez sur SÉLECTIONNER UNE IMAGE puis, choisissez-en une depuis votre bibliothèque de contenu ou importez-en une depuis votre ordinateur.

  • Titre de l'image : Écrivez le titre qui apparaîtra sur l'intercalaire lorsque celui-ci sera fermé.

  • Icône : Affichez un icône au bas de l'intercalaire lorsque celui-ci est fermé. Coller le code de l'icône au format SVG dans ce champs. Vous pouvez faire votre sélection depuis la bibliothèque gratuite Bootstrap Icons (voir la vidéo explicative disponible au bas de cette page). Cette option est facultative. Vous pouvez faire le choix de ne pas mettre d'icône.

  • Largeur de l'icône svg : Si vous avez collé un code SVG dans le champs précédent, ajustez sa taille d'affichage en pixels en faisant glisser le curseur.

Contenu

  • Titre : Écrivez le titre qui apparaîtra lorsque l'intercalaire sera ouvert. Balise titre (SEO) : Réglez maintenant la balise SEO de ce titre. Vous pouvez laisser le réglage par défaut en "h3".

  • Taille du titre : Sélectionnez la taille d'affichage du titre de l'intercalaire lorsque celui-ci est ouvert. 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 votre intercalaire lorsque celui-ci est ouvert. Ajustez ensuite sa taille à l'aide de l'option suivante : Taille de description.

Bouton

  • Pour afficher un bouton à votre intercalaire lorsque celui-ci est ouvert, é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.

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

L'ASTUCE

ACCORDÉON VISUEL permet de réduire le nombre de sections de votre page. Par exemple, la section IMAGE TEXTE EXPLORATEUR rend accessible 5 images d'un simple clic. Par contre, ACCORDÉON VISUEL rend accessible 8 images avec son titre et sa description dans une seule et même section. Elle améliore ainsi l'expérience utilisateur de votre boutique e-commerce.

LA VIDÉO

🟢
effectuer la mise à jour
commandez une licence SHOPIWEB PREMIUM
Vidéo explicative de la section ACCORDÉON VISUEL
La section ACCORDÉON VISUEL
Ajouter la section ACCORDÉON VISUEL avec le thème SHOPIWEB PREMIUM
Régler la hauteur des images pour l'affichage sur ordinateur
Cliquer sur AJOUTER ITEM puis ajouter l'image depuis la colonne de personnalisation
Le titre ainsi que l'icône de l'intercalaire lorsque celui-ci est fermé
Le titre et la description d'un intercalaire lorsque celui-ci est ouvert
Bouton d'appel à l'action de la section ACCORDÉON VISUEL
La section ACCORDÉON VISUEL du thème SHOPIWEB PREMIUM permet de présenter 8 images dans une même section en les rendant accessibles depuis des intercalaires présentés sous forme d'accordéon.
Depuis l'interface de personnalisation du thème, cliquer sur ajouter une section puis sur la section ACCORDÉON VISUEL
Le réglage "Hauteur images" en pixels permet d'ajuster la hauteur des images affichées sur l'"Accordéon visuel" consulté depuis un ordinateur uniquement
La section ACCORDÉON VISUEL permet d'ajouter jusqu'à 8 images accompagnées chacune d'un titre et d'une description
L'intercalaire de la section "Accordéon visuel" fermé permet d'afficher un titre et un icône au format SVG
Lorsque l'utilisateur ouvre un intercalaire de l'"Accordéon visuel", un titre et une description s'affiche à l'écran
Il est possible d'ajouter un appel à l'action à chaque intercalaire en inscrivant votre appel à l'action dans le champs dédié