Debut

Debut est un thème flexible qui convient à toutes les boutiques, quelle que soit la taille de leur stock. Avec Debut, vous pouvez rapidement configurer une boutique et commencer à vendre. Debut donne un aspect soigné sans aucune personnalisation de thème.

Exemple de boutique en ligne utilisant Debut

Le thème Debut est idéal si vous souhaitez :

  • commencer à vendre tout de suite, sans avoir besoin de beaucoup personnaliser votre thème
  • vous assurer que votre boutique s'affiche bien sur les tablettes et les smartphones
  • réorganiser facilement la disposition de votre magasin et consulter vos modifications en temps réel.

Éditeur de thèmes Utilisez l'éditeur de thème pour personnaliser votre thème. La barre d'outils de l'éditeur de thème est divisée en Sections et Paramètres de thème.
La barre d'outils de l'éditeur de thème montrant les sections et les paramètres de thèmes
Vous pouvez utiliser des sections pour modifier le contenu et la présentation des différentes pages de votre boutique. Vous pouvez utiliser les paramètres de thèmes pour personnaliser les polices et les couleurs de votre boutique ainsi qu'apporter des modifications à vos liens de médias sociaux et à vos paramètres de passage à la caisse.

Sections Les sections sont des blocs de contenu personnalisables, qui déterminent la disposition de votre boutique en ligne. Chaque thème comprend des sections statiques et des sections dynamiques. ### Sections statiques Les sections statiques se trouvent toujours à des emplacements spécifiques de votre boutique en ligne. Vous pouvez modifier des sections statiques, mais vous ne pouvez pas les réorganiser ni les supprimer. Chaque type de page de votre boutique en ligne inclut différentes sections statiques.

Debut inclut les sections statiques suivantes :

  • En-tête 

  • Bas de page
  • Pages 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 retirer 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 superposition de texte
  • Liste des logos
  • Diaporama
  • Produit en vedette
  • Newsletter
  • Carte
  • Texte enrichi
  • Témoignages
  • Colonnes de texte avec images
  • 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. Trouvez Debut et 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 Largeur personnalisée du logo sur la largeur de votre choix. Ajuster la largeur du logo ne déformera pas l'image de votre logo.

  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 :

    1. Dans la zone Barre d'annonces , cochez la case Afficher l'annonce.
    2. 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.
    3. Saisissez le texte de votre annonce dans le champ Texte.
    4. Pour ajouter un lien à votre annonce, saisissez l'URL dans le champ Lien.
    5. Pour changer la couleur de l'arrière-plan de la barre d'annonces, cliquez sur l'échantillon de couleur Barre et choisissez une couleur.
    6. Pour changer la couleur du texte de l'annonce, cliquez sur l'échantillon de couleur Texte et choisissez une couleur.
  9. Cliquez sur Enregistrer.

Bas de page

Dans la section pied de page, vous pouvez modifier le contenu qui apparaît en bas de chaque page de votre boutique. Vous pouvez ajouter les fonctionnalités suivantes à votre pied de page :

  • jusqu'à deux menus
  • champ d'inscription à la newsletter
  • icônes de paiement

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.

Personnaliser la section de pied de page :

  1. Trouvez Debut et cliquez sur Personnaliser.

  2. Cliquez sur Sections.

  3. Cliquez sur Pied de page.

  4. Personnalisez le menu principal du pied de page dans la zone Menu principal. Pour modifier le menu par défaut, cliquez sur Modifier le menu. Pour sélectionner un menu différent, cliquez sur Changer et faites votre choix parmi les menus existants ou cliquez sur Créer un menu.

  5. Ajoutez un menu supplémentaire à votre pied de page dans la zone Menu supplémentaire.

  6. Pour ajouter un champ d'inscription à votre newsletter à votre pied de page, suivez les étapes suivantes :

    1. Cochez l'option Afficher l'inscription à la newsletter.
    2. Saisissez un sous-titre pour l'inscription à la newsletter dans le champ Sous-titre.
  7. Ajoutez des icônes de paiement (MasterCard, PayPal…) à votre pied de page en cochant l'option Afficher les icônes de paiement.

  8. Cliquez sur Enregistrer.

Pages Produits

Dans la section Pages de produits , 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
  • Zoom sur image
  • Un bouton de passage à la caisse dynamique
  • Des boutons de partage social

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

Pour modifier les paramètres des pages 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 les Pages de produit.

  4. Pour définir la taille de vos images, sélectionnez une taille d'image dans le menu déroulant 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 passage à la caisse dynamique, cochez la case Afficher le bouton de passage à la caisse dynamique.

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

  11. Cliquez sur 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 Enregistrer.

Page de liste des collections

La page de liste des collections affiche une grille de toutes vos collections de produits. Vos clients peuvent utiliser la page de liste des collections pour parcourir rapidement vos collections afin de choisir celle qu'ils souhaitent naviguer. Dans Debut, la page de liste de collection est un lien de premier niveau dans le menu d'en-tête :

Page d'accueil de Debut avec le lien Catalogue en surbrillance dans le menu supérieur

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 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 montrer la date à laquelle l'article de blog a été publié.

  7. Cliquez sur Enregistrer.

Page de panier

Avec Debut, vous pouvez laisser vos clients ajouter des notes à leur commande à la page du panier :

  1. Accédez à la page de votre panier dans l'éditeur de thème en ajoutant un produit au panier.

  2. Cliquez sur l'onglet Sections.

  3. Cliquez sur la page Panier.

  4. Cochez Activer les notes de panier.

  5. Cliquez sur 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 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 l' image avec la section de texte.

  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. - Pour sélectionner une image à partir de la banque d'images Burst de Shopify, cliquez sur l'onglet Images gratuites. De là, vous pouvez saisir un terme de recherche ou parcourir les catégories d'images. - Pour sélectionner une image sur votre ordinateur local, cliquez sur l'onglet Bibliothèque , puis sur le bouton plus.

  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 voulez 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 Enregistrer.

Image avec superposition de texte

Avec Debut, la page d'accueil de votre boutique peut présenter une grande image avec un texte de couverture, qui donne une première impression de votre marque :

Vous pouvez ajouter un bouton sur l'image pour diriger vos clients vers n'importe quelle page de votre boutique. Vous pouvez également modifier l'alignement de l'image dans la section, ajuster la hauteur de la section et choisir un texte plus grand ou plus petit.

Pour créer une image avec superposition de texte :

  1. Cliquez sur l'onglet Sections.

  2. Cliquez sur Image avec superposition de texte.

  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. - Pour sélectionner une image à partir de la banque d'images Burst de Shopify, cliquez sur l'onglet Images gratuites. De là, vous pouvez saisir un terme de recherche ou parcourir les catégories d'images. - Pour sélectionner une image sur votre ordinateur local, cliquez sur l'onglet Bibliothèque , puis sur le bouton plus.

  1. Choisissez comment vous souhaitez aligner l'image dans la section en sélectionnant Haut , Milieu ou Bas dans la liste Alignement de l'image.

  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 la liste Hauteur de la section , sélectionnez une hauteur d'image.

  1. Dans la liste Taille du texte , sélectionnez une taille pour le texte du diaporama.

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

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

  4. Cliquez sur 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. Trouvez Debut et 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 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 diaporamas et les tailles d'images recommandées, consultez les directives ci-dessous.

Créer un diaporama :

  1. Trouvez Debut et 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 tout texte placé sur l'image. Les superpositions peuvent souligner le contraste des couleurs et à 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 d' étiquette du bouton Texte. Dans le champ Button link (Lien du bouton), sélectionnez une partie de votre boutique en ligne vers laquelle vous souhaitez créer un lien :

    Le champ Button link (Lien du bouton) dans l'éditeur de thème. Cliquez sur le lien pour afficher un menu comprenant les éléments suivants : Collections, Produits, Pages, Blogs et Articles de blog. Vous pouvez utiliser ce menu pour créer un lien vers une collection particulière, un produit, etc.

  10. Cliquez sur 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 des paramètres de hauteur de votre diapositive :

Les paramètres de hauteur de diapositive dans l'éditeur de thème. Un menu déroulant relatif à la hauteur des diapositives affiche les options suivantes : Adapt to first image (Adapter à la première image), Small (Petite), Medium (Moyenne) et Large (Grande).

Suivez les directives suivantes :

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 des diapositives, reportez-vous à 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 Image position (Position de l'image) :

Le paramètre Image position (Position de l'image) dans l'éditeur de thème. Un menu déroulant affiche neuf options différentes, telles que « Top left » (Haut gauche) et « Middle right » (Milieu droit).

Pour chaque image, vous pouvez choisir la partie que vous souhaitez conserver lors du recadrage. Dans l'exemple suivant, vous pouvez voir 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 configurée sur Middle center (Milieu centre). Sur la diapositive de droite, la position de l’image est configurée sur Top left (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 votre image, 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 les écrans de bureau et que vous souhaitez les mettre en valeur sur les appareils mobiles, utilisez des images carrées ou alors, plus hautes que larges. L'exemple de diapositive suivant montre une image carrée présentant un rapport largeur-hauteur de 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 portrait avec un rapport largeur-hauteur de 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.

Paramètres du thème Vous pouvez utiliser les paramètres du thème pour personnaliser les couleurs et la typographie de votre boutique en ligne. Vous pouvez également configurer des liens vers vos comptes de médias sociaux, modifier les paramètres de votre panier et ajouter un favicon.

Debut inclut les paramètres de thème suivants :

  • Couleurs
  • Typographie
  • Médias sociaux
  • favicon
  • Paiement

Couleurs

Vous pouvez choisir les couleurs pour les différentes parties de votre boutique en ligne.

Étapes :

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

  2. Cliquez sur Paramètres du thème.

  3. Cliquez sur Couleurs.

  4. Pour chaque type de contenu, cliquez sur l'échantillon de couleur pour utiliser le sélecteur de couleur :

    Le sélecteur de couleurs dans l'éditeur de thème

- La zone Sélection récente affiche les couleurs que vous avez récemment sélectionnées pour votre thème. - La zone En cours d'utilisation affiche les couleurs que vous utilisez actuellement dans d'autres parties de votre thème.

Pour configurer la couleur sur transparent, cliquez sur Aucun.

  1. Cliquez sur Enregistrer.

Typographie

Vous pouvez choisir la typographie du texte de votre boutique en ligne.

Étapes :

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

  2. Cliquez sur Paramètres du thème.

  3. Cliquez sur Typographie.

  4. Pour chaque type de texte, cliquez sur Modifier pour utiliser le sélecteur de police :

    Le bouton « Modifier » du sélecteur de police

  5. Explorez les polices en utilisant le champ de recherche ou en cliquant sur Charger plus.

    Pour voir toutes les polices disponibles, voir la bibliothèque de polices de Shopify.

  6. Cliquez sur le nom de la police que vous souhaitez utiliser.

  7. Pour modifier le style d'une police, par exemple en la mettant en gras ou en italique, cliquez sur Normal. Ensuite, cliquez sur le style que vous souhaitez utiliser, puis sur Sélectionner  :

    Une sélection d'épaisseurs de police disponibles dans le sélecteur de police

  8. Cliquez sur Enregistrer.

Médias sociaux

Vous pouvez ajouter des boutons de partage social pour vos produits et vos articles de blog ainsi que des liens vers vos comptes de médias sociaux.

Pour personnaliser les paramètres des médias sociaux :

  1. Trouvez Debut et cliquez sur Personnaliser.

  2. Cliquez sur Paramètres du thème.

  3. Cliquez sur Médias sociaux.

  4. Pour mettre en ligne une image de partage social, dans la zone Image de partage social , cliquez sur Sélectionner une image ou Découvrir les images gratuites.

  5. Pour ajouter des boutons de partage social à vos produits et vos articles de blog, dans la zone Options de partage , cochez une ou toutes les cases.

    Vous pouvez ajouter les boutons de partage suivants :

- Partager sur Facebook - Tweeter sur Twitter - Épingler sur Pinterest (non disponible pour le partage d'articles de blog)

  1. Pour ajouter des liens vers vos comptes de médias sociaux, dans la zone Comptes , saisissez les liens vers vos comptes dans les champs fournis. Saisissez les liens complets, tels que https://instagram.com/shopify, ou https://twitter.com/shopify.

    Les liens vers vos comptes de médias sociaux s'affichent dans le pied de page de votre boutique en ligne.

  2. Cliquez sur Enregistrer.

favicon

Vous pouvez mettre en ligne une icône de favoris, ou une « favicon », qui peut vous aider à marquer votre boutique en ligne en affichant votre logo dans les emplacements suivants :

  • l'onglet de votre navigateur web
  • l'historique de votre navigateur web
  • les icônes sur votre bureau
  • à côté de votre nom de boutique en ligne lorsqu'il est marqué d'un signet.

La meilleure taille d'image de favicon pour Debut est 32 x 32 px.

Pour mettre en ligne un favicon :

  1. Dans la section Debut , cliquez sur Personnaliser.

  2. Cliquez sur l'onglet Paramètres du thème.

  3. Cliquez sur Favicon.

  4. Dans la zone Image favicon , 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. - Pour sélectionner une image sur votre ordinateur local, cliquez sur l'onglet Bibliothèque , puis sur le bouton plus.

  1. Cliquez sur Enregistrer.

Paiement

Vous pouvez personnaliser votre page de passage à la caisse pour y inclure les éléments suivants :

  • une bannière d'image personnalisée en haut de la page
  • le logo de votre boutique
  • une image d'arrière-plan ou une couleur dans la zone de contenu principale
  • des polices de texte et des couleurs personnalisées.

Pour voir vos modifications au fur et à mesure que vous les apportez, allez à la page de passage à la caisse dans l'éditeur de thème.

Pour accéder aux paramètres de la page de passage à la caisse :

  1. Dans la section Debut , cliquez sur Personnaliser.

  2. Cliquez sur l'onglet Paramètres du thème.

  3. Cliquez sur Passage à la caisse.

Pour ajouter une image de bannière :

  1. Dans la zone Bannière , cochez la case Utiliser un fond personnalisé.

  2. Cliquez sur Choisir un fichier pour mettre en ligne un fichier d'image.

  1. Dans la zone Logo , sélectionnez Personnalisé dans le menu déroulant Image.

  2. Cliquez sur le lien Choisir un fichier pour mettre en ligne un fichier d'image.

  3. Dans le menu déroulant Position , sélectionnez l'endroit où vous souhaitez afficher l'image, à droite, à gauche ou au centre.

  4. Dans la liste Taille du logo , sélectionnez une taille de logo.

Pour personnaliser la zone de contenu principale :

  1. Dans Zone de contenu principal , sélectionnez la case à cocher Utiliser un fond personnalisé.

  2. Effectuez l'une des actions suivantes :

- Cliquez sur Choisir un fichier pour mettre en ligne un fichier d'image. - Cliquez sur l'échantillon Couleur de fond pour sélectionner une nouvelle couleur dans une palette.

  1. Dans le menu déroulant Champs de formulaire , indiquez si les champs seront blancs ou transparents.

Pour personnaliser la page Récapitulatif de commande :

  1. Dans la zone Récapitulatif de commande , sélectionnez la case à cocher Utiliser un fond personnalisé.

  2. Effectuez l'une des actions suivantes :

  3. Cliquez sur Choisir un fichier pour mettre en ligne un fichier d'image.

  • Cliquez sur l'échantillon Couleur de fond pour sélectionner une nouvelle couleur dans une palette.

Pour définir les options de police :

  • Dans la zone Typographie , sélectionnez la police à utiliser pour le titre et le corps du texte dans les menus déroulants.

Pour définir les options de couleur :

  • Dans la zone Couleurs , cliquez sur l'échantillon de couleurs Accents , Boutons ou Erreurs pour choisir une nouvelle couleur dans une palette.

Changer le style de thème

Vous pouvez réinitialiser les paramètres généraux de votre thème à leurs valeurs par défaut. Lorsque vous redéfinissez le style de votre thème, toutes les modifications que vous avez apportées dans l'onglet Paramètres généraux seront supprimées, mais vous ne perdrez pas de contenu tel que du texte et des images.

  1. Cliquez sur l'onglet Paramètres généraux.

  2. Cliquez sur Modifier le style de thème.

  3. Cliquez sur le bouton c Changer le style de thème. Le nom de ce bouton est généralement le nom du thème.

  4. Cliquez sur Changer de style.

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

Essayez gratuitement