# Bannière de boutique Shopify : tailles, images produit et soldes [Canonical HTML page](https://gradiently.design/fr/guide/shopify-store-design) Une boutique inspire confiance quand la bannière, la grille produits, les visuels de soldes et les e-mails semblent venir du même endroit. Voici comment y arriver avec les tailles que Shopify utilise vraiment. ## The short version - Une bannière de boutique Shopify, l’image hero en haut de la page d’accueil, fonctionne bien en 1920×1080 pixels. - Les images produit Shopify gagnent à être importées en carrés de 2048×2048 pixels, pour une grille régulière et un zoom net. - La plupart des thèmes Shopify recadrent le hero différemment sur téléphone : titres et boutons ont leur place dans une colonne centrale d’environ 1080 pixels de large. - Les photos produit ressemblent à une seule boutique quand elles partagent un fond, une direction de lumière et le même espace autour du produit. - Les bannières de soldes, e-mails et posts sociaux doivent reprendre le fond et la typographie de la boutique, pour que le client la reconnaisse avant de lire un mot. Une bonne **bannière de boutique Shopify** fait 1920×1080 pixels, porte un seul titre court et un seul bouton, et garde les deux au milieu du cadre, car la plupart des thèmes coupent les côtés sur téléphone. Associez-la à des images produit importées en carrés de 2048×2048 sur le même fond, et la boutique commence à ressembler à une marque plutôt qu’à un catalogue. La suite de cette page couvre les tailles, les mises en page qui survivent à tous les écrans, et comment faire des bannières de soldes qui vous ressemblent encore. ## Tailles des bannières et images Shopify Shopify n’impose pas une taille de bannière : chaque thème décide de la hauteur du hero et de son recadrage. Partir d’un original en 16:9 est l’habitude la plus sûre, car il remplit un écran de portable et laisse assez de hauteur pour un recadrage téléphone. | Où elle apparaît | Taille à créer | Ratio | | --- | --- | --- | | Bannière hero de la page d’accueil | 1920×1080 px | 16:9 | | Image produit | 2048×2048 px | 1:1 | | Bannière d’article de blog | 1200×600 px | 2:1 | | En-tête d’e-mail | 1200×600 px | 2:1 | | Aperçu de lien quand la boutique est partagée | 1200×630 px | 1,91:1 | | Post du fil Instagram | 1080×1350 px | 4:5 | | Story Instagram | 1080×1920 px | 9:16 | L’ensemble de base pour une petite boutique. Créez chaque taille exprès plutôt que d’étirer une seule image pour toutes. - Hero 16:9: 1920 × 1080 - Produit 1:1: 2048 × 2048 - Bannière blog 2:1: 1200 × 600 - Story 9:16: 1080 × 1920 Les quatre formats d’une boutique, à l’échelle. Le hero et la story sont opposés, c’est pourquoi un seul fichier ne couvre jamais les deux. Les images produit carrées comptent plus qu’il n’y paraît. Quand toutes les photos d’une collection ont la même forme, la grille s’aligne et l’œil compare les produits au lieu de remarquer des bords irréguliers. 2048 pixels donnent aussi au zoom de la page produit assez de détail pour valoir le geste. La taille d’aperçu de lien est expliquée dans [la taille d’image Open Graph](https://gradiently.design/fr/guide/open-graph-image-size). ## Créer une bannière hero qui survit au téléphone Sur un portable, le hero est large et bas. Sur un téléphone, la même image est souvent recadrée presque en carré, ou le thème place les mots en dessous. Dans les deux cas, les bords disparaissent, et tout ce qui est important sur les bords aussi. 1. **Partez de 1920×1080** Créez sur toute la largeur, puis repérez une colonne centrale d’environ 1080 pixels de large. C’est elle qu’un téléphone a le plus de chances de garder. 2. **Écrivez une ligne, pas trois** « La sélection d’automne est arrivée. » vaut mieux qu’un titre, un sous-titre et un code promo qui se battent pour la place. Le détail va sur la page de collection. 3. **Un seul bouton, avec un verbe** Découvrir la sélection, Voir les bougies, Voir les nouveautés. La plupart des thèmes ajoutent le bouton pour vous : laissez une zone calme là où il se placera. 4. **Laissez le fond porter la marque** Une photo produit devant une pièce chargée rivalise avec les mots. Un aplat ou une matière constants derrière un produit détouré se lisent à n’importe quel recadrage. 5. **Vérifiez sur votre propre téléphone** Les aperçus du thème aident, mais ouvrez la boutique en ligne sur un vrai téléphone avant de la déclarer terminée. Une bannière hero Shopify large avec le texte La sélection d’automne est arrivée, centré sur un fond dégradé doux Un hero avec ses mots dans la colonne centrale : un recadrage téléphone garde tout le message. ## Des images produit qui ressemblent à une seule boutique Les clients jugent une boutique à sa grille bien avant de lire une description. Si un produit est sur un fond blanc, le suivant sur un plan de travail et le troisième sur un drap, la boutique paraît improvisée même avec d’excellents produits. Choisissez un fond et une façon d’éclairer, et répétez-les. ### Paraît improvisé - Un fond différent pour chaque produit - Lumière de gauche sur une photo, du dessus sur la suivante - Produits qui remplissent le cadre sur certaines photos, minuscules sur d’autres - Formats mélangés : certains portrait, d’autres carrés - Texte et badges incrustés dans la photo ### Paraît une marque - Une couleur de fond ou un dégradé pour toute la gamme - La lumière toujours du même côté - Le produit qui occupe environ 70 à 80 % du cadre - Chaque image en carré 2048×2048 - Badges ajoutés par le thème, pour des photos propres Un dégradé doux derrière un produit détouré fonctionne bien, car il donne de la profondeur sans vrai décor. Gardez-le peu contrasté pour que le produit reste l’élément le plus lumineux du cadre. D’autres mises en place figurent dans [les fonds pour photos produit](https://gradiently.design/fr/guide/product-photo-backgrounds). Pierre de studio chaude: `radial-gradient(circle at 50% 38%, #f7f3ee 0%, #ece4da 45%, #d9cdbf 100%)` Un blanc cassé chaud qui descend vers la pierre sur les bords, comme une lumière posée sur une table. Il flatte céramiques, bougies, soins et textiles. ## Des bannières de soldes Shopify qui vous ressemblent encore Les soldes sont le moment où la plupart des boutiques perdent leur style. Le réflexe habituel, c’est du rouge, une étoile éclatée et le mot SOLDES en capitales, ce qui ressemble à toutes les autres boutiques le même week-end. Gardez votre fond et votre typographie, et ne changez que les mots et éventuellement l’intensité de la couleur. Une bannière de soldes large pour une boutique Shopify avec le texte Soldes d’hiver -30 %, jusqu’à dimanche Le hero des soldes garde le fond et la typographie de la boutique. Une version story Instagram verticale de la même bannière de soldes d’hiver, avec fond et mots assortis Le même message en story 1080×1920, pour que les soldes se lisent comme une seule campagne. - Dites l’offre en moins de six mots : « Soldes d’hiver. -30 %. » - Mettez la date de fin dans le surtitre, pour une urgence honnête. - Utilisez les mêmes mots sur le hero, l’en-tête d’e-mail et la story, et gardez les mots de la story dans la [zone de sécurité](https://gradiently.design/fr/guide/social-media-safe-zones) centrale. - Retirez la bannière quand les soldes sont finies. Un hero de soldes périmé dit aux visiteurs que personne ne s’occupe de la boutique. Pour les week-ends chargés, [les posts Black Friday pour les réseaux](https://gradiently.design/fr/guide/black-friday-post-ideas) et [le design de post promo](https://gradiently.design/fr/guide/sale-post-design) proposent mises en page et formulations à reprendre. ## Un seul style pour la boutique, les e-mails et les réseaux Le hero, la grille produits, l’en-tête d’e-mail et le post Instagram sont vus par le même client à quelques jours d’écart. Quand ils partagent un fond, une police de titre et une petite palette, chacun rappelle le précédent. C’est ce que [la cohérence de marque](https://gradiently.design/fr/guide/brand-consistency) veut dire concrètement pour une boutique. - Blanc étagère: #f7f3ee - Pierre: #d9cdbf - Noyer: #8a6f5a - Encre: #2f2a26 - Accent terre cuite: #c8553d Une palette de boutique calme : deux fonds, un ton moyen, une encre pour le texte et un accent réservé aux boutons et aux mots de soldes. C’est là que Gradiently aide une petite boutique. Créez le hero une fois sur un Mark, un fond dégradé vivant avec lequel vous seul pouvez exporter une fois réservé, et Pro le redimensionne en story, en en-tête d’e-mail et en aperçu de lien en une étape. Créer en série, aussi avec Pro, remplit un modèle de fiche produit à partir d’un tableur de noms et de prix, pour que les visuels d’une nouvelle collection sortent assortis. [Un seul style, toutes les tailles](https://gradiently.design/fr/guide/one-look-every-size) montre la méthode. > **Écrivez le texte alternatif à l’import** Shopify permet d’ajouter un texte alternatif à chaque image produit et bannière. Décrivez simplement ce que montre l’image. Cela aide les utilisateurs de lecteurs d’écran et donne aux moteurs de recherche quelque chose à comprendre. ## FAQ ### Quelle taille pour une bannière de boutique Shopify ? Créez le hero de la page d’accueil en 1920×1080 pixels et gardez le titre et le bouton dans une colonne centrale d’environ 1080 pixels de large, car la plupart des thèmes coupent les côtés sur téléphone. ### Quelle est la meilleure taille d’image produit Shopify ? Un carré de 2048×2048 pixels. Il garde la grille de collection régulière et donne assez de détail au zoom produit. ### Pourquoi ma bannière Shopify est-elle coupée sur mobile ? Les thèmes font entrer une bannière large dans un écran de téléphone plus étroit en coupant les côtés ou en changeant sa hauteur. Gardez les mots et produits importants au milieu de l’image. ### Faut-il mettre du texte sur l’image de ma bannière Shopify ? Un texte court convient s’il est centré, mais beaucoup de thèmes permettent d’ajouter le titre et le bouton en texte réel par-dessus l’image, plus net et plus facile à modifier. ### Comment rendre mes photos produit cohérentes ? Utilisez un seul fond, une lumière du même côté, des images carrées en 2048×2048 et un produit qui occupe une part similaire de chaque cadre.