Sections du thème Debut

Le contenu du thème est créé à l’aide de sections. Les sections sont des blocs de contenu personnalisables qui déterminent la mise en page et l’apparence des différentes pages de votre boutique en ligne. Vous pouvez ajouter, supprimer, modifier et personnaliser les sections en utilisant la version actuelle de l’éditeur de thème.

Les thèmes de Shopify possèdent les types de sections suivants :

  • Sections statiques : sections apparaissant dans des emplacements prédéterminés de votre boutique en ligne. Ces sections ne peuvent pas être supprimées ou réorganisées. Elles peuvent inclure des en-têtes, des pieds de page, des sections de navigation ou de contenu sur des pages telles que les pages de produit et de collection. Par exemple, la section Produit détermine l'apparence de chaque page de produit sur votre boutique en ligne.
  • Sections dynamiques : sections facultatives que vous pouvez utiliser pour personnaliser la mise en page de votre page d’accueil. Sur la page d’accueil de votre boutique, vous pouvez ajouter, réorganiser et supprimer des sections dynamiques pour créer la mise en page de la page. Votre page d'accueil peut comporter jusqu'à 25 sections dynamiques.

Vous pouvez en apprendre davantage sur la sélection unique de sections de Debut et la manière de les personnaliser en fonction de votre entreprise.

Sections statiques

Debut inclut les sections statiques suivantes :

  • En-tête
  • Pied de page
  • Pages de produits
  • Recommandations de produits
  • Pages de collection
  • Page de liste des collections
  • Pages de blog
  • Articles de blog
  • Page de panier

Sections dynamiques

Debut inclut les sections statiques suivantes :

  • Articles de blog
  • Liste des collections
  • Collection en vedette
  • Galerie
  • Image avec texte
  • Image avec calque texte
  • Liste des logos
  • Produit en vedette
  • Newsletter
  • Carte
  • Texte enrichi
  • Témoignages
  • Colonnes de texte et images
  • Vidéo
  • Contenu personnalisé
  • Diaporama

En-tête

Dans la section de l'en-tête, vous pouvez modifier le contenu qui apparaît en haut de chaque page de votre boutique. Vous pouvez ajouter une image de logo, choisir le menu à afficher et créer un message d'annonce.

Ajouter un logo personnalisé

Vous pouvez ajouter une image de logo personnalisée à l'en-tête de votre boutique. Le meilleur format est un fichier .png avec un fond transparent. Vous pouvez redimensionner l'image du logo en augmentant ou en diminuant la largeur.

Si vous n'ajoutez pas d'image de logo, le nom de votre boutique s'affiche sous forme de texte. Vous pouvez modifier ce nom à la page Paramètres généraux de votre interface administrateur.

  • Largeur personnalisée du logo: La largeur du logo. - Alignement du logo: L’alignement de votre logo dans l’en-tête. Sélectionnez Gauche ou Centré.
  1. Cliquez sur En-tête. 2. Dans la zone Image du logo, cliquez sur Sélectionner une image, puis choisissez l’une des options suivantes : * Pour sélectionner une image que vous avez déjà mise en ligne dans votre interface administrateur Shopify, cliquez sur l’onglet Bibliothèque. * Pour sélectionner une image sur votre ordinateur local, cliquez sur Bibliothèque > Mettre en ligne. 3. Personnalisez la taille et le placement de votre logo à l’aide des paramètres. 4. Cliquez sur Save (Enregistrer).

Ajouter une barre d’annonces

Vous pouvez ajouter une barre d’annonces dans l’en-tête et l'utiliser pour afficher un message à l'attention de vos clients. Votre message peut être personnalisé. Il peut inclure vos coordonnées, des informations sur des événements ou des soldes dans votre boutique, ou encore le slogan de celle-ci.

  1. Cliquez sur En-tête.
  2. Dans la zone Barre d'annonces, cochez Afficher l'annonce. Sélectionnez Page d'accueil uniquement pour afficher le message d'annonce uniquement sur cette page.
  3. Saisissez le texte de votre annonce.
  4. Facultatif : Saisissez une URL pour ajouter un lien à votre annonce.
  5. Pour changer la couleur de l'arrière-plan de la barre d'annonce, cliquez sur l'échantillon de couleur de la barre et choisissez une couleur.
  6. Pour changer la couleur du texte de l'annonce, cliquez sur l'échantillon de couleur du texte et choisissez une couleur.
  7. Cliquez sur Save (Enregistrer).

Ajouter un menu

Vous pouvez ajouter un menu à votre en-tête. Cela en affiche tous les liens dans votre en-tête, que vous pouvez utiliser pour mettre en évidence les pages courantes auxquelles vos clients souhaitent accéder. Par exemple, vous pouvez ajouter un menu qui contient des liens vers vos collections.

  1. Cliquez sur En-tête.

  2. Pour sélectionner un menu, cliquez sur Modifier. Sélectionnez un menu dans la liste ou cliquez sur Créer un menu pour en créer un nouveau.

  3. Pour modifier le menu, cliquez sur Modifier le menu.

  4. Cliquez sur Save (Enregistrer).

Pied de page

Le pied de page de votre thème est la section qui apparaît au bas de chaque page de votre boutique. Vous pouvez ajouter les fonctionnalités suivantes à votre pied de page :

  • icônes de paiement
  • liens rapides
  • inscription à la newsletter
  • une section de texte contenant des informations sur votre entreprise
  • icônes de médias sociaux
  • sélecteur de langue
  • sélecteur de devise

Ajouter des icônes de paiement

Vous pouvez afficher les icônes des moyens de paiement que vous acceptez dans votre pied de page. Cette zone montre les icônes associées au fournisseur de services de paiement que vous avez activé dans la section Paramètres de paiement de votre interface administrateur.

  1. Cliquez sur Pied de page.

  2. Cochez Afficher les icônes de paiement.

  3. Cliquez sur Save (Enregistrer).

Ajouter un menu, une inscription à la newsletter ou un texte

  1. Cliquez sur Pied de page.

  2. Pour ajouter un bloc de contenu, cliquez sur la zone Contenu, puis sur Ajouter du contenu. Sélectionnez le type de bloc parmi les options suivantes :

- [Menu](/manual/online-store/os/menus-and-links)

- [Newsletter](/manual/online-store/os/using-themes/change-the-layout/theme-settings/theme-newsletter)

- Text

Vous pouvez ajouter jusqu'à 4 blocs de contenu.

Pour supprimer un bloc de contenu, cliquez sur le bloc, puis sur Supprimer le contenu.

Pour personnaliser un bloc de contenu, cliquez sur le bloc et modifiez les paramètres.

  1. Cliquez sur Save (Enregistrer).

Ajouter des icônes de médias sociaux

Lorsque vous ajoutez un compte de médias sociaux aux paramètres de votre thème, celui-ci s'affiche automatiquement dans votre pied de page.

Ajouter un sélecteur de langue

Vous ne devez ajouter un sélecteur de langue que si vous avez activé plusieurs langues pour la boutique.

  1. Cliquez sur Sections.

  2. Cliquez sur Pied de page.

  3. Sous Sélecteur de langue, sélectionnez Afficher le sélecteur de langue.

  4. Cliquez sur Save (Enregistrer).

Ajouter un sélecteur de devise

Vous ne devez ajouter un sélecteur de devise que si vous avez activé plusieurs devises.

  1. Cliquez sur Pied de page.

  2. Sous Sélecteur de devise, sélectionnez Afficher le sélecteur de devise.

  3. Cliquez sur Save (Enregistrer).

Pages de produits

La section Pages de produits est la principale section personnalisable pour ce type de page. Cette section prend également en charge les fonctionnalités suivantes si elles sont configurées dans votre boutique :

Vous pouvez personnaliser cette section à l'aide des options suivantes :

  • Afficher le sélecteur de quantité – donnez aux utilisateurs la possibilité de préciser une quantité à ajouter à leur panier.
  • Afficher les étiquettes de variantes - Affichez les étiquettes de variantes, comme « Taille » et « Couleur » au-dessus des menus déroulants des variantes. Les étiquettes de variantes qui s'affichent sont basées sur les noms d'options de variante du produit.
  • Afficher le distributeur - Affichez la marque ou le distributeur du produit. Pour qu'une marque ou un distributeur s'affiche, vous devez ajouter un distributeur au produit.
  • Afficher le bouton de paiement dynamique – offrez aux clients la possibilité d'ignorer le panier pour accéder directement au paiement depuis la section des produits en vedette.
  • Afficher les boutons de partage social – Affichez des boutons que vos clients peuvent utiliser pour partager vos produits sur les médias sociaux. Les options de partage qui s’affichent sont contrôlées par les paramètres de votre thème.

Support multimédia

  • Taille – Définissez la taille du support multimédia de votre produit.
  • Activer le zoom sur l'image - Autorisez vos clients à zoomer en passant la souris sur l'image du produit.
  • Activer la vidéo en boucle – Sélectionnez cette option pour lire en boucle les vidéos des produits. Si cette option est désélectionnée, un bouton de lecture apparaît sur les vidéos au moment où elles se terminent.

Modifier les paramètres des pages de produits

  1. Sélectionnez Product pages (Pages de produits).
  2. Cliquez sur la section Pages de produit.
  3. Utilisez les paramètres pour personnaliser la section des pages de vos produits.
  4. Cliquez sur Save (Enregistrer).

Afficher les disponibilités de ramassage

Debut vous permet de montrer aux clients si un produit de votre boutique en ligne peut être retiré en magasin. Sur chaque page de produit, la section des possibilités de retrait indique si le produit est disponible ainsi que la période de retrait estimée.

Pour utiliser cette fonctionnalité, vous devez configurer le retrait en magasin. Le cas échéant, cette fonctionnalité est toujours visible sur vos pages de produits et ne peut pas être désactivée.

Une fois que le retrait en magasin est activé, le centre de retrait local où le produit peut être ramassé, le cas échéant, est indiqué sur la page de produit. Ces informations n'apparaissent que pour les produits stockés dans au moins un centre de retrait et pour lesquels l'option Produit physique est activée dans la section Expédition des détails d'une variante de produit.

Pour sélectionner Produit physique sur une variante de produit, faites ce qui suit :

  1. Depuis l’interface administrateur Shopify, accédez à produits > tous les produits.

  2. Sélectionnez un produit.

  3. Sous Variantes, sélectionnez une variante.

  4. Dans la section Expédition, activez l'option Produit physique.

  5. Cliquez sur Save (Enregistrer).

Si vous avez activé le retrait sur place pour un seul emplacement, l'emplacement et le ramassage possibles s'affichent pour cet emplacement. Les clients peuvent cliquer sur Afficher les informations de la boutique pour en savoir plus sur le centre de retrait.

Si votre retrait sur place est activé pour plus d’un emplacement, la section des disponibilités de ramassage affiche l’emplacement et les possibilités de retrait pour l’emplacement le plus proche du client, en fonction de son adresse IP. Lorsque le client clique sur Vérifier la disponibilité dans d’autres boutiques, la liste des centres de retrait est triée par distance par rapport au client.

Si l’emplacement du client ne peut pas être déterminé à partir de son adresse IP, l’emplacement et les possibilités de retrait par ordre alphabétique, d’abord par ville, puis par nom d’emplacement, s'affichent dans la section des disponibilités de ramassage. Par exemple, supposons que vous disposiez de trois centres de retrait : « Queen Street » à Toronto, « Front Street » à Toronto et « Alberni Street » à Vancouver. Les détails de « Front Street » à Toronto s'afficheraient dans la section des disponibilités de ramassage.

Afficher la bannière Shop Pay Installments

Version 17.12.0+

Si vous avez activé Shop Pay Installments et que vous vous trouvez aux États-Unis, la bannière Shop Pay Installments apparaît sur la page du produit si celui-ci coûte entre 50 USD et 1 000 USD. Si Shop Pay Installments est activé, la bannière ne peut pas être désactivée.

La bannière apparaît sous le prix du produit et indique que les clients ont la possibilité de payer le produit en totalité ou en 4 versements égaux. Les utilisateurs peuvent cliquer sur En savoir plus pour afficher des informations supplémentaires sur les versements et les renseignements requis.

Recommandations de produits

Vous pouvez afficher des produits recommandés sur les pages des produits pour permettre à vos clients de découvrir d'autres produits qui pourraient les intéresser.

Activer les recommandations sur les produits

  1. Sélectionnez Product pages (Pages de produits).

  2. Cliquez sur la section Recommandations sur les produits.

  3. Cochez Afficher les recommandations dynamiques pour afficher les recommandations sur les produits sur les pages de vos produits.

  4. Facultatif : pour modifier le titre qui apparaît au-dessus des produits recommandés, saisissez-en un nouveau dans le champ Heading (Titre).

    1. Facultatif : pour afficher ou masquer les distributeurs dans les descriptions de produits, activez la case à cocher Afficher le distributeur.
  5. Cliquez sur Save (Enregistrer).

Pages de collection

La section Pages de collection est la principale section personnalisable pour les pages de collection.

La section Pages de collections comprend les paramètres suivants :

  • Mise en page – Choisissez comment les produits sont arrangés sur la page de collection.
  • Produits par rangée (grille uniquement) -Choisissez le nombre de produits à afficher sur chaque ligne de la page de la collection. Cette section s’applique uniquement si la mise en page est configurée sur Grille.
  • Rangées par page (grille uniquement) - Choisissez le nombre de lignes de produits à afficher sur la page de la collection. Cette section s’applique uniquement si la mise en page est configurée sur Grille.
  • Afficher l'image de la collection - Affichez l'image de la collection en haut de la page de la collection.
  • Afficher les distributeurs du produit - Affichez le distributeur de chaque produit sous le titre du produit.
  • Activer le tri – Sélectionnez cette option pour permettre aux clients de trier les produits sur vos pages de collection.
  • Activer le filtrage par balise – Sélectionnez cette option pour permettre aux clients de filtrer la collection par balise de produit.

Modifier les paramètres des pages de collection

  1. Sélectionnez les pages de collections.
  2. Cliquez sur la section Pages de collection.
  3. Utilisez les paramètres pour personnaliser la section de vos pages de collections.
  4. Cliquez sur Save (Enregistrer).

Page de liste des collections

Vos clients peuvent utiliser la page de liste des collections pour trouver la collection qu’ils souhaitent découvrir. Cette page peut contenir toutes les collections de votre boutique ou seulement un groupe de collections que vous avez sélectionnées.

La section de la page de la liste des collections comprend les paramètres suivants :

  • Collection - Configurez les collections que vous souhaitez afficher sur la page de la liste des collections. Ces informations ne sont utilisées que si l'option Sélectionner les collections à afficher est définie sur Sélectionné.
  • Sélectionner les collections à afficher – Choisissez les collections que vous souhaitez afficher.
  • Trier les collections par - Définissez le mode de tri de vos collections. Ce paramètre n'est utilisé que si l'option Sélectionner les collections à afficher est défini sur Toutes.
  • Collections par rangée – Définissez le nombre de collections à afficher sur chaque ligne de la page de la liste des collections.

Personnaliser la section de la page de la liste des collections

  1. Sélectionner une liste de collections.
  2. Cliquez sur la section Page de liste des collections.
  3. Facultatif : dans la zone Contenu, cliquez sur Ajouter une collection pour en ajouter à la page de la liste des collections.
  4. Utilisez les paramètres pour personnaliser la section de la page de votre liste de collections.
  5. Cliquez sur Save (Enregistrer).

Pages de blog

La section Pages de blog est la section principale personnalisable d’une page de blog. Cette page répertorie tous les articles publiés sur votre blog. Vous pouvez créer une liste de vos articles de votre blog ou les afficher dans une grille. La liste et la grille affichent le titre de l’article de blog et un extrait, le cas échéant. Si aucun extrait n'est disponible, ce sont les premières phrases de l’article de blog qui apparaissent.

La section des pages de blog comprend les paramètres suivants :

  • Mise en page - Choisissez une liste ou une grille.
  • Afficher l’auteur - Affichez le nom de l’auteur sous le titre de l’article de blog.
  • Afficher la date - Affichez la date de publication sous le titre de l’article de blog.

Personnaliser la section de vos pages de blog

  1. Sélectionnez Blogs.
  2. Cliquez sur la section Pages du blog.
  3. Utilisez les paramètres pour personnaliser votre section des articles.
  4. Cliquez sur Save (Enregistrer).

Articles de blog

Les pages d'articles affichent des articles de blog individuels. La section des articles comprend les paramètres suivants :

  • Afficher l’auteur - Affichez le nom de l’auteur sous le titre de l’article de blog.
  • Afficher la date - Affichez la date à laquelle l’article de blog a été publié sous le titre de l’article de blog.
  • Afficher les boutons de partage social – Sélectionnez cette option pour afficher les boutons de partage social sur les articles de votre blog. Vous pouvez choisir les plateformes pouvant être utilisées pour le partage dans vos paramètres de médias sociaux.

Personnaliser la section Articles

  1. Sélectionnez Articles de blog.
  2. Cliquez sur la section Articles.
  3. Utilisez les paramètres pour personnaliser votre section des articles.
  4. Cliquez sur Save (Enregistrer).

Page de panier

La section Page du panier comprend les paramètres suivants :

  • Activer les mises à jour automatiques du panier – Sélectionnez cette option pour mettre à jour le panier dès que les modifications apportées au client sont effectuées. Par exemple, le prix sous-total peut être mis à jour lorsque le client change la quantité d’articles dans son panier.
  • Activer les notes de panier – Dans certains thèmes, cette option s’appelle Notes de commande.

Personnaliser la section de la page du panier

  1. Sélectionner Cart (Panier).
  2. Cliquez sur la section Page du panier.
  3. Utilisez les paramètres pour personnaliser la section de votre page de panier.
  4. Cliquez sur Save (Enregistrer).

Collection en vedette

Vous pouvez présenter une collection sur votre page d'accueil. Présenter des collections peut vous aider à promouvoir les promotions et les nouvelles collections.

La section Collection en vedette comprend les paramètres suivants :

  • Titre - Ajoutez le texte qui apparaît au-dessus des produits de la collection. Le texte par défaut est Collection en vedette.
  • Collection – Choisissez une collection à afficher dans la section.
  • Produits par ligne - Choisissez le nombre de produits à afficher sur chaque ligne de la section.
  • Lignes - Définissez le nombre de lignes de produits à afficher dans la section.
  • Afficher le distributeur du produit - Affichez le distributeur de chaque produit sous le titre du produit.
  • Montrer le bouton « Afficher tout » - Sélectionnez cette option pour ajouter un bouton Afficher tout sous la dernière ligne de la section. Les clients peuvent cliquer sur ce bouton pour afficher toute la collection.

Ajouter une collection en vedette à votre page d'accueil

  1. Cliquez sur Add section (Ajouter une section).
  2. Cliquez sur Collections en vedette, puis sur Sélectionner.
  3. Cliquez sur Sélectionner une collection, puis sélectionnez-en une dans la liste Collection. Jusqu'à 50 produits de la collection sélectionnée s'affichent alors.
  4. Utilisez les paramètres pour personnaliser la section Collection en vedette.
  5. Cliquez sur Save (Enregistrer).

Image avec texte

Avec Express, vous pouvez ajouter une image avec du texte affiché à droite ou à gauche de l’image. Vous pouvez également ajouter un bouton qui renvoie à une autre page.

Vous pouvez utiliser une section d'image avec texte pour promouvoir un produit ou une collection spécifique.

La section Image avec texte comprend les paramètres suivants :

  • Image - Ajoutez ou sélectionnez l'image à inclure à la section. Vous pouvez mettre en ligne une image, utiliser une image déjà mise en ligne ou sélectionner une image dans la banque d'images gratuites Burst.
  • Alignement d'image - Choisissez si l'image de la section apparaît à gauche ou à droite.
  • Titre – Ajoutez le texte principal à associer à l’image.
  • Texte – Ajoutez texte secondaire à associer à l’image. Ce texte s’affiche sous le titre.
  • Étiquette du bouton – Ajoutez le texte que vous souhaitez voir apparaître sur le bouton.
  • Lien du bouton – Définissez l'URL ou la page à laquelle vous souhaitez que le bouton mène. Collez l’URL ou sélectionnez une page dans le menu. Si vous ne souhaitez pas inclure de bouton dans la section, laissez ce champ vide.

Ajouter une image avec une section de texte à une page d'accueil

  1. Cliquez sur Add section (Ajouter une section).
  2. Cliquez sur Image avec texte, puis sur Sélectionner.
  3. Dans la zone Image, cliquez sur Sélectionner une image, puis effectuez l'une des opérations suivantes : - Pour sélectionner une image que vous avez déjà mise en ligne dans votre interface administrateur Shopify, cliquez sur l'onglet Bibliothèque.
  4. Pour sélectionner une image provenant de la banque d'images gratuites Burst, cliquez sur Images gratuites. De là, vous pouvez saisir un terme de recherche ou parcourir les catégories d'images.
  5. Pour sélectionner une image sur votre ordinateur local, cliquez sur l'onglet Bibliothèque, puis sur Mettre en ligne.

  6. Utilisez les paramètres pour personnaliser la section.

  7. Cliquez sur Save (Enregistrer).

Image avec calque texte

Vous pouvez présenter une grande image avec superposition d'un texte personnalisé sur votre page d'accueil.

La section Image avec superposition de texte comprend les paramètres suivants :

  • Image - Choisissez l'image à inclure à la section. Vous pouvez mettre en ligne une image, utiliser une image déjà mise en ligne ou sélectionner une image dans la banque d'images gratuites Burst.
  • Alignement d'image - Choisissez si l'image de la section apparaît à gauche ou à droite.
  • Layout (Mise en page) – Définissez la largeur de la section.
  • Section height (Hauteur de la section) – Définissez la hauteur de la section. Pour empêcher le recadrage de l'image, sélectionnez Adapt to image (Adapter à image), ce qui définit la hauteur de la section en fonction de celle de votre image.
  • Text size (Taille du texte) – Définissez la taille du texte.
  • Titre - Ajoutez du texte principal à l’image. La section Image avec superposition de texte est automatiquement renommée selon le titre que vous choisissez.
  • Texte – Ajoutez texte secondaire à associer à l’image. Ce texte s’affiche sous le titre.
  • Étiquette du bouton – Ajoutez le texte que vous souhaitez voir apparaître sur le bouton.
  • Lien du bouton – Définissez l'URL ou la page à laquelle vous souhaitez que le bouton mène. Collez l’URL ou sélectionnez une page dans le menu. Si vous ne souhaitez pas inclure de bouton dans la section, laissez ce champ vide.

Ajouter une image avec une superposition de texte à une page d'accueil

  1. Cliquez sur Add section (Ajouter une section).
  2. Cliquez sur Image avec superposition de texte, puis cliquez sur Sélectionner.
  3. Dans la zone Image, cliquez sur Sélectionner une image, puis effectuez l'une des opérations suivantes : - Pour sélectionner une image que vous avez déjà mise en ligne dans votre interface administrateur Shopify, cliquez sur l'onglet Bibliothèque.
  4. Pour sélectionner une image provenant de la banque d'images gratuites Burst, cliquez sur Images gratuites. De là, vous pouvez saisir un terme de recherche ou parcourir les catégories d'images.
  5. Pour sélectionner une image sur votre ordinateur local, cliquez sur l'onglet Bibliothèque, puis sur Mettre en ligne.

  6. Utilisez les paramètres pour personnaliser votre section Image avec calque texte.

  7. Cliquez sur Save (Enregistrer).

Produit en vedette

Vous pouvez présenter un produit sur votre page d’accueil. La mise en vedette permet de promouvoir un produit nouveau ou soldé. Les clients peuvent afficher d’autres images de produits à l’aide des flèches gauche et droite en dessous de l’image.

La section du produit en vedette comprend les paramètres suivants :

  • Produit – Choisissez le produit que vous souhaitez mettre en vedette sur la page d’accueil.
  • Afficher le sélecteur de quantité – donnez aux utilisateurs la possibilité de préciser une quantité à ajouter à leur panier.
  • Afficher les étiquettes de variantes - Affichez les étiquettes de variantes, comme « Taille » et « Couleur » au-dessus des menus déroulants des variantes. Les étiquettes de variantes qui s'affichent sont basées sur les noms d'options de variante du produit.
  • Afficher le distributeur - Affichez la marque ou le distributeur du produit. Pour qu'une marque ou un distributeur s'affiche, vous devez ajouter un distributeur au produit.
  • Afficher le bouton de paiement dynamique – offrez aux clients la possibilité d'ignorer le panier pour accéder directement au paiement depuis la section des produits en vedette.
  • Afficher les boutons de partage social – Affichez des boutons que vos clients peuvent utiliser pour partager vos produits sur les médias sociaux.

Support multimédia

  • Taille – Définissez la taille du support multimédia de votre produit.
  • Activer le zoom sur l'image - Autorisez vos clients à zoomer en passant la souris sur l'image du produit.
  • Activer la vidéo en boucle – Vidéos en boucle sur les produits. Si cette option est désélectionnée, un bouton de lecture apparaît sur les vidéos au moment où elles se terminent.

Ajouter une section de produits en vedette

<div class="section-tag-block">
  <div class="sections-menu"><ul class="in-page-menu in-page-menu--horizontal"><li class="js-is-active"><a href="#" class="desktop marketing-button marketing-button--small">Bureau</a></li><li class=""><a href="#" class="iphone marketing-button marketing-button--small">iPhone</a></li><li class=""><a href="#" class="android marketing-button marketing-button--small">Android</a></li></ul></div><div class="desktop active changeable-content"><ol>
<li>Depuis votre interface administrateur Shopify, accédez à <strong>Boutique en ligne</strong> &gt; <strong>Thèmes</strong>.
</li><li>À côté de <strong>Debut</strong>, cliquez sur <strong>Personnaliser</strong>.
</li></ol></div><div class="iphone changeable-content"><ol>
<li>Dans l&#39;<a href="https://www.shopify.com/install/detect">application Shopify</a>, appuyez sur <strong>Boutique</strong>.
</li><li>Dans la section <strong>Canaux de vente</strong>, appuyez sur <strong>Boutique en ligne</strong>.
</li><li>Appuyez sur <strong>Gérer les thèmes</strong>.
</li><li>À côté de <strong>Debut</strong>, appuyez sur <strong>Personnaliser</strong>.
</li><li>Appuyez sur <strong>Edit</strong> (Modifier).
</li></ol></div><div class="android changeable-content"><ol>
<li>Dans l&#39;<a href="https://www.shopify.com/install/detect">application Shopify</a>, appuyez sur <strong>Boutique</strong>.
</li><li>Dans la section <strong>Canaux de vente</strong>, appuyez sur <strong>Boutique en ligne</strong>.
</li><li>Appuyez sur <strong>Gérer les thèmes</strong>.
</li><li>À côté de <strong>Debut</strong>, appuyez sur <strong>Personnaliser</strong>.
</li><li>Appuyez sur <strong>Edit</strong> (Modifier).
</li></ol></div>
</div>
  1. Cliquez sur Add section (Ajouter une section).
  2. Cliquez sur Produit en vedette, puis sur Sélectionner.
  3. Utilisez les paramètres pour personnaliser la section de votre produit en vedette.
  4. Cliquez sur Save (Enregistrer).

Newsletter

Vous pouvez ajouter un champ d'inscription à votre newsletter en page d'accueil. Cela vous permet de recueillir les adresses e-mail de clients pour vos campagnes de marketing par e-mail. Consultez le blog de Shopify pour en savoir plus sur le marketing par e-mail.

Ajouter une inscription à la newsletter sur votre page d'accueil

  1. Cliquez sur Add section (Ajouter une section).

  2. Cliquez sur Newsletter, puis sur Sélectionner.

  3. Saisissez un titre pour l'inscription à votre newsletter.

  4. Saisissez un sous-titre pour l’inscription à la newsletter.

  5. Cliquez sur Save (Enregistrer).

Carte

Vous pouvez ajouter une carte Google sur votre page d'accueil pour montrer aux clients où se trouve votre entreprise.

La section de la carte comprend les paramètres suivants :

  • Titre - Ajoutez un titre à votre section de carte.
  • Adresse et heures d'ouverture – Ajoutez l'adresse et les heures d'ouverture de votre boutique à la section de votre carte.
  • Adresse de la carte – Définissez la carte de manière à ce qu'elle affiche l'emplacement de votre boutique.
  • Texte du lien de la carte – Ajoutez un bouton menant à votre position sur Google Maps.
  • Afficher l'épingle – Ajoutez une épingle indiquant l'emplacement spécifique de votre boutique sur la carte.
  • Clé API Google Maps – Ajoutez la clé API de votre carte à la section Carte.
  • Image – Ajoutez une image qui s'affichera si la carte ne se charge pas.
  • Position de l'image – Définissez l'emplacement de l'image.

Ajouter une carte à votre page d'accueil

  1. Cliquez sur Add section (Ajouter une section).
  2. Cliquez sur Mapper, puis sur Sélectionner.
  3. Utilisez les paramètres pour personnaliser la section de votre carte.
  4. Cliquez sur Save (Enregistrer).

Texte enrichi

Utilisez la section Rich text (Texte enrichi) pour fournir tout contenu écrit que vous souhaitez afficher sur votre page d'accueil ou pour intégrer une page créée dans votre interface administrateur de Shopify. Par exemple, vous pouvez présenter de futurs événements en intégrant votre page de blog, ou afficher une page comportant l'un ou l'autre des éléments suivants :

La section de texte enrichi comprend les paramètres suivants :

  • Affichage large – Réduisez les marges de chaque côté de votre texte.
  • Titre – Ajoutez un titre à votre section de texte enrichi.
  • Texte – Ajoutez et formatez votre texte personnalisé. Si vous souhaitez mettre en vedette une page de votre boutique, cliquez sur Ajouter du contenu, puis sur Page. Sélectionnez une page à afficher en tant que page d'accueil dans le menu déroulant.
  • Taille – Définissez la taille de votre texte.

Ajouter du texte enrichi à sa page d’accueil

  1. Cliquez sur Ajouter une section.

  2. Cliquez sur Texte enrichi, puis cliquez sur Sélectionner.

  3. Utilisez les paramètres pour personnaliser votre section de texte enrichi.

  4. Cliquez sur Save (Enregistrer).

Vidéo

Vous pouvez ajouter une vidéo YouTube à votre page d'accueil. Les vidéos permettent d'interagir avec vos clients et de les intéresser à votre entreprise.

La section vidéo comprend les paramètres suivants :

  • Image de couverture – Ajoutez une image de couverture à votre vidéo. L'image de couverture est masquée pendant la lecture de la vidéo.
  • Alignement de l'image – Alignez votre image de couverture de sorte que la partie la plus importante soit toujours visible.
  • Lien de la vidéo – Ajoutez l'URL YouTube de votre vidéo.
  • Afficher la superposition – Ajoutez une couche de couleur sur votre vidéo pour faciliter la lecture du texte. Si vous paramétrez le style de la vidéo sur Image avec bouton de lecture, la superposition est supprimée pendant la lecture de la vidéo.
  • Style – Définissez le style de la vidéo. Le style de la vidéo d'arrière-plan est uniquement disponible sur ordinateur de bureau. Si les clients visitent votre boutique en utilisant une tablette ou un appareil mobile, ils voient toujours le style Image avec bouton de lecture.
  • Hauteur de la vidéo – Définissez la hauteur de votre vidéo.
  • Titre – Ajoutez un titre à votre vidéo.
  • Taille du texte – Ajoutez du texte à votre vidéo. Si vous paramétrez le style de la vidéo sur Image avec bouton de lecture, le texte est supprimé pendant la lecture de la vidéo.

Ajouter une vidéo à votre page d'accueil

  1. Cliquez sur Add section (Ajouter une section).
  2. Cliquez sur Vidéo, puis sur Sélectionner.
  3. Utilisez les paramètres pour personnaliser votre section vidéo.
  4. Cliquez sur Save (Enregistrer).

Diaporama

Vous pouvez ajouter un diaporama d'images à votre page d'accueil. Dans la section diaporama, vous pouvez définir la hauteur des diapositives, ajouter du texte et des boutons, et choisir si votre diaporama commence automatiquement.

La section du diaporama comprend les paramètres suivants :

  • Diapositive d’image – Choisissez une image à inclure dans le diaporama. Vous pouvez mettre en ligne une image, utiliser une image déjà mise en ligne ou choisir une image gratuite sur Burst. Vous pouvez définir les paramètres suivants pour chaque diapositive : - Position de l’image – Choisissez l’alignement de l’image dans le cadre du diaporama. Vous pouvez en savoir plus sur la position de l'image dans les directives ci-dessous.

    • Titre – Ajoutez le texte principal à associer à l’image.
    • Texte – Ajoutez le texte secondaire à associer à l’image. Ce texte s’affiche sous le titre.
    • Étiquette du bouton – Ajoutez le texte que vous souhaitez voir apparaître sur le bouton.
    • Lien du bouton – Définissez l'URL ou la page à laquelle vous souhaitez que le bouton mène. Collez l’URL ou sélectionnez une page dans le menu. Si vous ne souhaitez pas inclure de bouton dans la section, laissez ce champ vide.
  • Hauteur de la diapositive – Définissez la hauteur du diaporama. En savoir plus sur la manière dont la hauteur des diapositives influe sur votre diaporama.

  • Taille du texte – Définissez la taille de vos titres sur le diaporama.

  • Alignement du texte - Choisissez la position du texte sur vos diapositives.

  • Afficher la superposition - Ajoutez une couche de couleur entre une image et le texte placé sur celle-ci. Les superpositions permettent de souligner le contraste des couleurs et d'améliorer la lisibilité. Vous pouvez définir la couleur et l'opacité de la superposition dans les paramètres de couleur.

  • Rotation automatique des diapositives - Configurez la lecture automatique du diaporama.

  • Changer de diapositive toutes les – Sélectionnez la fréquence de rotation des diapositives.

Pour en savoir plus sur le recadrage des images de diaporama et les tailles d’images recommandées, consultez les directives du diaporama.

Ajouter un diaporama à votre page d'accueil

  1. Cliquez sur Add section (Ajouter une section).
  2. Cliquez sur Diaporama, puis sur Sélectionner.
  3. Pour ajouter une diapositive d'image, procédez comme suit :

    1. Dans la zone Content (Contenu), cliquez sur Add image slide (Ajouter une diapositive d'image).
    2. Sous Image, cliquez sur Select image (Sélectionner une image). Pour mettre une image en ligne depuis votre ordinateur, cliquez sur Mettre en ligne. Pour utiliser une image provenant de la banque d'images gratuites Burst, cliquez sur Free images (Images gratuites).
    3. Pour choisir l'alignement de l'image dans le diaporama, sélectionnez une position dans le menu déroulant Image position (Position de l'image). Vous pouvez en savoir plus sur la position de l'image dans les directives ci-dessous.
    4. Pour ajouter du texte à la diapositive d'image, saisissez du texte dans les champs Heading (Titre), Subheading (Sous-titre) ou les deux.
    5. Ajoutez un bouton à votre diapositive en saisissant du texte dans le champ Étiquette du bouton. Dans le champ Lien du bouton, sélectionnez une partie de votre boutique en ligne vers laquelle vous souhaitez créer un lien.
  4. Utilisez les paramètres pour personnaliser votre section de diaporama.

  5. Cliquez sur Save (Enregistrer).

Directives relatives à un diaporama

Vous pouvez utiliser les paramètres et recommandations d'images ci-dessous pour contrôler l'aspect de votre diaporama sur votre boutique en ligne. La façon dont vos diapositives apparaissent dépend des facteurs suivants :

  • Les dimensions de vos images
  • Vos paramètres de position d'image
  • Vos paramètres de hauteur de diapositive
  • Le rapport largeur-hauteur de vos images

En raison des différences de taille et de forme d'écran, vos diapositives peuvent être différentes sur les appareils mobiles et de bureau.

Recommandations de taille d'image

Les dimensions recommandées pour les images de diaporama dépendent de la hauteur de votre diapositive. Suivez les directives suivantes :

Recommandations relatives à la taille de l’image par paramètre
Configuration de la hauteur de la diapositive Largeur recommandée Hauteur recommandée
Adapter à la première image 1200 px 600 px
Petit 1200 px 475 px
Moyen 1200 px 489 px
Grand 1200 px 775 px

Pour afficher ou modifier les paramètres de hauteur de vos diapositives, consultez l’étape 5 des instructions pour créer un diaporama.

Recadrage de l'image

Vous pouvez prendre des mesures pour contrôler le recadrage de vos images ou pour éviter tout recadrage d'image.

Contrôler le recadrage des images

Vous pouvez vous attendre à un recadrage des images sur certaines tailles d'écran dans les situations suivantes :

  • Vos images n'ont pas le même rapport largeur-hauteur.
  • La hauteur de votre diapositive est définie sur Small(Petite), Medium (Moyenne) ou Medium (Grande).
  • Votre hauteur de diapositive est définie sur Adapt to first image (Adapter à la première image), et vos images sont plus hautes que l'écran de l'appareil ou la fenêtre du navigateur.

Vous pouvez contrôler le recadrage de vos images à l'aide du paramètre Position de l'image.

Pour chaque image, vous choisissez la partie à conserver en cas de recadrage. L'exemple ci-dessous vous montre comment la même image peut être recadrée pour certaines tailles d'écran. Sur la diapositive de gauche, la position de l’image est Centrée au milieu. Sur la diapositive de droite, la position de l’image est En haut à gauche.

Exemple de diapositive recadrée différemment selon la configuration de la position de l’image.

Pour afficher ou modifier les paramètres de position de vos images, reportez-vous à l’étape 10 des instructions pour créer un diaporama.

Éviter le recadrage d'image

Pour éviter le recadrage des images de votre diaporama, procédez comme suit :

  • Configurez la hauteur de votre diapositive sur Adapt to first image (Adapter à la première image).
  • Utilisez des images deux fois plus larges que hautes. Ces images ont un rapport largeur-hauteur de 2:1. Les dimensions recommandées sont de 1200 px par 600 px.
  • Assurez-vous que toutes vos diapositives ont le même rapport largeur-hauteur. Le rapport de vos diapositives est plus important que leurs dimensions en pixels.

Dans l'exemple suivant, une image de diaporama avec un rapport 2:1 est affichée sur un ordinateur de bureau et un appareil mobile :

Une diapositive est affichée sur un ordinateur de bureau et sur un appareil mobile sans aucun recadrage.

Hauteur de la diapositive

La largeur de la section de diaporama correspond toujours à celle de la fenêtre du navigateur. La hauteur de vos diapositives est relative à la largeur. En raison des différences de taille d'écran, la largeur et la hauteur de vos diapositives varient selon les appareils. La hauteur de vos diapositives est également influencée par leurs paramètres de hauteur.

Vous pouvez utiliser le paramètre de hauteur de diapositive Adapt to first image (Adapter à la première image) pour baser la hauteur de votre diaporama sur la hauteur de votre première image. Ce paramètre fonctionne mieux lorsque toutes vos images sont de la même taille ou ont le même rapport largeur-hauteur. Si vos images ont des tailles ou des ratios différents, vous pouvez modifier l'ordre de vos diapositives pour voir à quoi elles ressemblent à différentes hauteurs.

Dans l'exemple suivant, la diapositive la plus courte est placée en premier :

Une diapositive plus courte détermine la hauteur des deux autres diapositives. Les autres diapositives étant plus hautes, elles sont recadrées en haut et en bas.

Dans l'exemple suivant, une diapositive plus grande est placée en premier :

Une diapositive de hauteur moyenne détermine la hauteur des deux autres diapositives. La diapositive la plus grande est recadrée en haut et en bas. La diapositive la plus courte est recadrée sur les côtés.

Si vous utilisez plutôt les paramètres de hauteur Small (Petite), Medium (Moyenne) ou Large (Grande), reportez-vous aux recommandations relatives à la taille de l'image pour vos diapositives.

Rapports d'image

Si vous souhaitez éviter le recadrage des images dans votre diaporama, le rapport largeur-hauteur recommandé pour vos images est de 2:1.

Si vous ne vous souciez pas du recadrage de vos images sur ordinateur et que vous souhaitez les mettre en valeur sur les appareils mobiles, préférez des images carrées ou plus hautes que larges. L'exemple de diapositive suivant est une image carrée au format 1:1.

Une diapositive carrée est affichée sur un ordinateur de bureau et un appareil mobile. L'image est recadrée sur l'appareil de bureau, mais pas sur l'appareil mobile.

La diapositive suivante montre une image en orientation portrait au format 2:3.

Une diapositive haute est affichée sur un ordinateur de bureau et un appareil mobile. L'image est recadrée sur l'appareil de bureau, mais pas sur l'appareil mobile.

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

Essayez gratuitement