Section héros

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

---

🧩 Présentation 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 présenter 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 de courtes boucles vidéo 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

• Cliquer sur Ajouter une section et choisissez Héros

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

2. Importer le média d'arrière-plan

Sous Contenu et données:

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

• Image : Importez ou sélectionnez votre Première image

• Deuxième image (optionnel) : Utilisée en remplacement sur mobile si activée

• Vidéo : Importer .mp4 format uniquement ; la lecture automatique est muette

⚠️ Attention : Sur les iPhone en mode Économie d'énergie, 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 (par 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 d'une vidéo sur mobile : Activez pour remplacer la vidéo sur mobile

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

• 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 Normale et Gras

Couleurs

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

Superpositions

• Superpositions haut/bas : Gradients 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 le bureau et le mobile :

plaintextCopyEditTop Espacement supérieur (Bureau) : 0px
Espacement inférieur (Bureau) : 20px
Espacement supérieur (Mobile) : 0px
Espacement inférieur (Mobile) : 16px

---

🔘 Boutons

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

Contenu et données

• Texte du bouton : Exemple : ACHETER LA COLLECTION

• Lien du bouton : Collez une URL interne ou externe

Couleurs

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

• Couleur du texte : (par 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'arbre de section

Héros
├── Bouton 
└── Bouton 

---

Besoin d’aide ?

• 💬 Rejoignez notre communauté sur Discord : https://discord.gg/hcc2GvgZc6

• 📧 Envoyez-nous un e-mail à : [email protected]

• 💻 Discutez en direct avec nous : Disponible du lundi au vendredi, de 10h à 18h EST, directement sur notre site web