Les galeries d'articles sont un excellent moyen de présenter les articles que vous proposez. Vous pouvez ajouter une galerie à n'importe quelle page du site, puis décider ce que vous souhaitez afficher : Tous vos articles ou une catégorie spécifique.
Choisissez entre une galerie Grid (une galerie avec plusieurs rangées) ou une galerie Slider que les clients peuvent faire défiler.
Dans cet article, découvrez comment :
Personnaliser une galerie Grid
Personnalisez les galeries Grid pour obtenir l’apparence qui convient à votre boutique.
Pour personnaliser une galerie Grid :
- Accédez à la page de l'Éditeur contenant la galerie que vous voulez personnaliser.
- Cliquez sur la galerie puis sur l'icône Paramètres
. - Choisissez les paramètres que vous souhaitez personnaliser :
Sélectionner les articles affichés
Cliquez sur l'onglet Catégorie pour sélectionner la catégorie d'articles que vous souhaitez afficher.
Suggestion : Par défaut, chaque galerie affiche la catégorie « Tous les articles ».
Cliquez sur l'onglet Affichage, puis cochez ou décochez les cases pour afficher ou masquer les éléments de la galerie.
Sélectionnez vos paramètres
Cliquez sur l'onglet Paramètres et personnalisez les options disponibles.
- Mode de défilement :
- Sélectionnez ce qui se passe lorsque les clients font défiler la page vers le bas. En savoir plus
- Activez le curseur Barre latérale collante pour garder les filtres visibles pendant le défilement. Si cette option est activée, personnalisez la distance de la barre latérale à partir du haut.
- Effet de survol de l'image : Paramétrez ce qui se passe lorsqu'un client survole un article.
- Bouton d'ajout au panier : Si vous avez activé le bouton dans l'onglet Affichage, personnalisez ce qui se passe lorsque l'on clique sur le bouton :
- Afficher un pop-up de succès : Une notification pop-up apparaît.
- Ouvrir le panier latéral : Le panier latéral (mini panier) s'ouvre sur le côté de l'écran.
- Aller sur la page Panier : Les clients sont dirigés directement vers la page Panier.
- Rester sur la page actuelle : Les clients restent sur la même page. Le bouton affiche une case à cocher pour indiquer que l'article a été ajouté avec succès.
Personnaliser la mise en page
Cliquez sur l'onglet Mise en page et personnalisez la galerie à l'aide des options suivantes :
- Général : Cliquez sur le curseur pour étirer la galerie sur le navigateur. Si cette option est activée, configurez la taille de la marge.
Remarque : Si cette option est activée, il est recommandé de sélectionner Responsive sous Comportement de la grille. - Grille d'articles :
Suggestion : Avec le paramètre Comportement de la grille fixe, les paramètres restent les mêmes quelle que soit la taille de l'écran de votre visiteur. Avec Responsive, le nombre de rangées et de colonnes s'ajuste à la taille de l'écran, mais ce paramètre ne fonctionne que lorsque la galerie est étirée sur toute la largeur. - Images de l'article : Sélectionnez l'affichage des images que vous avez importées. En savoir plus
- Bouton d'ajout au panier : Sélectionnez l'endroit où le bouton est placé.
Remarque : Si le bouton est placé sur l'image, le bouton Aperçu rapide ne sera pas affiché. - Infos de l'article : Sélectionnez une option de mise en page pour les cartes d'article et personnalisez-les.
- Options d'article : Cliquez sur les curseurs pour afficher uniquement les options de couleur ou limiter les options de couleur.
- Rubans : Sélectionnez l'endroit où le ruban apparaît et ajustez la marge intérieure.
Cliquez sur l'onglet Design et personnalisez la galerie à l'aide des options suivantes :
Suggestion : Les options varient en fonction des éléments que vous avez activés.
- Général : Sélectionnez l'arrière-plan qui apparaît derrière les cartes d'articles.
- Filtres et tri : Si vous avez activé les filtres ou le tri, personnalisez l'arrière-plan et le texte.
- Cartes d'article : Ajoutez un arrière-plan de carte, une bordure et personnalisez le rayon d'angle de l'image.
- Informations de l'article : Personnalisez le texte de la galerie.
- Quantité et options d'article : Si vous avez activé le bouton d'ajout au panier et le sélecteur de quantité ou les options d'article, vous pouvez en personnaliser le design.
- Rubans : Sélectionnez une forme de ruban, une couleur et une police. En savoir plus
- Nom et séparateur de prix : Personnalisez la ligne de séparation entre le nom du produit et le prix.
- Bouton d'ajout au panier : Sélectionnez un design pour chaque vue - par défaut et survol.
- Bouton Aperçu rapide : Si aperçu rapide est activé, personnalisez le design du bouton.
Suggestion : Pour personnaliser l' aperçu rapide lui-même, accédez à l'onglet Aperçu rapide . - En voir plus/Précédent ou Pagination : Personnalisez le design du « bouton En voir plus » ou de la « Pagination ».
Cliquez sur l'onglet Texte et personnalisez l'un des éléments suivants :
- Texte du bouton d'ajout au panier : Disponible si le bouton d'ajout au panier est activé.
- Texte du bouton de précommande : En savoir plus sur les précommandes d'articles.
- Message de rupture de stock : Un message s'affiche lorsque l'inventaire de l'article est à zéro.
- Boutons En voir plus/Précédent : Valable si vous avez choisi le bouton Plus d'articles ou le défilement infini comme comportement de défilement dans l'onglet Paramètres .
Cliquez sur l'onglet
Tri pour activer et personnaliser les filtres. Permettez aux clients de trier vos articles par prix, par nom ou selon leur nouveauté. Découvrez comment
ajouter et configurer des options de tri.
Activer et personnaliser l'aperçu rapide
L'aperçu rapide permet aux clients d'afficher les détails d'un article dans une fenêtre pop-up sans quitter la page de votre boutique.
Remarques :
- Si vous avez placé le bouton « Ajouter au panier » sur l'image, le bouton Aperçu rapide ne sera pas affiché.
- Suggestion : Pour visualiser le bouton Aperçu rapide en action, prévisualisez votre site ou consultez votre site en ligne.
Pour activer ou désactiver l'aperçu rapide :
- Cliquez sur l'onglet Affichage.
- Cochez ou décochez la case à côté du bouton Aperçu rapide.
Prochaines étapes :
- Pour personnaliser le bouton Aperçu rapide, accédez à l'onglet Design.
- Pour personnaliser le pop-up de l'aperçu rapide, accédez à l'onglet Aperçu rapide. En savoir plus.
Personnaliser une galerie Slider
Personnalisez votre galerie d'articles Slider pour obtenir le look parfait. Vous pouvez personnaliser le texte et le design de la galerie, choisir les éléments à afficher (ex. un bouton d'ajout au panier), et plus encore.
Pour personnaliser une galerie Slider :
- Cliquez sur la galerie d'articles Slider.
- Cliquez sur Paramètres.
- Sélectionnez l'action que vous souhaitez effectuer :
Sélectionner les articles affichés
Vous pouvez utiliser cette galerie de 3 façons :
- Affichez les articles sélectionnés :
Affichez une catégorie spécifique ou votre catégorie « Tous les articles ».
Par exemple, si vous souhaitez afficher vos nouveautés, créez une catégorie « Nouveautés » et placez-y tous vos nouveaux articles. Ensuite, sélectionnez cette catégorie dans le menu déroulant. - Affichez automatiquement vos articles les plus vendus :
Sélectionnez cette option pour afficher automatiquement vos éléments les plus vendus. Notez que si vous n'avez pas encore eu assez de ventes pour calculer les articles les plus vendus, les articles similaires ou votre catégorie « Tous les articles » est affichée. - Affichez les articles similaires :
Affichez les articles qui intéressent les clients, en fonction de ce qu'ils consultent. Vous pouvez sélectionner le type de galerie connexe que vous souhaitez afficher.
- De la même catégorie : Fonctionne mieux lorsqu'ils sont ajoutés à la page d'article, à la page de panier ou à la page de remerciement.
- Souvent achetés ensemble : Fonctionne mieux lorsqu'ils sont ajoutés à la page d'article.
- Souvent consultés ensemble : Fonctionne mieux lorsqu'ils sont ajoutés à la page d'article.
Sélectionner les éléments à afficher
Cliquez sur l'onglet Affichage, puis cochez ou décochez les cases pour afficher ou masquer les éléments de la galerie.
Personnaliser les paramètres
Cliquez sur l'onglet Paramètres et personnalisez les options suivantes :
- Comportement du curseur : Activez la boucle infinie pour permettre aux clients de continuer à faire défiler les articles.
- Effet de survol de l'image : Paramétrez ce qui se passe lorsqu'un client survole un article.
- Bouton d'ajout au panier : Si vous avez activé le bouton dans l'onglet Affichage, personnalisez ce qui se passe lorsque l'on clique sur le bouton :
- Afficher un pop-up de succès : Une notification pop-up apparaît.
- Ouvrir le panier latéral : Le panier latéral (mini panier) s'ouvre sur le côté de l'écran.
- Aller sur la page Panier : Les clients sont dirigés directement vers la page Panier.
- Rester sur la page actuelle : Les clients restent sur la même page. Le bouton affiche une case à cocher pour indiquer que l'article a été ajouté avec succès.
Personnaliser la mise en page
Cliquez sur l'onglet Mise en page et personnalisez la galerie à l'aide des options suivantes :
- Général : Cliquez sur le curseur pour étirer la galerie sur le navigateur. Si cette option est activée, configurez la taille de la marge.
Remarque : Si cette option est activée, il est recommandé de sélectionner Responsive sous Comportement de la grille. - Titre de la galerie : Modifiez l'alignement du titre
- Grille d'article :
Suggestion : Avec le paramètre Comportement de la grille fixe, les paramètres restent les mêmes quelle que soit la taille de l'écran de votre visiteur. Avec responsive, le nombre de colonnes s'ajuste à la taille de l'écran, mais ce paramètre ne fonctionne que lorsque la galerie est étirée sur toute la largeur. - Images de l'article : Sélectionnez l'affichage des images que vous avez importées. En savoir plus
- Bouton d'ajout au panier : Sélectionnez l'endroit où le bouton est placé.
Remarque : Si le bouton est placé sur l'image, le bouton Aperçu rapide ne sera pas affiché. - Infos de l'article : Sélectionnez une mise en page et un alignement pour les informations de l'article.
- Rubans : Sélectionnez l'endroit où le ruban apparaît et ajustez la marge intérieure.
- Flèches de navigation : Personnalisez l'emplacement des flèches.
- Points de pagination : Sélectionnez une option d'alignement et personnalisez la distance depuis la galerie.
Cliquez sur l'onglet Texte et personnalisez l'un des éléments suivants :
- Texte du titre de la galerie : Disponible si le titre est activé.
- Texte du bouton Ajouter au panier : Disponible si le bouton d'ajout au panier est activé.
- Texte du bouton de pré-commande : En savoir plus sur la pré-commande d'articles.
- Message de rupture de stock : Un message s'affiche lorsque l'inventaire de l'article est à zéro.
Cliquez sur l'onglet Design et personnalisez la galerie à l'aide des options suivantes :
Suggestion : Les options varient en fonction des fonctionnalités que vous avez activées dans les onglets Paramètres et Aperçu rapide.
- Général : Sélectionnez une couleur d'arrière-plan pour la galerie, choisissez une police et une couleur de titre, et personnalisez les flèches de la galerie Slider.
- Cartes d'article : Sélectionnez une couleur d'arrière-plan pour les articles, ajoutez une bordure et personnalisez le texte de la galerie.
- Infos de l'article : Personnalisez les polices des informations de l'article que vous affichez.
- Quantité et options d'article : Personnalisez le sélecteur de quantité et l'affichage des options d'article.
- Rubans : Sélectionnez une forme de ruban, une couleur et une police. En savoir plus
- Flèches denavigation : Personnalisez le design des flèches de navigation.
- Points de pagination : Personnalisez la couleur et l'opacité des points de pagination.
- Nom et séparateur de prix : Personnalisez la ligne de séparation entre le nom du produit et le prix.
- Bouton Aperçu rapide : Si aperçu rapide est activé, personnalisez le design du bouton.
Suggestion : Pour personnaliser l' aperçu rapide lui-même, accédez à l'onglet Aperçu rapide . - Bouton d'ajout au panier : Personnalisez l'apparence du bouton par défaut et le moment où une souris le survole.
Activer et personnaliser l'aperçu rapide
L'aperçu rapide permet aux clients d'afficher les détails d'un article dans une fenêtre pop-up sans quitter la page de votre boutique.
Remarques :
- Si vous avez placé le bouton « Ajouter au panier » sur l'image, le bouton Aperçu rapide ne sera pas affiché.
- Suggestion : Pour visualiser le bouton Aperçu rapide en action, prévisualisez votre site ou consultez votre site en ligne.
Pour activer ou désactiver l'aperçu rapide :
- Cliquez sur l'onglet Affichage.
- Cochez ou décochez la case à côté du bouton Aperçu rapide.
Prochaines étapes :
- Pour personnaliser le bouton Aperçu rapide, accédez à l'onglet Design.
- Pour personnaliser le pop-up de l'aperçu rapide, accédez à l'onglet Aperçu rapide. En savoir plus.
Personnaliser une galerie sur mobile
Assurez-vous que vos galeries sont parfaites lorsque des clients les consultent sur un appareil mobile. Vous pouvez ajuster le design pour l'adapter aux petits écrans et permettre aux clients d'ajouter rapidement des articles au panier sans quitter la galerie.
- Accédez à votre Éditeur.
- Cliquez sur l'icône Passer au mode mobile
en haut de l'Éditeur. - Accédez à la page contenant la galerie Grid ou la galerie Slider que vous souhaitez personnaliser.
- Cliquez sur la galerie.
- Cliquez sur Paramètres.
- Personnalisez la galerie à l'aide des options disponibles.
