Conseils pour Brooklyn

Cet article présente des astuces utiles et les meilleures pratiques pouvant vous aider à configurer Brooklyn pour votre boutique en ligne.

Conseils de navigation

Ajouter un menu déroulant

Pour ajouter des menus déroulants à votre menu principal, vous devez créer des menus sur votre page Navigation. Pour en savoir plus, voir Configurer des menus déroulants dans votre boutique en ligne.

Le menu principal d'une boutique en ligne. La souris passe sur le lien « Catalogue », qui affiche un menu déroulant menant à des collections telles que « Salon » et « Chambre ».

Le menu principal devient un menu de barre latérale

Si votre menu principal occupe beaucoup d'espace, il est converti en menu de barre latérale qui s'ouvre lorsque vous cliquez sur un bouton dans la section de l'en-tête :

Un menu de la barre latérale sur le côté gauche d'une boutique en ligne. Les liens du menu principal tels que « Accueil » et « Catalogue » apparaissent dans le menu de la barre latérale.

Vous pouvez empêcher votre menu principal de passer au style de la barre latérale en procédant comme suit :

  • N'ajoutez pas plus de quatre ou cinq liens à votre menu principal.
  • Utilisez une police étroite pour les liens de votre menu principal. Vous pouvez modifier la police du texte d'accent à partir des paramètres de typographie.
  • Créez des éléments de menu avec un nombre limité de caractères. Par exemple, vous pouvez utiliser « FAQ » au lieu de « Questions fréquemment posées » ou « Contacter » au lieu de « Nous contacter ».

Conseils en matière d'images

Les meilleurs types d'images de produits pour Brooklyn

  • Comme les images haute résolution ont un aspect soigné et professionnel, les images de vos produits doivent faire au moins 1024 x 1024 pixels. La meilleure forme pour vos images de produits est le carré.

  • Idéalement, vos images devraient avoir un arrière-plan de couleur uniforme. Une couleur uniforme est une couleur unie, sans ombre ni surbrillance. Toutes vos images devraient avoir la même couleur d'arrière-plan.

  • Pour supprimer le cadre autour des images de vos produits, choisissez la couleur transparente pour l'arrière-plan de votre produit à partir des paramètres de couleur :

Deux listes de produits sont affichées avec un arrière-plan blanc. L'arrière-plan de la boutique en ligne est également blanc, et les images de produit ne sont pas entourées d'un cadre.

Taille idéale pour les images de diaporama

Les deux diapositives d'images présentées dans la boutique de démonstration Brooklyn font 1 200 x 800 px. C'est une bonne idée de garder toutes vos diapositives d'image de la même taille.

Recadrage d'image sur de petits écrans

Sur les petits appareils, les diapositives d'images remplissent l'écran du bord supérieur au bord inférieur. Les diapositives sont redimensionnées de manière à ce que leur hauteur corresponde à celle de l'écran de l'appareil. Pour remplir l'écran sans déformer les images, les diapositives sont recadrées à gauche et à droite.

Sur les grands écrans, les diapositives d'images sont redimensionnées afin que leur largeur corresponde à la largeur de la fenêtre du navigateur. Pour remplir la fenêtre sans déformer les images, les diapositives sont recadrées en bas.

L'exemple suivant montre la version de bureau et mobile de la même boutique en ligne :

La version de bureau du diaporama montre une image plus large que haute. La version mobile affiche la même image à la même hauteur, mais avec les deux tailles d'image tronquées de sorte que l'image s'adapte à l'écran étroit.

Afficher une image bord à bord pour une collection

Pour afficher une image bord à bord, votre collection doit contenir une image vedette.

Vous pouvez voir à quoi ressemble une image de collection bord à bord dans la boutique de démonstration de Brooklyn. L'image de collection affichée en haut est de 1405 x 800 px.

La version de bureau du diaporama montre une image plus large que haute.

La version mobile affiche la même image à la même hauteur, mais avec les deux tailles d'image tronquées pour s'adapter à l'écran étroit.

Définir une image pour les articles de blog

La première image d'un article de blog est utilisée comme image vedette pour la page de blog. Vous pouvez apprendre à ajouter une image à un article de blog dans Écrire des articles de blog.

Conseils sur les produits

Ajouter des badges de vente aux produits

Vous pouvez ajouter un badge de vente à un produit en définissant un prix de comparaison supérieur au prix habituel. Le badge apparaît sur l'image de ce produit sur les pages de collection.

Définir quels produits paraissent plus grands sur les pages de collection

Si vous définissez vos pages de collection pour afficher les produits dans un style de collage, certains de vos produits s'affichent avec de grandes images et certaines avec de petites images. La taille de l'image dépend de la commande des produits de leur collection. Vous pouvez modifier l'ordre des produits sur la page Collection de l'interface administrateur. Cliquez sur la collection que vous souhaitez modifier, puis dans la zone Products (Produits), sélectionnez Sort (Manuellement) dans le menu déroulant Sort (Trier). Ensuite, faites glisser et déposer les produits dans l'ordre dans lequel vous souhaitez qu'ils apparaissent sur votre boutique en ligne.

La page Collections de l'interface administrateur Shopify.

Sur six produits, l'image du premier et du sixième produits est de grande taille. Par exemple, les images des 1re, 6e, 7e, 12e, 13e et 18e images de la collection sont de grande taille :

Une page de collection qui présente les produits dans le style de collage. Les nombres apparaissant sur les produits illustrent le rapport entre l'ordre des produits et la taille des images.

Pour afficher une grille d'images de produits de la même taille, définissez vos collections pour afficher les produits dans le style de grille.

Défilement animé lors de la sélection d'une variante

Sur la page du produit, si la description du produit est suffisamment courte pour tenir sur l'écran sans qu'il faille la faire défiler, vous voyez un défilement animé lorsque vous sélectionnez une variante qui comporte une image. Si la description est trop longue pour tenir sur l'écran sans qu'il faille la faire défiler vers le bas, l'image du haut est simplement remplacée par l'image de la variante, sans défilement animé.

Si vous souhaitez afficher le défilement animé, assurez-vous que les descriptions de vos produits sont courtes.

Prêt(e) à commencer à vendre avec Shopify ?

Essayez gratuitement