Bannière de boutique Shopify : tailles, images produit et soldes

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.

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.

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. 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. 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. 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. 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. 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.

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.

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.

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.

• 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é 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 et le design de post promo 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 veut dire concrètement pour une boutique.

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 montre la méthode.