Ta page d’accueil Shopify décide en moins de 5 secondes si le visiteur reste ou part. Savoir traduire une maquette en sections Shopify fonctionnelles — bannière, CTA, images, footer — sans toucher au code, c’est la compétence qui sépare une boutique amateur d’une boutique qui convertit.
En 30 secondes
Cette leçon te guide pas à pas dans la personnalisation de ta page d’accueil Shopify : bannière, sections produits, image avec texte, newsletter, footer et intégration du feed Instagram/TikTok. L’objectif est d’avoir une boutique propre et fonctionnelle sans toucher à une ligne de code, en partant d’une maquette et en adaptant chaque section disponible dans le thème.
Pourquoi la page d’accueil est stratégique (et pas décorative)
Ta page d’accueil n’est pas un portfolio artistique. C’est une machine à convertir. Comme le dit Jerome dans la leçon : « On veut vraiment que lui il remonte et il clique ». Chaque section doit servir un seul objectif — guider le visiteur vers l’achat.
- Un visiteur qui arrive sur ta boutique décide en moins de 5 secondes s’il reste ou non.
- Trop d’éléments = distraction = taux de rebond élevé.
- Un seul CTA par section, c’est la règle d’or.
Construire la bannière principale : les réglages essentiels
La bannière est la première chose que voit ton visiteur. Voici comment la configurer correctement dans Shopify sans te perdre dans les options :
- Image de fond : une seule image suffit. Évite la deuxième image superposée, ça alourdit visuellement.
- Opacité : règle à 30 % pour que le texte reste lisible sur l’image.
- Hauteur : choisis « Moyen » — bon compromis entre impact visuel et espace utile.
- Position du contenu : aligne à gauche, en cohérence avec ta maquette.
- Animation : désactive le mouvement ambiant et l’arrière-plan fixe au scroll. Jerome confirme : « Je suis pas fan non plus pour la bannière. »
- Mobile : position à gauche, pas d’empilement d’images.
- CTA : un seul bouton, lien direct vers un produit ou une collection. Pas de bouton transparent, pas de deuxième bouton.
Les sections intermédiaires : colonnes, produits, image + texte
Section colonnes (ex : 4 avantages ou catégories)
Utilise la section « Collection produits en vedette » ou une section liste adaptée. Points clés :
- Nombre de colonnes sur ordinateur = nombre d’éléments réels (4 colonnes pour 4 items).
- Alignement : centre.
- Sur mobile : 1 colonne + balayage activé. Jerome insiste : « C’est quand même un petit peu plus propre » et ça évite que tout soit serré.
- Pas de bouton dans cette section si ta maquette n’en prévoit pas.
Section produits (collection en vedette)
- Sélectionne ta collection principale.
- Limite à 4 produits maximum si tu débutes — évite de noyer le visiteur.
- Active « Tout afficher » uniquement si tu as plus de 8 produits.
- Sur mobile : 2 colonnes.
- Carrousel sur ordinateur : inutile si tu as peu de produits.
Section image avec texte
- Hauteur d’image : « Moyen » (pas « Adapté à l’image » — trop instable si tu changes l’image).
- Position du texte : milieu, aligné à gauche.
- Effet chevauchement : optionnel, mais donne du relief.
- Mouvement ambiant : désactivé.
Intégrer son feed Instagram ou TikTok (sans coder)
Shopify ne propose pas nativement d’affichage de feed social. La solution gratuite recommandée par Jerome :
- Va dans l’App Store Shopify.
- Recherche « Instagram Feed » (application gratuite, options payantes disponibles mais non nécessaires au départ).
- Installe l’application et connecte ton compte Instagram depuis un onglet où tu es déjà connecté à Instagram.
- Paramètre : format carré, affichage sur une ligne, pas d’espacement.
- Ajoute la section dans ta page d’accueil via « Personnaliser » → « Ajouter une section » → « Applications » → ton feed.
- Si tu es sur TikTok plutôt qu’Instagram : cherche « TikTok Feed », même procédure. Rendu légèrement moins esthétique mais fonctionnel.
Limite connue : les marges autour du bloc app ne sont pas modifiables sans code. Contournement : ajouter une section vide au-dessus pour créer un espace visuel.
Les erreurs à éviter sur ta page d’accueil Shopify
- Mettre deux boutons CTA dans la bannière : ça divise l’attention du visiteur.
- Activer les animations (mouvement ambiant, scroll fixe) : effet amateur, distraction inutile.
- Choisir « Adapté à l’image » pour la hauteur : crée des incohérences visuelles si tu changes les photos.
- Mettre des liens dans les colonnes d’avantages : même erreur que la bannière d’annonce — on ne veut pas que le visiteur parte dans tous les sens.
- Passer un mois sur la boutique en négligeant les réseaux sociaux : Jerome est direct — « Ça sert à rien de travailler pendant un mois sa boutique si tu as délaissé la communication. »
- Vouloir reproduire exactement la maquette sans code : certaines sections n’existent pas dans le thème gratuit. Adapte ou abandonne l’idée, ne bloque pas.
- Afficher trop de produits dès le départ : mieux vaut 4 produits bien présentés que 20 mal organisés.
Thème gratuit vs thème payant : ce que tu peux (vraiment) faire
| Fonctionnalité | Thème gratuit Shopify | Thème payant |
|---|---|---|
| Bannière avec CTA |  Oui |
Oui + plus d’options |
| Section colonnes personnalisées | Basique |
Avancé |
| Image avec texte | Oui |
Oui |
| Section icônes + image petite taille |  Nécessite du code |
Souvent inclus |
| Feed Instagram natif | App requise |
App requise |
| Contrôle des marges sur apps | Code requis |
Parfois |
Pour un démarrage, le thème gratuit est suffisant. Investis dans un thème payant (entre 150 € et 350 € en général) uniquement quand tu as validé ton produit et tes premières ventes.
Action cette semaine
- Ouvre l’éditeur Shopify et identifie les sections de ta maquette une par une.
- Configure ta bannière principale : une image, opacité 30 %, hauteur moyenne, un seul bouton CTA vers ton produit phare.
- Ajoute ta collection en vedette avec 4 produits maximum, 2 colonnes sur mobile.
- Ajoute une section « Image avec texte » pour présenter ton histoire ou ton argument principal.
- Installe l’app gratuite « Instagram Feed » ou « TikTok Feed » et connecte ton compte.
- Vérifie le rendu mobile de chaque section avant de publier.
- Publie ta page d’accueil même imparfaite — et continue à alimenter tes réseaux en parallèle.
Pour aller plus loin
Leçon interactive complète (quiz, transcription, notes, chapitres) : https://app.cockpitlab.io/fr/formations/shopify/integrer-ta-maquette-dans-shopify-bannieres-images-et-mise-en-forme-video-29-41
Vidéo originale sur YouTube : Regarder
Chaîne cockpitLAB : Abonne-toi pour les prochaines formations
Discussion
Quelle section de ta page d’accueil Shopify t’a posé le plus de problèmes à configurer ?
N’hésite pas à poser tes questions ou partager ton expérience ci-dessous — la communauté te répond sous 24h en général.