Sections du thème Debut

Les sections sont des blocs de contenu personnalisables, qui déterminent la mise en page des différentes pages de votre boutique en ligne.

  • Les sections d'accueil incluent des fonctionnalités, telles que le diaporama ou l'inscription à la newsletter, que vous pouvez ajouter, réorganiser ou supprimer. Votre page d'accueil peut comporter jusqu'à 25 sections.

  • Chaque type de page possède ses propres sections. Par exemple, la section des pages de produits détermine la mise en page de chaque page de produit sur votre boutique en ligne.

  • Les sections de page se trouvent toujours à des endroits spécifiques de votre boutique en ligne. Vous pouvez les personnaliser, mais vous ne pouvez pas les réorganiser ni les supprimer.

  • Chaque thème comprend des sections fixes, telles que l'en-tête et le pied de page, qui s'affichent sur chaque page de votre boutique en ligne.

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.

Debut inclut les sections statiques suivantes :

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

Sections dynamiques

Vous pouvez ajouter, réorganiser et supprimer des sections dynamiques pour personnaliser la mise en page de votre page d'accueil. Chaque thème propose un ensemble unique de sections dynamiques à choix.

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
  • Diaporama
  • Produit en vedette
  • Newsletter
  • Carte
  • Texte enrichi
  • Témoignages
  • Colonnes de texte et images
  • Vidéo
  • Contenu personnalisé

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.

La barre d'en-tête du site web, appelée John's Apparel, montrant les éléments du menu principal, une icône de recherche et une icône de panier

Pour personnaliser la section de l'en-tête :

  1. À côté de Debut, cliquez sur Personnaliser.

  2. Cliquez sur Sections.

  3. Cliquez sur En-tête.

  4. Pour définir l'alignement de votre logo, dans la zone Alignement du logo, sélectionnez Gauche ou Centré. Si vous n'ajoutez pas d'image de logo, le nom de votre boutique dans le texte s'affiche à la place. Vous pouvez modifier le nom de votre boutique à la page Paramètres généraux de l'interface administrateur.

  5. Pour ajouter un logo, dans la zone Image du logo, cliquez sur 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 Images gratuites.

  6. Pour modifier la taille de votre logo, réglez le curseur Custom logo width (Largeur personnalisée du logo) sur la largeur de votre choix. Ajuster la largeur du logo ne déforme pas son image.

  7. Pour choisir le menu à afficher dans l'en-tête, dans la zone Menu, cliquez sur Modifier. Choisissez un menu existant ou créez-en un nouveau en cliquant sur Créer un menu. Si vous ne souhaitez pas afficher de menu dans votre en-tête, cliquez sur Supprimer.

  8. Pour afficher un message d'annonce en haut de la page, procédez comme suit :

  9. Dans la zone Barre d'annonces, cochez la case Afficher l'annonce.

  10. Pour afficher l'annonce uniquement sur la page d'accueil, cochez Page d'accueil uniquement. Sinon, l'annonce s'affiche sur chaque page de votre boutique.

  11. Saisissez le texte de votre annonce dans le champ Texte.

  12. Pour ajouter un lien à votre annonce, saisissez l'URL dans le champ Lien.

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

  14. Pour changer la couleur du texte de l'annonce, cliquez sur l'échantillon de couleur du texte et choisissez une couleur.

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

La section pied de page d'un site web comprenant un menu, le champ d'inscription à la newsletter et un texte relatif aux droits d'auteur.

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. À côté de Debut, cliquez sur Personnaliser.

  2. Cliquez sur Sections.

  3. Cliquez sur Pied de page.

  4. Cochez Afficher les icônes de paiement.

  5. Cliquez sur Save (Enregistrer).

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

<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></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></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></ol></div>
</div>



1. À côté de **Debut**, cliquez sur **Personnaliser**.
  1. Cliquez sur Sections.

  2. Cliquez sur Pied de page.

  3. 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 - Newsletter - Texte

Vous pouvez ajouter jusqu'à 4 blocs de contenu.

Pour déplacer un bloc de contenu, cliquez sur l’icône ⋮⋮ et faites glisser le bloc vers un autre endroit.

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

  1. À côté de Debut, cliquez sur Personnaliser.

  2. Cliquez sur Sections.

  3. Cliquez sur Pied de page.

  4. Cliquez sur la section Paramètres du thème.

  5. Dans le champ de médias sociaux pertinent, saisissez l’URL de votre profil.

  6. Cliquez sur Save (Enregistrer).

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. À côté de Debut, cliquez sur Personnaliser.

  2. Cliquez sur Sections.

  3. Cliquez sur Pied de page.

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

  5. 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. À côté de Debut, cliquez sur Personnaliser.

  2. Cliquez sur Sections.

  3. Cliquez sur Pied de page.

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

Pages de produits

Dans la section Pages du produit, vous pouvez ajouter ou supprimer les éléments suivants :

  • Un sélecteur de quantité
  • Des étiquettes de variantes
  • La marque ou le distributeur du produit
  • Le zoom sur image
  • Un bouton de paiement dynamique
  • Des boutons de partage social
  • Recommandations de produits

Vous pouvez également définir la taille de vos images.

Modifier les paramètres de la page de produit

  1. Dans le menu déroulant de la barre supérieure, sélectionnez Pages de produit.

  2. Cliquez sur Sections.

  3. Cliquez sur Pages du produit.

  4. Pour définir la taille de vos images, sélectionnez une taille dans le menu déroulant Image size (Taille de l'image).

  5. Pour afficher un sélecteur de quantité, cochez Afficher le sélecteur de quantité.

  6. Pour afficher les étiquettes de variantes, tels que « Taille » et « Couleur », cochez « Afficher les étiquettes de variantes ». Les étiquettes de variantes qui s'affichent sont basées sur les noms d'options de variante du produit.

  7. Pour afficher la marque ou le distributeur du produit, cochez Afficher le distributeur. Pour qu'une marque ou un distributeur s'affiche, vous devez ajouter un distributeur au produit.

  8. Pour permettre aux clients d'effectuer un zoom avant en déplaçant le curseur sur l'image du produit, cochez Activer le zoom de l'image.

  9. Pour afficher un bouton de paiement dynamique, cochez la case Afficher le bouton de paiement dynamique.

  10. Pour afficher les boutons de partage social, cochez Afficher les boutons de partage social.

  11. Cliquez sur Save (Enregistrer).

Ajouter ou supprimer des 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.

  1. Dans le menu déroulant de la barre supérieure, sélectionnez Pages de produit.

  2. Cliquez sur Product recommendations (Recommandations de produits).

  3. Utilisez la case à cocher Show dynamic recommendations (Afficher les recommandations dynamiques) pour afficher ou masquer les recommandations de produits sur vos pages de 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).

  5. Facultatif : pour afficher ou masquer les distributeur dans les descriptions de produits, utilisez la case à cocher Show vendor (Afficher le distributeur).

  6. Cliquez sur Save (Enregistrer).

Pages de collection

Vous pouvez configurer vos pages de collection pour permettre à vos clients de filtrer et trier les produits de la collection. Vous pouvez choisir une disposition de collection, soit une grille ou une liste, et choisir le nombre de produits à afficher.

Pour définir la disposition de vos pages de collection :

  1. Accédez à une page de collection dans l'éditeur de thème.

  2. Cliquez sur l'onglet Sections.

  3. Cliquez sur les pages de collection.

  4. Dans la liste Mise en page, sélectionnez Grille ou Liste.

  5. Sélectionnez le nombre de produits par ligne et le nombre de lignes par page (si vous avez sélectionné le style de grille) dans les listes.

  6. Si vous souhaitez afficher une image de collection en haut de la page, cochez Afficher l'image de la collection.

  7. Si vous souhaitez afficher la marque ou le fournisseur du produit, cochez la case Afficher les fournisseurs de produits.

  8. Cochez Activer le tri pour afficher un menu de tri.

  9. Cochez Activer le filtrage des balises pour permettre à vos clients de filtrer la collection par balise de produit.

  10. Cliquez sur Save (Enregistrer).

Page de liste des collections

La page « Liste des collections » affiche toutes vos collections de produits sous forme de grille. Sur cette page, les clients peuvent parcourir rapidement vos collections afin de choisir celle qu'ils souhaitent parcourir. Dans Debut, la page de liste de collection est un lien de premier niveau dans le menu d'en-tête.

Vous pouvez afficher les vignettes de toutes vos collections dans un modèle de grille, ou vous pouvez choisir d'afficher une collection sélectionnée. Vous pouvez également choisir comment trier les collections sur la page.

Pour définir la mise en page de votre page de liste de collection :

  1. Accédez à votre page de liste de collections en cliquant sur l'élément du menu de la collection de niveau supérieur.

  2. Cliquez sur l'onglet Sections.

  3. Cliquez sur la page de la liste des collections.

  4. Effectuez l'une des actions suivantes :

    1. Pour afficher les vignettes de toutes vos collections dans un modèle de grille, sélectionnez Tout.
    2. Pour afficher une collection sur la page de la liste des collections, choisissez Sélectionné.
  5. Si vous avez sélectionné Tout à l'étape précédente, procédez comme suit :

    1. Choisissez une option de tri dans la liste Trier les collections par.
    2. Sélectionnez le nombre de collections par ligne dans la liste Collections par ligne.
  6. Cliquez sur Save (Enregistrer).

Pages de blog

Avec Debut, vous pouvez lister vos articles de blog, ou les afficher dans une grille. Si vos articles de blog ont plus d'un auteur, vous pouvez afficher le nom de l'auteur pour chacun d'entre eux. Vous pouvez également afficher la date à laquelle chaque article de blog a été publié.

  1. Accédez à la page de votre blog dans la zone d'aperçu de l'éditeur de thème.

  2. Cliquez sur Sections.

  3. Cliquez sur Pages du blog.

  4. Dans la liste Mise en page, indiquez si vous souhaitez afficher les articles de blog dans une liste ou une grille.

  5. Cochez Afficher l'auteur pour afficher le nom de l'auteur.

  6. Cochez Afficher la date pour afficher la date à laquelle l'article de blog a été publié.

  7. Cliquez sur Save (Enregistrer).

Page de panier

Dans la section Page du panier, vous pouvez activer les paramètres suivants :

  • Notes de panier
  • Mises à jour automatiques du panier

Ajouter des notes de panier

Vous pouvez permettre à vos clients d'ajouter des commentaires à leur commande sur la page du panier.

  1. À partir du menu déroulant de la barre supérieure, sélectionnez Panier.

  2. Cliquez sur l'onglet Sections.

  3. Cliquez sur la page Panier.

  4. Cochez Activer les notes de panier.

  5. Cliquez sur Save (Enregistrer).

Activer les mises à jour automatiques

Vous pouvez faire en sorte que le panier affiche des informations mises à jour dès qu’un client modifie sa commande. Par exemple, le sous-total du prix peut être mis à jour lorsque le client change la quantité d’articles dans son panier. Pour activer les mises à jour automatiques de panier :

  1. À partir du menu déroulant de la barre supérieure, sélectionnez Panier.

  2. Cliquez sur l'onglet Sections.

  3. Cliquez sur la page Panier.

  4. Cochez Activer les mises à jour automatiques du panier.

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

Avec Debut, vous pouvez ajouter un bouton « Afficher tout » pour permettre aux clients de voir l'ensemble de la collection, et vous pouvez afficher le nom du vendeur sous chaque image du produit.

Pour présenter une collection sur votre page d'accueil :

  1. Cliquez sur l'onglet Sections.

  2. Cliquez sur la section Collection en vedette.

  3. Si vous souhaitez modifier le texte affiché au-dessus de la collection, saisissez le texte dans le champ En-tête.

  4. Dans la liste Collection, sélectionnez la collection que vous souhaitez afficher. Pour ajouter ou supprimer des produits de la collection sélectionnée, cliquez sur le lien Modifier la collection pour ouvrez la page Collections dans un nouvel onglet.

  5. Dans la liste Produits par ligne, sélectionnez le nombre de produits à afficher sur chaque ligne.

  6. Dans la liste Lignes, sélectionnez le nombre de lignes de produits à afficher.

  7. Si vous souhaitez afficher le fournisseur ou le nom de la marque sous chaque image de produit, cochez Afficher le fournisseur du produit.

  8. Si vous souhaitez permettre aux clients d'afficher tous les produits de la collection, cochez la case Montrer le bouton. « Afficher tout ».

  9. Cliquez sur Save (Enregistrer).

Image avec texte

Avec Debut, vous pouvez ajouter une image avec du texte affiché à droite ou à gauche de l'image. Vous pouvez également ajouter un bouton lié à une page de votre boutique :

Généralement, vous utiliseriez une section Image avec du texte pour faire de la publicité pour un produit ou une collection, ou pour générer du trafic sur votre page de blog.

Pour ajouter une image avec une section de texte à votre page d'accueil :

  1. Cliquez sur l'onglet Sections.

  2. Cliquez sur la section Image avec texte.

  3. Dans la zone Image, cliquez sur Sélectionner une image, puis effectuez l'une des opérations suivantes :

- To select an image you have already uploaded to your Shopify admin, click the **Library** tab.
- To select a stock image from [Shopify's Burst stock image collection](https://burst.shopify.com/), click the **Free images** tab. From here you can enter a search term, or browse the image categories.
- To select an image from your local computer, click the **Library** tab, and then click the plus button.
  1. Dans la liste Mise en page, indiquez si vous souhaitez que l'image apparaisse à droite ou à gauche du texte.

  2. Saisissez un nouveau titre pour cette section dans le champ En-tête.

  3. Saisissez le texte que vous souhaitez afficher sous l'en-tête dans le champ Texte.

  4. Dans le champ Titre du bouton, saisissez le texte que vous souhaitez voir apparaître sur le bouton.

  5. Dans le champ Lien du bouton, sélectionnez une page de votre boutique à laquelle vous souhaitez lier le bouton.

  6. 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 d'image avec texte comprend les paramètres suivants :

  • Image – Sélectionnez une image à ajouter à la section.
  • Alignement de l'image – Définissez le côté de la page sur lequel vous souhaitez afficher l'image.
  • 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 un titre à la section.
  • Text (Texte) – Ajoutez du texte à la section. La section Image avec calque texte est automatiquement renommée selon le titre que vous fournissez.
  • Texte du bouton – Ajoutez un bouton avec un texte de bouton à la section.
  • Lien du bouton – Insérez dans votre bouton un lien vers une autre page ou un autre site web.

Ajouter une image avec du texte à une page d'accueil

  1. À côté de Debut, cliquez sur Personnaliser.

  2. Cliquez sur Ajouter une section > Image avec texte > Ajouter.

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

  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.

La section newsletter sur un site web. Ce champ comprend une zone de texte pour que les clients y saisissent leur adresse e-mail, mais aussi un bouton « S'abonner ».

Pour ajouter un champ d'inscription à la newsletter à votre page d'accueil :

  1. À côté de Debut, cliquez sur Personnaliser.

  2. Cliquez sur Sections.

  3. Cliquez sur Ajouter une section > Newsletter.

  4. Saisissez un titre pour l'inscription à la newsletter dans le champ Titre. Le titre par défaut est : « Abonnez-vous à notre newsletter ».

  5. Saisissez un sous-titre pour l'inscription à la newsletter dans le champ Sous-titre.

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

  • Hauteur de la vidéo – Définissez la hauteur de 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.
  • 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.
  • Titre – Ajoutez un titre à votre vidéo.
  • Lien de la vidéo – Ajoutez l'URL YouTube de votre vidéo.
  • 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.

Ajouter une vidéo à votre page d'accueil

  1. À côté de Debut, cliquez sur Personnaliser.

  2. Cliquez sur Ajouter une section > Vidéo.

  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 page d'accueil de la boutique en ligne « Pure Tea » proposant un diaporama. La diapositive représentant une tasse de thé sur un comptoir porte le titre « Fabrication artisanale », et le sous-titre « Fabrication artisanale par des maîtres du thé et non par des machines industrielles ».

Pour en savoir plus sur le recadrage des images de diaporama et les tailles d'images recommandées, consultez les directives ci-dessous.

Créer un diaporama :

  1. À côté de Debut, cliquez sur Personnaliser.

  2. Cliquez sur Sections.

  3. Cliquez sur Diaporama.

  4. Définissez la hauteur de vos diapositives à partir du menu déroulant Slide height (Hauteur de la diapositive).

    En savoir plus sur la manière dont la hauteur de la diapositive affecte votre diaporama.

  5. Définissez la taille de vos titres et sous-titres dans le menu déroulant Text size (Taille du texte).

  6. Définissez la position du texte sur vos diapositives à partir du menu déroulant Text alignment (Alignement du texte).

  7. Facultatif : cochez Show overlay (Afficher la superposition). Une superposition d'image est 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.

  8. Facultatif : cochez Auto-rotate slides (Rotation automatique des diapositives) pour lancer le diaporama automatiquement. Sélectionnez le temps restant sur chaque diapositive à l'aide du curseur Change slides every (Modifier chaque diapositive).

  9. 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 à la diapositive en saisissant du texte dans le champ Texte 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.
  10. 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