Section Héro

Ce que vous apprendrez

  • Comment ajouter et personnaliser la section Héros

  • Comment basculer entre arrière-plans image et vidéo

  • Comment configurer le titre, les superpositions et les espacements

  • Comment ajouter et styliser jusqu'à 2 boutons d'appel à l'action

🧩 Aperçu de la section

La section Héros du thème Plain Jane est une bannière pleine largeur utilisée pour créer une première impression marquante sur votre vitrine. Vous pouvez mettre en avant une image ou une vidéo en lecture automatique avec un titre et jusqu'à deux boutons d'appel à l'action.

💡 Astuce : Pour de meilleurs résultats, utilisez des images de haute qualité ou des boucles vidéo courtes et muettes de moins de 10 Mo.

⚙️ Comment ajouter et personnaliser la section Héros

1. Ajouter la section

  • Depuis Shopify Éditeur de thème, ouvrez votre Page d'accueil

  • Cliquez sur Ajouter une section et choisissez Héros

  • Faites-le glisser en haut de votre mise en page (optionnel)

2. Télécharger le média d'arrière-plan

Sous Contenu et données:

  • Type de média : Choisir Image ou Vidéo

  • Image : Téléversez ou sélectionnez votre Première image

  • Deuxième image (optionnel) : Utilisée comme repli mobile si activée

  • Vidéo : Téléverser .mp4 format uniquement ; la lecture automatique est muette

⚠️ Attention : Sur les iPhone en mode basse consommation, la lecture automatique des vidéos peut être désactivée.

🖋️ Paramètres de texte et de mise en page

Titre

  • Titre Héros : Ajoutez votre message (ex. « NOUVEAUTÉS »)

Mise en page et affichage

  • Hauteur du Héros : Choisissez parmi 50%, 75%, ou 100 % de la hauteur de la fenêtre

  • Utiliser une image au lieu de la vidéo sur mobile : Activez pour remplacer la vidéo mobile

  • Afficher une seule image sur mobile : Aide à contrôler la mise en page et la vitesse

  • Sélection d'image mobile : Choisissez quelle image afficher

Position du contenu

  • Placez le texte et les boutons à :

    • Haut gauche

    • Haut centre

    • Centre

    • Bas gauche

    • Bas droite

🎨 Typographie, couleurs et style

Typographie

  • Épaisseur de la police : Choisissez entre Normal et Gras

Couleurs

  • Couleur du titre : Définissez une couleur hex personnalisée (ex., #FFFFFF)

Superpositions

  • Superpositions haut/bas : Dégradés optionnels pour la lisibilité

  • Définir :

    • Couleur de la superposition

    • Hauteur de la superposition (%) à l'aide du curseur

💡 Astuce : Utilisez un noir semi-transparent (#000000 à 40 %) pour faire ressortir le texte.

📦 Espacements

Personnalisez les espacements séparément pour bureau et mobile :

🔘 Boutons

Vous pouvez ajouter jusqu'à deux boutons. Chaque bouton inclut :

Contenu et données

  • Texte du bouton : Exemple : BOUTIQUE COLLECTION

  • Lien du bouton : Collez n'importe quelle URL interne ou externe

Couleurs

  • Couleur d’arrière-plan : (ex., #FFFFFF)

  • Couleur du texte : (ex., #000000)

Style

  • Coins arrondis : Ajustez le rayon de la bordure dans px

⚠️ Limite de boutons : Vous ne pouvez ajouter que 2 boutons par section Héros.

🧩 Exemple d'arborescence de section

Une fois les comptes hérités activés, utilisez les pages de documentation de cette section pour styliser chaque partie de l'expérience client.

PrécédentSection FAQSuivantSection sélecteur d'images

Mis à jour