Fonctionnalités de la boutique en ligne

Vous pouvez ajouter des fonctionnalités à n’importe quelle page de votre boutique en ligne en utilisant des sections. Vous pouvez choisir, ajouter et configurer des sections avec des images, du texte, les couleurs de la marque, etc.

Certaines pages auront des sections par défaut, telles que la barre d’annonces, l’en-tête et le pied de page. Ces sections apparaissent sur chaque page.

Barre d’annonces

La barre d’annonces vous permet de communiquer des informations importantes à vos clients de n’importe quelle page, et de personnaliser jusqu’à 12 blocs d’annonces différents. Vous pouvez également ajouter un sélecteur de langue, un sélecteur de pays ou de région et des icônes de médias sociaux à votre barre d’annonces.

Si vous avez plusieurs annonces, vous pouvez automatiser leur rotation ou laisser vos clients les parcourir manuellement au moyen des boutons à chevrons.

Paramètres de section

Paramètres de la section de la barre d’annonces
Paramètre Description
Nuancier de couleurs Ensemble des couleurs que vous pouvez appliquer à cette section. En savoir plus sur les nuanciers de couleurs.
Afficher la ligne de séparation Affiche une ligne pour séparer visuellement la barre d’annonces du contenu de la page.
Icônes de médias sociaux Affiche les icônes de médias sociaux reliés à vos comptes de médias sociaux.
Rotation automatique des annonces Activez ce paramètre pour automatiser la rotation de vos annonces.
Changer de diapositive toutes les Sélectionnez la fréquence de rotation des annonces.
Activer le sélecteur de pays/région Ajoutez un sélecteur dans lequel un client a la possibilité de choisir les pays et les régions que vous avez activés dans vos paramètres de paiement, afin de pouvoir consulter les prix de vos produits dans la devise de son choix.
Activer le sélecteur de langue Ajoutez un sélecteur dans lequel un client a la possibilité de choisir les pays et les régions que vous avez activés dans vos paramètres de langue, afin de pouvoir parcourir votre boutique dans la langue de son choix.

Bloc d’annonce

Vous pouvez ajouter un texte et un lien menant à un bloc d’annonces pour le rendre cliquable et diriger les clients vers une page spécifique.

Paramètres du bloc d’annonce dans la section de la barre d’annonces
Paramètre Description
Texte L’annonce que vous souhaitez afficher pour vos client(e)s.
Lien Lien vers la page où vous souhaitez rediriger vos clients s’ils cliquent sur la barre d’annonces.

L’en-tête s’affiche sur toutes les pages de votre boutique en ligne.

Paramètres de section

Paramètres de la section du titre
Paramètre Description
Emplacement du logo du bureau

L'endroit où le logo s’affiche dans l’en-tête lorsqu’un(e) client(e) affiche le site sur un grand écran. La position du logo est automatiquement optimisée pour les appareils mobiles.

  • Au milieu à gauche - Affiche le logo en ligne avec le menu principal, centré verticalement et aligné à gauche.
  • En haut à gauche - Affiche le logo au-dessus du menu principal et aligne le logo et les éléments de menu sur la gauche.
  • En haut au centre (par défaut) - Affiche le logo au-dessus du menu principal et aligne les éléments du logo et du menu au centre.
Menu Le menu à utiliser comme menu principal. Cliquez sur Modifier pour sélectionner un menu différent.
Type de menu sur ordinateur Utilisez le menu déroulant pour choisir un type de menu pour ordinateur :
  • Menu déroulant – affiche le contenu du menu de deuxième niveau, le troisième niveau demeurant réduit jusqu’à ce que l’utilisateur clique sur l’élément de deuxième niveau correspondant. Le type de menu est automatiquement optimisé pour les mobiles.
  • Méga menu – affiche tout le contenu du menu des deuxième et troisième niveaux au premier clic. Le type de menu est automatiquement optimisé pour les mobiles.
  • Tiroir – affiche le menu du tiroir au moyen d’une icône de menu burger qui, lorsque l’utilisateur clique dessus, affiche tous les éléments de menu du premier niveau. Ceux-ci sont cliquables à leur tour, ce qui permet d’ouvrir d’autres niveaux de navigation (niveaux deux et trois).
En‑tête fixe

Déterminez si vous souhaitez utiliser un en-tête fixe et comment vous souhaitez qu’il s’affiche.

  • Aucun : l’en-tête ne se déplace pas à mesure que le client fait défiler la page.
  • Lors du défilement vers le haut : l’en-tête s’affiche lorsque le client fait défiler la page vers le haut.
  • Toujours : l’en-tête s’affiche toujours lorsque le client fait défiler la page vers le haut ou vers le bas.
  • Toujours, réduire la taille du logo : l’en-tête s’affiche toujours lorsque le client fait défiler la page vers le haut ou vers le bas. La taille du logo est réduite de 25 % lorsque le client fait défiler la page.
Afficher la ligne de séparation Affiche une ligne pour séparer visuellement l’en-tête du contenu de la page.
Nuancier de couleurs Ensemble des couleurs que vous pouvez appliquer à cette section. En savoir plus sur les nuanciers de couleurs.
Activer le sélecteur de pays/région Ajoute un sélecteur dans lequel un client a la possibilité de choisir les pays et les régions que vous avez activés dans vos paramètres de paiement, afin de pouvoir consulter les prix de vos produits dans la devise de son choix.
Activer le sélecteur de langue Ajoute un sélecteur dans lequel un client a la possibilité de choisir les pays et les régions que vous avez activés dans vos paramètres de langue, afin de pouvoir parcourir votre boutique dans la langue de son choix.
Position du logo sur mobile

Choisissez l’endroit où le logo s’affiche sur un appareil mobile.

  • Au centre : le logo s’affiche au centre de l’en-tête.
  • À gauche : le logo s’affiche à gauche de l’en-tête.
Espacement Ajoutez un espacement sous votre en-tête. Utilisez le curseur de plage pour ajouter entre 0 px et 100 px d’espace à la marge inférieure.
Marge de la section Ajoutez un espacement en haut ou en bas de l'en-tête. Utilisez le curseur de plage pour ajouter entre 0 et 100 pixels d'espace en haut ou en bas de votre en-tête.

Bloc d’en-tête

Vous pouvez ajouter les blocs suivants dans votre section En-tête.

Paramètres du bloc d’application dans la section d’en-tête
Paramètre Description
Applications Ajoutez une application compatible avec Online Store 2.0. Téléchargez ainsi jusqu’à 3 applications. Elles seront placées à gauche de l’icône du panier et leur taille sera limitée à 44 px par 44 px.

Le pied de page s’affiche sur toutes les pages de votre thème.

Paramètres de section

Paramètres de la section du pied de page
Paramètre Description
Nuancier de couleurs Ensemble des couleurs que vous pouvez appliquer à cette section. En savoir plus sur les nuanciers de couleurs.
Afficher l'inscription à la liste de diffusion Comprend un formulaire d’inscription à la liste de diffusion où les client(e)s peuvent s’abonner à votre newsletter et à votre marketing.
En-tête Titre du formulaire Afficher l’inscription à la liste de diffusion. Si l’option Afficher l’inscription à la liste de diffusion n’est pas activée, ce titre ne s’affiche pas. Utilisez les boutons pour mettre le texte en gras ou en italique, ou pour ajouter un lien.
Suivre sur Shop Affichez un bouton de suivi pour votre boutique en ligne dans l’application Shop. En savoir plus sur le suivi sur Shop.
Icônes de médias sociaux Affiche les icônes de toutes les plateformes de médias sociaux pour lesquelles vous avez saisi un lien de profil dans les paramètres de votre thème.
Activer le sélecteur de pays/région Ajoute un sélecteur dans lequel un client a la possibilité de choisir les pays et les régions que vous avez activés dans vos paramètres de paiement, afin de pouvoir consulter les prix de vos produits dans la devise de son choix.
Activer le sélecteur de langue Ajoute un sélecteur dans lequel un client a la possibilité de choisir les pays et les régions que vous avez activés dans vos paramètres de langue, afin de pouvoir parcourir votre boutique dans la langue de son choix.
Afficher les icônes de paiement Affiche les icônes des moyens de paiement activés dans votre boutique. Les icônes peuvent ne pas être disponibles pour un moyen de paiement lorsqu’une icône n’a pas été enregistrée par le fournisseur de services de paiement. Lorsqu’un(e) client(e) visite votre boutique, ces icônes sont filtrées de manière à afficher uniquement les moyens de paiement pris en charge dans la région et la devise du client ou de la cliente actuel(le).
Afficher les liens des politiques Affiche les icônes des liens menant à vos politiques à côté de vos informations sur les droits d’auteur. Pour générer des liens de politiques, accédez à Paramètres > Politiques dans votre interface administrateur Shopify. En savoir plus sur l’ajout des politiques de votre boutique.
Espacement Ajoutez de l’espace au-dessus de votre pied de page. Utilisez le curseur de plage pour ajouter entre 0 px et 100 px d’espace à la marge supérieure.
Marge de la section Ajoutez de l’espace en haut ou en bas du pied de page. Utilisez le curseur de plage pour ajouter entre 0 px et 100 px d’espace en haut ou en bas de votre pied de page.

Bloc de menu

Paramètres du bloc de menu dans la section pied de page
Paramètre Description
En-tête Titre du bloc. Utilisez les boutons pour mettre le texte en gras ou en italique, ou pour ajouter un lien.
Menu Menu à afficher dans le bloc. Seuls les éléments de menu de premier niveau s’affichent dans le pied de page, de sorte que les types de menus déroulants ne s’afficheront pas comme prévu.

Bloc d’informations sur la marque

Les informations relatives à votre marque sont gérées dans les paramètres de votre thème. En savoir plus sur les informations de marque.

Paramètres du bloc d’informations sur la marque dans la section du pied de page
Paramètre Description
Afficher les icônes des réseaux sociaux Affiche les icônes de toutes les plateformes de médias sociaux pour lesquelles vous avez saisi un lien de profil dans les paramètres de votre thème.

Bloc de texte

Vous pouvez utiliser le bloc de texte pour mettre en évidence des informations importantes, telles que les détails, les promotions ou les coordonnées de votre boutique.

Paramètres du bloc de texte dans la section pied de page
Paramètre Description
En-tête Titre du bloc. Utilisez les boutons pour mettre le texte en gras ou en italique, ou pour ajouter un lien.
Sous-texte Texte à afficher dans le bloc.

Bloc d’image

Paramètres du bloc d’image dans la section du pied de page
Paramètre Description
Image L’image à afficher dans le bloc.
Largeur d'image Définit la largeur de l’image. Peut être un multiple de 5, de 50 px à 200 px. La valeur par défaut est de 100 px.
Alignement de l’image sur un grand écran

Aligne l’image dans le bloc :

  • À gauche - Aligne l’image à gauche du bloc.
  • Centre (par défaut) - Aligne l’image au centre du bloc.
  • À droite - Aligne l’image à droite du bloc.

Articles de blog

Si vous avez un blog sur votre boutique Shopify, vous pouvez utiliser une section d’article de blog pour mettre en évidence certains des articles qu'il contient. Pour chaque article du blog, la section Articles de blog affiche les 55 premiers mots d'un extrait de l'article. En l'absence d’extrait, ce sont les 30 premiers mots de l’article qui s’affichent.

Paramètres de section

Paramètres de la section des articles de blog
Paramètre Description
En-tête Titre de la section. Utilisez les boutons pour mettre le texte en gras ou en italique, ou pour ajouter un lien.
Taille du titre Modifiez la taille du texte du titre. Choisissez entre petit, moyen ou grand.
Blog De quel blog vous souhaitez afficher des articles de blog. Par défaut, pour le premier blog par ordre alphabétique sur votre page de blogs.
Articles de blog Le nombre d’articles de blog que vous souhaitez afficher dans la section. Maximum : 4 articles.
Nombre de colonnes sur ordinateur Nombre de colonnes à afficher sur ordinateur. Minimum : 1. Maximum : 4.
Nuancier de couleurs Ensemble des couleurs que vous pouvez appliquer à cette section. En savoir plus sur les nuanciers de couleurs.
Afficher les images vedettes Affiche l’image vedette de l’article de blog. Rapport d’aspect d’image suggéré : 3:2.
Afficher la date Affiche la date à laquelle l’article de blog a été créé.
Afficher l'auteur Affiche l’auteur de l’article de blog.
Activer le bouton « Tout afficher » si le blog comprend plus d'articles que ceux affichés Si le blog contient plus d’articles de blog que définis dans le champ Article de blog, le bouton « Afficher tout » apparaît, ce qui a pour effet d’afficher les client(e)s sur la page du blog.
Marge de la section Ajoutez un espacement en haut ou en bas de la section de l’article de blog. Utilisez le curseur de plage pour ajouter entre 0 px et 100 px d’espace au-dessus ou au-dessous de la section de l’article de blog.

Sélectionner un blog

  1. Dans votre éditeur de thème, cliquez sur le titre de la section des articles de blog.
  2. Dans la section Blog, cliquez sur Modifier.
  3. Sélectionnez le blog.
  4. Cliquez sur Sélectionner, puis sur Enregistrer

Collage

Vous pouvez créer un collage d’images, de produits, de collections et de vidéos. Chaque section Collage contient trois blocs. Par défaut, la section contient un bloc d’image, un bloc de produit et un bloc de collection. En supprimant l’un des blocs, vous pouvez ajouter un bloc de vidéo.

Pour créer un collage de plus de trois blocs, ajoutez des sections de collage supplémentaires sous la première et n’incluez pas de valeur de titre dans les sections de collage inférieures. Les sections de collage donneront l'impression de former une section unique.

Les rapports d’aspect recommandés pour toutes les images de cette section sont de 2:3 ou 1:1.

Paramètres de section

Paramètres de la section de collage
Paramètre Description
En-tête Titre de la section. Utilisez les boutons pour mettre le texte en gras ou en italique, ou pour ajouter un lien.
Taille du titre Modifiez la taille du texte du titre. Choisissez entre petit, moyen ou grand.
Mise en page du bureau

Comment s’affiche le support multimédia de collage sur un ordinateur de bureau.

  • Grand bloc de gauche (par défaut) - Le premier bloc de la section s’affiche à gauche et est plus grand que tous les autres blocs.
  • Grand bloc droite – Le dernier bloc de la section s’affiche à droite et dans une taille supérieure à celle des autres blocs.
Mise en page sur mobile

Comment les blocs s’affichent sur les appareils mobiles.

Collage - Affiche les images dans une mise en page de collage :
  • Si l'option Grand bloc gauche est activée dans Mise en page sur ordinateur, le premier bloc de la section s'affiche en haut et dans une taille supérieure à celle des autres blocs.
  • Si l'option Grand bloc droite est activée dans Mise en page sur ordinateur, le dernier bloc de la section s'affiche en bas et dans une taille supérieure à celle des autres blocs.
Colonne – Affiche tous les supports multimédia de la même taille et dans une colonne.
Nuancier de couleurs Ensemble des couleurs que vous pouvez appliquer à cette section. En savoir plus sur les nuanciers de couleurs.
Marge de la section Ajoutez un espacement en haut ou en bas de la section du collage. Utilisez le curseur de plage pour ajouter entre 0 px et 100 px d’espace en haut ou en bas de la section.

Bloc de vidéo

Paramètres du bloc vidéo de la section collage
Paramètre Description
Image de couverture Image qui s’affiche avant qu’un client ne lance la vidéo. Vous pouvez importer une image de couverture personnalisée à partir de votre interface administrateur Shopify.
URL Le lien YouTube ou Vimeo vers la vidéo. La vidéo doit être accessible au public. La vidéo sera diffusée dans une fenêtre pop-up.
Texte alternatif de la vidéo Le texte alternatif de la vidéo. Décrit le contexte et l’objet de la vidéo pour la clientèle utilisant des lecteurs d’écran.

Bloc de produit

Paramètres du bloc de produit dans la section du collage
Paramètre Description
Produit Le produit que vous souhaitez afficher.
Afficher la deuxième image en survol Lorsqu'un client survole l'image du produit avec son curseur, ce paramètre permet à la deuxième image du produit (s'il en existe une) de s'afficher.

Bloc de collection

Paramètres du bloc de collection dans la section du collage
Paramètre Description
Collection La collection que vous souhaitez afficher.

Bloc d’image

Paramètres du bloc d'image dans la section du collage
Paramètre Description
Image L’image de la section. Cliquez sur Sélectionner une image ou sur le bouton Changer pour modifier ou supprimer l’image.
Modifier le texte alternatif Ajoutez une brève description de l’image pour améliorer le référencement naturel (SEO) et décrire l’image pour les clients utilisant des lecteurs d’écran.

Contenu réductible

Dans une section en contenu réductible, on peut réduire ou développer des rangés pour afficher leur contenu, et placer une image à gauche ou à droite du contenu réductible.

Paramètres de section

Les paramètres de la section en contenu réductible
Paramètre Description
Légende Une légende facultative pour la section en contenu réductible. S’affiche au-dessus du titre de la section.
En-tête Titre de la section de contenu réductible. Utilisez les boutons pour mettre le texte en gras ou en italique, ou pour ajouter un lien.
Taille du titre Modifiez la taille du texte du titre. Choisissez entre petit, moyen ou grand.
Alignement du titre Choisissez l’alignement du titre de la section. Les options sont à gauche, au centre (par défaut) ou à droite.
Mise en page

Sélectionnez une mise en page pour votre contenu réductible :

  • Aucun contenant (par défaut)
  • Contenant de rangée - Chaque rangée réductible est contenue dans une case grisée
  • Contenant de section - Contient la totalité de la section en contenu réductible dans une case grisée
Nuancier de couleurs Ensemble des couleurs que vous pouvez appliquer à cette section. En savoir plus sur les nuanciers de couleurs.
Nuancier de couleurs du contenant Ensemble des couleurs que vous pouvez appliquer au conteneur. En savoir plus sur les nuanciers de couleurs. Le nuancier de couleurs sélectionné s’affiche uniquement lorsque l’option Mise en page est définie sur le conteneur Rangée ou Section.
Ouvrir d'abord la rangée réductible Quand la case est cochée, la première rangée de votre contenu réductible est développée par défaut.
Image L’image de la section. Cliquez sur Sélectionner une image ou sur le bouton Changer pour modifier ou supprimer l’image.
Modifier le texte alternatif Ajoutez une brève description de l’image pour améliorer le référencement naturel (SEO) et décrire l’image pour les clients utilisant des lecteurs d’écran.
Rapport d'image Le format de l'image de la section :
  • Adapter à l'image (par défaut) - Utilise le format original des images. Ceci empêche leur recadrage.
  • Petit
  • Grand
Mise en page du bureau Choisissez si l’image ou les rangées réductibles apparaissent en premier. Par défaut, c'est le texte qui apparaît en premier. Sur mobile, l’image apparaît toujours en premier.
Marge de la section Ajoutez un espacement en haut ou en bas du contenu réductible. Utilisez le curseur de plage pour ajouter entre 0 px et 100 px d’espace au-dessus ou au-dessous de la section du contenu réductible.

Bloc de rangée réductible

Les paramètres du bloc de rangée réductible
Paramètre Description
En-tête Le titre de la rangée réductible.
Icône Choisissez une icône dans la liste déroulante à afficher devant le titre du contenu réductible. L’icône de coche est sélectionnée par défaut.
Contenu de la rangée Contenu de la rangée réductible. Le contenu peut être formaté ou inclure des liens URL. Cette fonctionnalité peut être utilisée en association avec Contenu de la rangée depuis une page.
Contenu de la rangée depuis une page Vous pouvez insérer du contenu existant sur une autre page dans une rangée réductible. Cliquez sur Modifier pour sélectionner ou supprimer une page. Cette fonctionnalité peut être utilisée en association avec Contenu de la rangée.

Liste de collections

Vous pouvez ajouter une liste de collections que vous souhaitez mettre en évidence. Vous pouvez ajouter jusqu’à 16 blocs de collection à une liste de collections.

Paramètres de section

Paramètres de la section de la liste de collections
Paramètre Description
En-tête Titre de la section. Utilisez les boutons pour mettre le texte en gras ou en italique, ou pour ajouter un lien.
Taille du titre Modifiez la taille du texte du titre. Choisissez entre petit, moyen ou grand.
Rapport d'image Le rapport d’image des images vedettes des collections :
  • Adapter à l'image – utilise le rapport d'aspect des images. Cela empêche leur recadrage.
  • Portrait - Recadre les images à un rapport de 2:3.
  • Carré (par défaut) - Recadre les images à un rapport de 1:1.
Nombre de colonnes sur ordinateur Nombre de colonnes à afficher sur ordinateur. Minimum : 1. Maximum : 5.
Nuancier de couleurs Ensemble des couleurs que vous pouvez appliquer à cette section. En savoir plus sur les nuanciers de couleurs.
Activer le bouton « Tout afficher » si la liste comprend plus de collections que celles affichées Affiche un bouton « Afficher tout » qui prend les client(e)s en compte dans la liste complète des collections.
Nombre de colonnes sur mobile Définissez une mise en page de colonne spécifique pour appareils mobiles. Choisissez entre une ou deux colonne(s).
Activer le balayage sur mobile Modifie l'affichage mobile d'une colonne à une ligne, où les clients peuvent balayer latéralement pour voir plus de blocs de collection.
Marge de la section Ajoutez un espacement en haut ou en bas de la liste des collections. Utilisez le curseur de plage pour ajouter entre 0 px et 100 px d’espace au-dessus ou au-dessous de la section de la collection.

Choisir des collections

  1. Dans votre éditeur de thème, cliquez sur le bloc Collection à qui vous souhaitez ajouter une collection.
  2. Cliquez sur Sélectionner une collection.
  3. Cliquez sur une collection, puis sur Sélectionner.

Formulaire de contact

Tous les formulaires de contact envoyés sont livrés à l’adresse e-mail de contact de votre boutique. Vous pouvez changer l’adresse e-mail de contact à la page des paramètres de notification de votre interface administrateur Shopify.

Le formulaire présente les champs suivants :

  • Nom
  • E-mail (obligatoire)
  • Numéro de téléphone
  • Commentaire

Paramètres de section

Les paramètres de la section du formulaire de contact
Paramètre Description
En-tête Titre de la section. Utilisez les boutons pour mettre le texte en gras ou en italique, ou pour ajouter un lien.
Taille du titre Modifiez la taille du texte du titre. Choisissez entre petit, moyen ou grand.
Nuancier de couleurs Ensemble des couleurs que vous pouvez appliquer à cette section. En savoir plus sur les nuanciers de couleurs.
Marge de la section Ajoutez de l’espacement en haut ou en bas du formulaire de contact. Utilisez le curseur de plage pour ajouter entre 0 px et 100 px d’espace au-dessus ou au-dessous de la section du formulaire de contact.

Code Liquid personnalisé

Vous pouvez ajouter votre propre code Liquid pour créer une section personnalisée.

  • Ajoutez les extraits d’applications fournis dans les instructions des applications que vous avez téléchargées pour présenter ces dernières sur vos pages.
  • Ajoutez un code Liquid personnalisé directement dans l’éditeur.

Paramètres de section

Les paramètres de la section liquid personnalisée
Paramètre Description
Liquid personnalisé Ajoutez des extraits d'application ou autre code Liquid personnalisé pour créer des personnalisations avancées.
Nuancier de couleurs Ensemble des couleurs que vous pouvez appliquer à cette section. En savoir plus sur les nuanciers de couleurs.
Marge de la section Ajoutez un espacement en haut ou en bas de la section Liquid personnalisée. Utilisez le curseur de plage pour ajouter entre 0 px et 100 px d’espace au-dessus ou au-dessous de la section Liquid personnalisée.

Bannière d’inscription à la liste de diffusion

Vous pouvez ajouter une section à votre page de mot de passe, où les clients peuvent saisir leur adresse e-mail pour être informés lorsque votre boutique est ouverte. Chaque abonnement par e-mail crée un compte client.

La section inclut trois blocs par défaut :

  • En-tête
  • Sous-titre
  • Formulaire électronique

Paramètres de section

Les paramètres de la section de bannière d'inscription à la liste de diffusion
Paramètre Description
Image de fond L’image de fond de la bannière d’inscription à la liste de diffusion. Cliquez sur Modifier pour remplacer ou supprimer l’image. Lorsque l’image est supprimée, l’image par défaut du thème est affichée. Masquez cette image en décochant la case Afficher l'image de fond.
Modifier le texte alternatif Cliquez ici pour définir le texte alternatif de l'image pour l’optimisation des moteurs de recherche et pour décrire l’image pour les clients utilisant des lecteurs d’écran.
Opacité de la superposition d'images Atténue la luminosité de l'image de la bannière d'inscription à la liste de diffusion avec une superposition. Utilisez le curseur pour définir l'opacité de la superposition. Celle-ci est réglée à 0 % par défaut.
Afficher l'image de fond Cochez cette case pour afficher l’image de fond sur votre bannière d’inscription à la liste de diffusion.
Hauteur de la bannière

Définissez la hauteur de l’image de votre bannière d’inscription à la liste de diffusion à l’aide du menu déroulant. Choisissez entre Adapter à l’image, petite, moyenne (par défaut) ou grande.

Position du contenu sur ordinateur Définissez la position de la bannière d’inscription à la liste de diffusion sur ordinateur. Choisissez entre en haut, au milieu ou en bas, et à droite, à gauche ou au centre. L’option par défaut est au milieu et au centre.


Sur ordinateur, la zone de texte recouvre partiellement l'image. Sur mobile, la zone de texte s'affiche en-dessous de l'image.

Afficher le conteneur sur ordinateur Place le texte de l’image de la bannière d’inscription à la liste de diffusion dans une zone de texte sur l’image pour les clients accédant à la boutique sur ordinateur.
Alignement du contenu sur ordinateur Définissez l’alignement du texte de la bannière avec image sur ordinateur. Choisissez entre droite, gauche ou centre (par défaut).
Nuancier de couleurs Ensemble des couleurs que vous pouvez appliquer à cette section. En savoir plus sur les nuanciers de couleurs.


Sur ordinateur, le nuancier de couleurs sélectionné n’est visible que lorsque l’option Afficher le conteneur sur ordinateur est sélectionnée. Sur mobile, le nuancier de couleurs sélectionné n’est visible que lorsque l’option Afficher le contenu sous l’image sur mobile est sélectionnée.

Alignement du contenu sur mobile Définissez l’alignement du texte de la bannière avec image sur mobile. Choisissez entre droite, gauche ou centre (par défaut).
Afficher le contenu en-dessous sur mobile Le contenu s'affiche sous l’image de la bannière d’inscription à la liste de diffusion sur mobile.

Bloc de titre

Les paramètres du bloc de titre dans la section d'inscription à la liste de diffusion
Paramètre Description
En-tête Le titre de la section.
Taille du titre Modifiez la taille du texte du titre. Choisissez entre petit, moyen ou grand.

Bloc de sous-titre

Les paramètres du bloc de sous-titre dans la section d'inscription à la liste de diffusion
Paramètre Description
Description La description de la section.
Style de texte Modifie le style du texte dans la section d’inscription à la liste de diffusion. Choisissez entre Corps (par défaut) et Sous-titre.

Inscription à la liste de diffusion

Vous pouvez ajouter une section où les client(e)s peuvent saisir leur adresse e-mail et s’abonner à votre newsletter ou à votre marketing. Lorsqu’un(e) client(e) s’abonne, un compte client(e) est créé dans votre interface administrateur Shopify.

La section inclut trois blocs par défaut :

  • En-tête
  • Sous-titre
  • Formulaire électronique

Paramètres de section

Paramètres de la section d’inscription à la liste de diffusion
Paramètre Description
Nuancier de couleurs Ensemble des couleurs que vous pouvez appliquer à cette section. En savoir plus sur les nuanciers de couleurs.
Rendre la section pleine largeur Agrandit la section sur toute la largeur de la fenêtre du navigateur.

Bloc de titre

Les paramètres du bloc de titre dans la section d'inscription à la liste de diffusion
Paramètre Description
En-tête Titre de la section. Utilisez les boutons pour mettre le texte en gras ou en italique, ou pour ajouter un lien.
Taille du titre Modifiez la taille du texte du titre. Choisissez entre petit, moyen ou grand.

Bloc de sous-titre

Paramètres du bloc de sous-titre dans la section de la liste de collections
Paramètre Description
Description La description de la section.

Formulaire électronique

Le bloc de formulaire d’e-mail affiche un champ où un(e) client(e) peut saisir une adresse e-mail pour s’inscrire à votre marketing. Ce bloc ne comporte pas de paramètres personnalisables.

Vous pouvez ajouter une section qui affiche les produits d’une collection.

Paramètres de section

Paramètres de la section de la collection en vedette
Paramètre Description
En-tête Titre de la section. Utilisez les boutons pour mettre le texte en gras ou en italique, ou pour ajouter un lien. Cliquez sur le bouton de la source dynamique pour insérer une source dynamique comme titre de la section.
Taille du titre Modifiez la taille du texte du titre. Choisissez entre petit, moyen ou grand.
Description Saisissez un texte descriptif pour la collection en vedette. Vous pouvez formater le texte pour qu’il soit gras, italique ou pour inclure un lien. Cliquez sur le bouton source dynamique pour insérer une source dynamique pour la description de la collection en vedette.
Afficher la description de la collection à partir de l’interface administrateur Si vous cochez cette case, vous utiliserez la description de la collection que vous avez ajoutée à la collection dans votre interface administrateur Shopify, au lieu du texte saisi dans le champ Description ci-dessus.
Style de description Utilisez le menu déroulant pour choisir un style pour la description de votre collection en vedette. Les options sont le corps (par défaut), le sous-titre ou les majuscules.
Collection De quelle collection souhaitez-vous afficher vos produits ? Cliquez sur Modifier pour supprimer ou modifier la collection.
Quantité maximale de produits à afficher Nombre de produits de la collection à afficher. Minimum : 2. Maximum : 25.
Nombre de colonnes sur ordinateur Nombre de colonnes à afficher sur ordinateur. Minimum : 1. Maximum : 5.
Rendre les produits pleine largeur Cochez la case pour afficher les produits dans toute la largeur de la fenêtre, quel que soit le paramètre de largeur de la page.
Activer le bouton « Tout afficher » si la collection comprend plus de produits que ceux affichés Si la collection contient plus de produits que définis dans le champ Maximum de produits à afficher, un bouton « Afficher tout » apparaît, ce qui a pour effet d’afficher les client(e)s à la page des collections.
Style « Tout afficher » Choisissez entre un lien, un bouton plein et un bouton en relief.
Activer le carrousel sur ordinateur Cochez la case pour afficher les produits dans un carrousel sur les écrans d’une largeur supérieure à 989 pixels.
Nuancier de couleurs Ensemble des couleurs que vous pouvez appliquer à cette section. En savoir plus sur les nuanciers de couleurs.
Rapport d'image Format des images de produit :
  • Adapter à l’image (par défaut) – utilise le rapport d’aspect des images. Cette action empêche leur recadrage.
  • Portrait - Recadre les images à un rapport de 2:3.
  • Carré - Recadre les images à un rapport de 1:1.
Forme d’image Choisissez l’une des formes d’image suivantes pour vos images de produits :
  • Forme par défaut : adopte une forme rectangulaire pour votre image de produit.
  • Arche : courbe le haut de votre image de produit.
  • Indistincte : arrondit votre image de produit et lui attribue aléatoirement l’une des six formes indistinctes disponibles. Chacune de ces formes s’anime différemment des autres lorsque vous la survolez avec la souris.
  • Chevron gauche : donne à votre image de produit la forme d’un chevron dont le coude marque un angle prononcé à gauche.
  • Chevron droite : donne à votre image de produit la forme d’un chevron dont le coude marque un angle prononcé à droite.
  • Losange : donne à votre image de produit la forme d’un losange à quatre côtés.
  • Parallélogramme : donne à votre image de produit une forme dotée de deux paires de lignes parallèles.
  • Cercle : arrondit votre image de produit sous la forme d’un cercle ou d’un ovale qui s’anime lorsque vous le survolez avec la souris.
Afficher la deuxième image en survol Lorsque le client survole l'image du produit avec son curseur, ce paramètre permet à la deuxième image du produit (s'il en existe une) de s'afficher.
Afficher le fournisseur Affiche les distributeurs des produits.
Afficher la note du produit Affiche l’évaluation moyenne des produits sous la forme d’étoiles, avec le nombre d’avis entre parenthèses, par exemple : ★★★★★ (8). Requiert aussi une application d’évaluation de produits telle que Product Reviews de Shopify et des définitions de champs méta pour reviews.rating_count et reviews.rating.
Activer le bouton d’ajout rapide Le bouton d’ajout rapide permet à la clientèle d’ajouter un article à son panier à partir de la carte de produit. Si le produit possède des variantes, le bouton indique « Choisir les options » et affiche les détails du produit dans une fenêtre pop-up, où le/la client(e) peut sélectionner les variantes souhaitées, ajouter l’article au panier, payer immédiatement avec « Acheter maintenant » cliquer pour afficher tous les détails de l’article. Notez que ce paramètre dépend de l’activation du bouton « Acheter maintenant » sur votre page de produit. Si le bouton « Acheter maintenant » n’est pas activé sur le modèle de produit, la clientèle a la possibilité d’ajouter le produit à son panier, mais ne verra pas le processus de paiement rapide « Acheter maintenant ».
Nombre de colonnes sur mobile Définissez une mise en page de colonne spécifique pour appareils mobiles. Choisissez entre une ou deux colonne(s).
Activer le balayage sur mobile Modifie l'affichage mobile d'une colonne à une ligne, où les clients peuvent balayer latéralement pour voir plus de produits.
Marge de la section Ajoutez un espacement en haut ou en bas de la section de la collection en vedette. Utilisez le curseur de plage pour ajouter entre 0 px et 100 px d’espace au-dessus ou au-dessous de la section de la collection en vedette.

Vous pouvez ajouter une section qui présente un produit spécifique.

Paramètres de section

Paramètres de la section du produit vedette
Paramètre Description
Produit Produit que vous souhaitez mettre en évidence dans la section.
Nuancier de couleurs Ensemble des couleurs que vous pouvez appliquer à cette section. En savoir plus sur les nuanciers de couleurs.
Afficher l'arrière-plan secondaire Affiche le produit vedette sur la couleur d’arrière-plan secondaire.
Largeur des supports multimédias sur ordinateur Sélectionnez des supports multimédias de petite, moyenne ou grande taille. L’image est automatiquement optimisée pour les mobiles.
Limiter les supports multimédias à la hauteur de l’écran Si vous sélectionnez cette option, une hauteur maximale des supports multimédias est définie en fonction de la hauteur de la fenêtre du navigateur.
Taille des supports multimédias Sélectionnez l’option Taille d’origine pour conserver le rapport d’aspect initial du support multimédia ou l’option Remplir pour adapter le support multimédia à son conteneur.
Position des supports multimédias sur ordinateur Indiquez si le support multimédia du produit en vedette doit se trouver sur le côté gauche ou droit. S’applique uniquement aux utilisateurs qui accèdent à la page sur un ordinateur de bureau.
Le zoom sur image

Choisissez la manière dont le zoom sur image fonctionne sur ordinateur :

  • Ouvrir lightbox – cette option ouvre la grande image. Elle est sélectionnée par défaut sur les appareils mobiles.
  • Pas de zoom – cette option désactive le zoom sur les images. Elle est recommandée pour les images qui ne sont pas de haute résolution.
  • Cliquer et passer la souris – cliquez pour zoomer sur l’image, puis survolez celle-ci pour voir les différentes sections ainsi agrandies. Le zoom par survol se désactive lorsque vous cliquez à nouveau sur les images agrandies ou lorsque la souris quitte le conteneur de l’image. Quand ce paramètre est activé et que l’utilisateur se sert d’un appareil mobile, l’image s’ouvre par défaut dans une fenêtre modale (lightbox).
Masquer les supports multimédia des autres variantes Sélectionnez cette option pour masquer les supports multimédias des autres variantes une fois qu’une variante a été sélectionnée.
Activer la vidéo en boucle Permet de relire la vidéo. Les client(e)s doivent cliquer pour lancer la relecture.
Marge de la section Ajoutez un espacement en haut ou en bas de la section du produit en vedette. Utilisez le curseur de plage pour ajouter entre 0 px et 100 px d’espace en haut ou en bas de la section.

Vous pouvez ajouter les blocs suivants dans votre section*Produit en vedette*.

Blocs disponibles dans la section du produit vedette
Bloc Paramètres
Texte Saisissez du texte pour votre produit vedette :
  • Texte : accepte du texte ou une source dynamique.
  • Style de texte : choisir entre Corps, Sous-titre ou Majuscule
Titre Taille du titre : Choisissez entre petite, moyenne ou grande.
Prix Ce bloc ne comporte pas de paramètres personnalisables.
Sélecteur de variante Choisissez entre les boutons pilules ou un menu déroulant.
Sélecteur de quantité Ce bloc ne comporte pas de paramètres personnalisables.
Boutons d'achat Cochez la case Afficher les boutons de paiement dynamique pour afficher toutes les options de paiement dynamique que vous avez activées dans vos paramètres de paiement.
Partager Texte cliquable, qui permet aux clients de partager le produit sur leurs médias sociaux.
Note de produit Affiche l’évaluation moyenne des produits sous la forme d’étoiles, avec le nombre d’avis entre parenthèses, par exemple : ★★★★★ (8). Requiert aussi une application d’évaluation de produits telle que Shopify Product Reviews et des définitions de champs méta pour reviews.rating_count et reviews.rating.
Liquid personnalisé Ajoutez du code Liquid ou HTML personnalisé.
Applications Ajoutez une application compatible Online Store 2.0.
Icône avec texte Ce bloc affiche jusqu’à trois icônes que vous pouvez sélectionner dans une liste d’icônes préinstallées ou à partir d’une image importée. Si vous choisissez d'importer une image, celle-ci remplace toute sélection d’icônes dans une liste déroulante. Pour la mise en page de vos icônes, vous pouvez sélectionner des icônes verticales ou horizontales. Pour supprimer une icône, effacez le champ de titre. Pour afficher plus de trois icônes, ajoutez un autre bloc **Icône avec texte**.
SKU Ce bloc affiche le SKU (unité de conservation des stocks) associé à un produit lorsque votre variante est associée à un SKU. En savoir plus sur [l'ajout de numéros de SKU à vos variantes de produit à partir de l'interface administrateur](/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/show-sku#add-sku-numbers-to-your-product-variants-from-the-admin-sectioned%20themes-specific).

Bannière d’image

La section de la bannière avec image prend en charge une ou deux images et une zone de texte avec des boutons. Si deux images sont utilisées, elles s’affichent côte à côte sur un ordinateur. Sur un appareil mobile, vous pouvez choisir si les images s’affichent côte à côte ou dans une colonne.

Sur ordinateur, la zone de texte recouvre partiellement l’image. Sur mobile, la zone de texte s’affiche en-dessous de l’image. Vous pouvez modifier l’alignement du texte entre à droite, à gauche ou au centre sur bureau et sur mobile.

Paramètres de section

Paramètres de la section de la bannière avec image
Paramètre Description
Première image L'image principale de la bannière. Si deux images sont ajoutées à la section, elles s'affichent soit à gauche, soit en haut, selon que le client se trouve sur un ordinateur de bureau ou un téléphone portable.
Modifier le texte alternatif Cliquez ici pour définir le texte alternatif de l'image pour l’optimisation des moteurs de recherche et pour décrire l’image pour les clients utilisant des lecteurs d’écran.
Deuxième image Image secondaire de la bannière. Si deux images sont ajoutées à la section, elles s'affichent soit à droite, soit en bas, selon que le client se trouve sur un ordinateur de bureau ou un téléphone portable.
Opacité de la superposition d'images Ajoute une superposition aux images de la bannière. Utilisez le curseur pour définir l’opacité de la superposition. Elle est par défaut définie sur 0 %.
Hauteur de la bannière

Définissez la hauteur des images de vos bannières à l’aide du menu déroulant.

  • Adapter à la première image ‑ Définit la hauteur de la section selon la hauteur de la première image.
  • Petite - Bureau : 420 px, mobile : 280 px
  • Moyen (par défaut) - Bureau : 560 px, mobile : 340 px
  • Grande - Bureau : 720 px, mobile : 390 px
Position du contenu sur ordinateur Définissez la position de la bannière avec image sur ordinateur. Choisissez entre en haut, au milieu ou en bas, et à droite, à gauche ou au centre.
Afficher le conteneur sur ordinateur Place le texte de l'image de bannière dans une zone de texte sur l’image de bannière pour les clients qui accèdent à la boutique sur ordinateur.
Alignement du contenu sur ordinateur Définissez l'alignement du texte de la bannière avec image pour les ordinateurs. Choisissez entre droite, gauche ou centre.
Nuancier de couleurs Ensemble des couleurs que vous pouvez appliquer à cette section. En savoir plus sur les nuanciers de couleurs. Le nuancier de couleurs sélectionné s’affiche uniquement lorsque l’option Afficher la zone de texte sur ordinateur est sélectionnée.
Animations

Sélectionnez une animation pour votre image :

  • Aucun (par défaut)
  • Mouvement ambiant – change lentement la position de l’image dans son conteneur.
  • Position de l’arrière-plan fixe – lorsqu’un client fait défiler la page, les éléments du premier plan, tels que le texte et les boutons, se déplacent à la même vitesse, tandis que l’arrière-plan reste fixe.
  • Zoom sur le défilement – lorsqu’un client fait défiler la page, les éléments du premier plan, tels que le texte et les boutons, se déplacent à la même vitesse, tandis que l’arrière-plan reste fixe et que l’image effectue un zoom avant.
Alignement du contenu sur mobile Définissez l'alignement du texte de la bannière avec image pour les appareils mobiles. Choisissez entre droite, gauche ou centre.
Empiler des images sur un mobile Si deux images sont ajoutées à la section, les images s’affichent dans une colonne au lieu d’être côte à côte.
Afficher le conteneur sur mobile Place le texte de l’image de bannière dans une zone de texte sur l’image de bannière pour les clients qui accèdent à la boutique sur ordinateur.

Bloc de titre

Paramètres du bloc de titre dans la section de la bannière avec image
Paramètre Description
En-tête Texte de grande taille correspondant au titre de la zone de texte. Utilisez les boutons pour mettre le texte en gras ou en italique, ou pour ajouter un lien.
Taille du titre Modifiez la taille du texte du titre. Choisissez entre petit, moyen ou grand.

Bloc de texte

Paramètres du bloc de texte dans la section de la bannière avec image
Paramètre Description
Description Affiche du texte de type paragraphe.
Style de texte Modifie le style de texte de la bannière avec image. Choisissez entre Corps, Sous-titre et Majuscules.

Bloc de bouton

Paramètres du bloc de bouton dans la section de la bannière avec image
Paramètre Description
Texte du premier bouton Le texte qui s'affiche sur le premier bouton.
Lien du premier bouton L’URL à qui vous souhaitez que le premier bouton soit lié.
Utiliser le style du bouton en relief Ajuste le style de bouton pour qu’il soit le contour d’un bouton au lieu d’avoir un arrière-plan uni.
Texte du deuxième bouton Le texte qui s'affiche sur le deuxième bouton.
Lien du deuxième bouton L'URL à laquelle vous souhaitez que le second bouton soit lié.
Utiliser le style du bouton en relief Ajuste le style de bouton pour qu’il soit le contour d’un bouton au lieu d’avoir un arrière-plan uni.

Image avec texte

Vous pouvez ajouter une section contenant une image et un bloc de texte avec un bouton facultatif pour lier les clients à une nouvelle page. Associez un texte à une image pour mettre l’accent sur le produit, la collection ou l'article de blog choisi. Ajoutez des détails sur la disponibilité, le style ou même donner un avis.

Paramètres de section

Paramètres de la section d'image avec texte
Paramètre Description
Image Cliquez sur Sélectionner une image pour choisir une image pour la section. Cliquez sur le bouton Changer pour modifier ou supprimer l’image.
Modifier le texte alternatif Cliquez ici pour définir le texte alternatif de l'image pour l’optimisation des moteurs de recherche et pour décrire l’image pour les clients utilisant des lecteurs d’écran.
Hauteur de l'image Choisissez la hauteur de l’image :
  • Adapter à l’image (par défaut)
  • Petit
  • Moyen
  • Grand
Largeur d'image sur ordinateur La largeur de l’image :
  • Petit
  • Moyenne (par défaut)
  • Grand
Position de l'image sur ordinateur Choisissez si l’image ou le texte apparaît en premier. Par défaut, l'image apparaît en premier pour les mises en page sur mobile :
  • Image en premier (par défaut sur mobile)
  • Deuxième Image
Position du contenu sur ordinateur La position verticale du contenu dans le conteneur :
  • En haut (par défaut)
  • Milieu
  • En bas
Alignement du contenu sur ordinateur L’alignement du texte dans le conteneur :
  • Gauche (par défaut)
  • Centre
  • Droite
Mise en page du contenu Permet aux zones d’image et de texte de se chevaucher. Si Aucun chevauchement est sélectionné, le contenu s’ajuste pour accueillir le texte et l’image.
  • Chevauchement
  • Pas de chevauchement (par défaut)
Nuancier de couleurs Ensemble des couleurs que vous pouvez appliquer à cette section. En savoir plus sur les nuanciers de couleurs.
Animations

Sélectionnez une animation pour votre image :

  • Aucun (par défaut)
  • Mouvement ambiant – change lentement la position de l’image dans son conteneur.
  • Zoom sur le défilement – lorsqu’un client fait défiler la page, les éléments du premier plan, tels que le texte et les boutons, se déplacent à la même vitesse, tandis que l’arrière-plan reste fixe et que l’image effectue un zoom avant.
Mise en page sur mobile Choisissez l’alignement du contenu sur mobile :
  • Gauche (par défaut)
  • Droite
  • Centre
Marge de la section Ajoutez un espacement entre le haut ou le bas de l’image avec la section de texte. Utilisez le curseur de plage pour ajouter entre 0 px et 100 px d’espace au-dessus ou au-dessous de l’image avec la section de texte.

Bloc de titre

Paramètres du bloc de titre dans la section d'image avec texte
Paramètre Description
En-tête Texte du titre de la section. Utilisez les boutons pour mettre le texte en gras ou en italique, ou pour ajouter un lien.
Taille du titre Modifiez la taille du texte du titre. Choisissez entre petit, moyen ou grand.

Bloc de texte

Paramètres du bloc de texte dans la section d'image avec texte
Paramètre Description
Contenu Affiche du texte de type paragraphe dans la section de texte.
Style de texte Style du texte de contenu :
  • Corps (par défaut)
  • Sous-titre

Bloc de bouton

Paramètres du bloc de bouton dans la section de la section d'image avec texte
Paramètre Description
Texte du bouton Le texte qui s'affiche sur le bouton.
Lien du bouton L'URL à laquelle vous souhaitez que le bouton soit lié.

Bloc de légende

Les paramètres du bloc de légende dans la section image avec texte
Paramètre Description
Texte Ajoutez un slogan ou une légende à votre image. Le texte apparaîtra en bas de la section image avec texte.
Style de texte Style du texte de contenu :
  • Majuscules (par défaut)
  • Sous-titre
Taille du texte Taille du texte de contenu :
  • Petit
  • Moyenne (par défaut)
  • Grand

Mise en page multicolonne

Vous pouvez utiliser la section colonnes multiples pour afficher du contenu dans une mise en page en colonnes et ajouter un bouton sous les colonnes pour emmener le client vers une nouvelle page. Associez un texte à une image pour mettre l’accent sur le produit, la collection ou l’article de blog choisi. Ajoutez des détails sur la disponibilité et le style ou donnez votre avis.

Paramètres de section

Paramètres de la section multicolonne
Paramètre Description
En-tête Titre de la section. Utilisez les boutons pour mettre le texte en gras ou en italique, ou pour ajouter un lien.
Taille du titre Modifiez la taille du texte du titre. Choisissez entre petit, moyen ou grand.
Largeur d'image

La largeur des images ajoutée aux colonnes.

  • Pleine largeur de colonne (par défaut) – La largeur de l’image représente la taille complète de la colonne.
  • Demi largeur de colonne - La largeur de l’image représente la moitié de la taille de la colonne.
  • Largeur d’un tiers de colonne - La largeur de l’image représente un tiers de celle de la colonne.
Rapport d'image

Le rapport d’image pour l’image :

  • Adapter à l’image (par défaut) – utilise le rapport d’aspect des images. Cette action empêche leur recadrage.
  • Portrait - Recadre l'image à un rapport de 2:3.
  • Carré - Recadre l'image à un rapport de 1:1.
  • Cercle - Recadre l’image à afficher dans un cercle
Nombre de colonnes sur ordinateur Utilisez l’échelle pour sélectionner le nombre de colonnes qui apparaissent sur ordinateur. Minimum : 1. Maximum : 6.
Alignement de colonne

L’alignement des images et du texte dans les colonnes :

  • Gauche (par défaut) - Aligne les images et le texte sur la gauche.
  • Centre - Aligne les images et le texte au centre.
Arrière-plan secondaire Choisissez Aucun masquer l’arrière-plan secondaire, ou Afficher comme arrière-plan de la colonne pour modifier les couleurs du conteneur de colonnes.
Texte du bouton Le texte qui s'affiche sur le bouton.
Lien du bouton L'URL à laquelle vous souhaitez que le bouton soit lié.
Nuancier de couleurs Ensemble des couleurs que vous pouvez appliquer à cette section. En savoir plus sur les nuanciers de couleurs.
Nombre de colonnes sur mobile Définissez une mise en page de colonne spécifique pour appareils mobiles. Choisissez entre une ou deux colonne(s).
Activer le balayage sur mobile Modifie l'affichage mobile d'une colonne à une ligne, où les clients peuvent balayer latéralement pour voir plus de blocs de collection.
Marge de la section Ajoutez un espacement en haut ou en bas de la section multicolonne. Utilisez le curseur de plage pour ajouter entre 0 px et 100 px d’espace au-dessus ou au-dessous de la section multicolonne.

Bloc de colonne

Vous pouvez avoir un maximum de 12 colonnes dans une section. Si vous avez un, deux ou trois blocs de colonnes, ils s’affichent sur une ligne sur le bureau. Si vous avez quatre blocs de colonnes ou plus, ils s’affichent dans une mise en page de deux colonnes. Sur les appareils mobiles, les blocs de colonnes s'affichent sur une seule colonne, sauf si la fonction activer le balayage sur mobile est activée.

Paramètres du bloc de colonne dans la section multicolonne
Paramètre Description
Image L'image que vous souhaiter afficher.
En-tête Titre de la colonne. Utilisez les boutons pour mettre le texte en gras ou en italique, ou pour ajouter un lien.
Description Le texte du paragraphe dans la colonne.
Étiquette de lien [facultatif] Le texte d’un lien ajouté sous le bloc de colonne. Laissez ce lien vide si vous n’avez pas ajouté de lien.
Lien URL du lien. Laissez vide sans lien.

Section multiligne

Vous pouvez ajouter une section contenant plusieurs lignes incluant chacune une image, du texte et un bouton facultatif. Associez le texte à une image pour mettre l’accent sur le produit, la collection ou l’article de blog de votre choix. Ajoutez des détails sur la disponibilité, le style ou donnez votre avis.

Vous pouvez également afficher le contenu de métaobjets par le biais de sources dynamiques. Pour afficher des entrées de métaobjets, vous devez créer un métaobjet, créer des entrées et faire en sorte que le métaobjet ait accès à la boutique en ligne avant de pouvoir les utiliser dans des sections multiligne.

Paramètres de section

Paramètres de la section multiligne
Paramètre Description
Hauteur de l'image Choisissez la hauteur de l’image :
  • Adapter à l’image
  • Petit
  • Moyenne (par défaut)
  • Grand
Largeur d'image sur ordinateur La largeur de l’image :
  • Petit
  • Moyenne (par défaut)
  • Grand
Taille du titre Modifiez la taille du texte du titre. Faites votre choix parmi les options suivantes : petit, moyen ou grand.
Style de texte Change le style du texte. Vous avez le choix entre Corps (option par défaut) et Sous-titre.
Style de bouton Vous avez le choix entre un bouton plein et un bouton en relief.
Position du contenu sur ordinateur La position verticale du contenu dans le conteneur :
  • En haut
  • Au milieu (option par défaut)
  • En bas
Alignement du contenu sur ordinateur L’alignement du texte dans le conteneur :
  • Gauche (par défaut)
  • Centre
  • Droite
Position de l'image sur ordinateur Choisissez la position des images. Le placement est automatiquement optimisé pour les appareils mobiles :
  • Alterner depuis la gauche (option par défaut)
  • Alterner depuis la droite
  • Aligner à gauche
  • Aligner à droite
Nuancier de couleurs Ensemble des couleurs que vous pouvez appliquer à cette section. En savoir plus sur les nuanciers de couleurs.
Nuancier de couleurs du contenant Ensemble des couleurs que vous pouvez appliquer au conteneur. En savoir plus sur les nuanciers de couleurs.
Mise en page sur mobile Choisissez l’alignement du contenu sur mobile :
  • Gauche (par défaut)
  • Droite
  • Centre
Marge de la section Ajoutez un espacement au-dessus ou au-dessous de la section multiligne. Utilisez le curseur de plage pour ajouter entre 0 px et 100 px d’espace au-dessus ou au-dessous de la section d’image avec texte.

Bloc de rangée

Paramètres des blocs de rangée dans la section multiligne
Paramètre Description
Image Cliquez sur Sélectionner une image afin de choisir une image pour la rangée. Cliquez sur le bouton Changer pour changer ou supprimer l’image. Cliquez sur le bouton source pour créer un lien vers des sources dynamiques.
Modifier le texte alternatif Cliquez ici pour définir le texte alternatif de l'image pour l’optimisation des moteurs de recherche et pour décrire l’image pour les clients utilisant des lecteurs d’écran.
Légende Ajoutez un slogan ou une légende à votre image.
En-tête Texte du titre de la ligne. Utilisez les boutons pour mettre le texte en gras ou en italique, ou pour ajouter un lien.
Texte Affiche le texte sous forme de paragraphe dans la rangée.
Texte du bouton Le texte qui s'affiche sur le bouton.
Lien du bouton L'URL à laquelle vous souhaitez que le bouton soit lié.

Page 

Vous pouvez choisir d’afficher le contenu d’une page personnalisée dans une section. Cela amène tout le contenu de la page dans la section, mais n’amène aucun code Liquid à partir d’un modèle.

Paramètres de section

Paramètres de la section de page
Paramètre Description
Page La page de la boutique en ligne que vous souhaitez afficher.
Taille du titre Modifiez la taille du texte du titre. Choisissez entre petit, moyen ou grand.
Nuancier de couleurs Ensemble des couleurs que vous pouvez appliquer à cette section. En savoir plus sur les nuanciers de couleurs.
Marge de la section Ajoutez un espacement en haut ou en bas de la section de la page. Utilisez le curseur de plage pour ajouter entre 0 px et 100 px d’espace au-dessus ou au-dessous de la section de la page.

Texte enrichi

Vous pouvez ajouter une section de texte enrichi avec un en-tête, une légende et un bouton pour relier la clientèle à une nouvelle page.

Paramètres de section

Paramètres de la section de texte enrichi
Paramètre Description
Position du contenu sur ordinateur Choisissez la position du conteneur de texte enrichi. Utilisez le menu déroulant pour sélectionner à gauche, au centre (par défaut) ou à droite. Le contenu est automatiquement optimisé pour les appareils mobiles.
Alignement du contenu Ce paramètre affecte l’alignement du texte pour tous les blocs de la section de texte enrichi. Utilisez le menu déroulant pour sélectionner à gauche, au centre (par défaut) ou à droite.
Nuancier de couleurs Ensemble des couleurs que vous pouvez appliquer à cette section. En savoir plus sur les nuanciers de couleurs.
Rendre la section pleine largeur Par défaut, les sections sont en pleine largeur.
Marge de la section Ajoutez un espacement en haut ou en bas de la section de texte enrichi. Utilisez le curseur de plage pour ajouter entre 0 px et 100 px d’espace au-dessus ou au-dessous de la section du texte enrichi.
Connexion à des sources dynamiques Utilisez des sources dynamiques dans votre section de texte enrichi pour mentionner des informations telles que des champs méta ou des métaobjets. Vous pouvez même utiliser des références de listes pour créer des listes de texte dans votre thème. Par exemple, une liste de champs méta (même si elle est disponible sur un métaobjet référencé) peut être utilisée pour créer une liste de texte dans le paramètre de texte enrichi de votre thème.

Bloc de titre

Vous pouvez avoir jusqu'à 3 blocs de titre dans votre section de texte enrichi.

Paramètres du bloc de titre dans la section de texte enrichi
Paramètre Description
En-tête Le titre de la section. Utilisez les boutons pour mettre le texte en gras ou en italique ou pour ajouter un lien. Cliquez sur le bouton source pour établir un lien vers des sources dynamiques.
Taille du titre Modifiez la taille du texte du titre. Choisissez entre petit, moyen, grand ou très grand.

Bloc de texte

Le bloc de texte est un bon moyen de partager des informations sur la marque avec les clients. Vous pouvez décrire les avantages des produits, faire des annonces, souhaiter la bienvenue aux clients dans la boutique ou parler des valeurs de la marque.

Vous pouvez avoir jusqu’à 3 blocs de texte dans votre section de texte enrichi.

Paramètres du bloc de texte dans la section de texte enrichi
Paramètre Description
Description Texte de style paragraphe pour le contenu principal de la section. Cliquez sur le bouton source pour établir un lien vers des sources dynamiques.

Bloc de légende

Vous pouvez avoir jusqu'à 3 blocs de légende dans votre section de texte enrichi.

Paramètres du bloc de texte dans la section de texte enrichi
Paramètre Description
Texte Ajoutez un bref slogan à votre section de texte enrichi.
Style de texte Utilisez le menu déroulant pour sélectionner un style de texte entre Sous-titre (par défaut) et Lettre majuscule.
Taille du texte Utilisez le menu déroulant pour définir la taille de votre texte de légende. Choisissez entre petit, moyen (par défaut) et grand.

Bloc de bouton

Vous pouvez avoir jusqu'à 2 blocs de bouton dans votre section de texte enrichi.

Paramètres du bloc de bouton dans la section de texte enrichi
Paramètre Description
Texte du bouton Le texte qui s'affiche sur le bouton.
Lien du bouton L'URL à laquelle vous souhaitez que le bouton soit lié.
Utiliser le style du bouton en relief Ajuste le style de bouton pour qu’il soit le contour d’un bouton au lieu d’avoir un arrière-plan uni.

Diaporama

Vous pouvez ajouter une section de diaporama pour afficher un carrousel de jusqu’à 5 images sur une page de votre boutique.

Paramètres de section

Les paramètres de la section de diaporama
Paramètre Description
Mise en page Choisissez entre Pleine largeur (par défaut) ou Grille. Si vous choisissez Pleine largeur, le diaporama s'affiche sur toute la largeur de la section. Si vous choisissez Grille, le diaporama s'affiche avec une marge intérieure de chaque côté.
Hauteur de la diapositive

La hauteur du diaporama :

  • Adapter à la première image – toutes les images auront la même hauteur que la première image du carrousel.
  • Petit
  • Moyenne (par défaut)
  • Grand
Style de pagination

Le style de la navigation du diaporama qui apparaît en-dessous des images.

  • Points
  • Compteur (par défaut)
  • Nombres
Rotation automatique des diapositives

Cochez cette case pour faire défiler automatiquement les images du diaporama. Si cette case n’est pas cochée, le diaporama affiche une image statique jusqu’à ce que le client fasse avancer manuellement le diaporama.

Modifier la durée des diapositives Utilisez la barre pour définir la durée de défilement automatique du diaporama. Minimum : 3 secondes, maximum : 9 secondes.
Animations

Sélectionnez une animation pour votre image :

  • Aucun (par défaut)
  • Mouvement ambiant – change lentement la position de l’image dans son conteneur
Mise en page sur mobile Cochez la case pour afficher le contenu en-dessous des images sur mobile.
Accessibilité Ajoutez une description de votre diaporama pour les clients malvoyants.

Paramètres de diapositive d’image

Les paramètres des images de la section de diaporama
Paramètre Description
Image Choisissez une image statique ou dynamique pour votre diaporama. Cliquez sur Sélectionner une image pour afficher votre galerie média ou sur le bouton source pour connecter une source dynamique. Après avoir sélectionné une image, cliquez sur le bouton Changer vous permet de retirer, changer ou supprimer l’image.
Modifier le texte alternatif

Décrivez l’image du diaporama et donnez du contexte à la clientèle utilisant des lecteurs d’écran.

En-tête

Texte facultatif du titre de l’image. Ce texte est ajouté à chaque image individuellement. Utilisez les boutons pour mettre le texte en gras ou en italique, ou pour ajouter un lien.

Taille du titre

Choisissez entre un titre petit, moyen (par défaut) ou grand.

Sous-titre Texte facultatif du sous-titre de l’image. Ce texte est ajouté à chaque image individuellement. Utilisez les boutons pour mettre le texte en gras ou en italique, ou pour ajouter un lien.
Texte du bouton Saisissez du texte pour un bouton ou laissez ce champ vide pour masquer entièrement le bouton.
Lien du bouton L’URL à qui vous souhaitez lier le bouton. Cliquez sur le bouton source pour ajouter une source dynamique en tant qu’URL.
Utiliser le style du bouton en relief Cochez la case pour choisir entre un bouton plein ou avec contour.
Position du contenu sur ordinateur La position de la zone de contenu sur l’image. Choisissez entre en haut, au milieu ou en bas, et à gauche, au centre ou à droite. Le paramètre par défaut est au milieu et au centre.
Afficher le conteneur sur ordinateur Cochez la case pour afficher la zone de contenu.
Alignement du contenu sur ordinateur Aligne le texte dans le conteneur. Choisissez entre gauche, centre (par défaut) ou droite.
Opacité de la superposition d'images Utilisez le curseur pour ajuster l’opacité de la superposition d’images.
Nuancier de couleurs Ensemble des couleurs que vous pouvez appliquer à cette section. En savoir plus sur les nuanciers de couleurs. Pour que ce paramètre affecte l’image de diaporama, le conteneur doit être affiché.
Mise en page sur mobile Choisissez la façon dont le contenu apparaîtra sur mobile. Choisissez entre gauche, centre (par défaut) ou droite.

Vidéo

Vous pouvez ajouter une section vidéo pour intégrer une vidéo à partir de YouTube ou Vimeo sur une page de votre boutique.

Paramètres de section

Paramètres de la section vidéo
Paramètre Description
En-tête Titre de la section. Utilisez les boutons pour mettre le texte en gras ou en italique, ou pour ajouter un lien.
Taille du titre Modifiez la taille du texte du titre. Choisissez entre petit, moyen ou grand.
Lire la vidéo en boucle Lorsque cette option est cochée, la vidéo redémarre une fois la lecture terminée.
Vidéo Sélectionnez une vidéo ou importez votre propre vidéo dans la section. Vous pouvez modifier la vidéo de manière à utiliser une image de couverture personnalisée ou pour ajouter du texte alternatif. Si vous importez une vidéo hébergée par Shopify, celle-ci aura la priorité par rapport à une URL de vidéo ajoutée via le paramètre décrit ci-dessous.
URL Lien menant à une vidéo hébergée sur YouTube ou Vimeo. La vidéo doit être accessible au public. Elle ne s’affiche que si aucune vidéo hébergée par Shopify n’est importée au moyen du paramètre décrit ci-dessus.
Image de couverture L’image qui s’affiche avant qu’un(e) client(e) lise la vidéo.
Texte alternatif de la vidéo Le texte alternatif de la vidéo. Décrit le contexte et l’objet de la vidéo pour la clientèle utilisant des lecteurs d’écran.
Rendre la section pleine largeur Retire la marge intérieure par défaut et agrandit la section sur toute la largeur de la page.
Nuancier de couleurs Ensemble des couleurs que vous pouvez appliquer à cette section. En savoir plus sur les nuanciers de couleurs.
Marge de la section Ajoutez un espacement en haut ou en bas de la vidéo. Utilisez le curseur de plage pour ajouter entre 0 px et 100 px d’espace au-dessus ou au-dessous de la section vidéo.

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

Essayez gratuitement