Après vous avoir présenté Boundless et Brooklyn, c’est Debut que je vous propose d’explorer aujourd’hui.

Debut est un thème flexible qui peut convenir à tout type de boutique, indépendamment de la taille de votre inventaire. Avec Debut, vous pouvez être prêt à vendre avec un minimum de personnalisation, car il a besoin de peu de paramétrage pour avoir belle allure.

Il rend particulièrement bien sur téléphone et tablette, ce qui peut vous intéresser si votre clientèle émane surtout du réseau mobile.

Comme vous commencez à bien connaître l’utilisation du « Theme editor », je vais surtout m’attarder sur les sections les plus spécifiques à Debut et passer rapidement sur les réglages communs avec ceux des autres thèmes.

 

L’en-tête et le pied de page

 

  • L’en-tête et le pied de page se configurent à partir de n’importe quelle page ouverte dans le « Theme editor ».
  • L’en-tête se trouvant toujours en haut de page, il est impossible de déplacer cette section ailleurs dans la page.
  • Il a la particularité de pouvoir afficher une annonce générale, celle-ci vous permettant d’accéder directement à une page de votre choix dans la boutique (ou à une adresse externe).
  • Le pied de page peut contenir deux menus (un principal et un secondaire).
  • Vous pouvez y faire figurer une section d’inscription à votre newsletter.
  • Vous pouvez choisir d’afficher ou pas les icônes des méthodes de paiement acceptées dans votre boutique, ainsi que le message « Powered by Shopify / Propulsé par Shopify » ou pas.

Éléments de configuration essentiels de l’en-tête :

  • Passez par « Sections » / « Header ».
  • Choisissez l’alignement du logo dans la zone « Logo alignment area » et l’image elle-même dans « Upload image ».
  • Le champ « Custom logo width » permet de saisir, en pixels, la largeur du logo.
  • Dans l’ascenseur « Menu », sélectionnez le menu à faire apparaître dans l’en-tête.
  • L’annonce générale de la boutique :
    • Elle s’active en cochant la case « Show announcement »
    • Saisissez le texte de l’annonce dans « Announcement text »
    • Entrez le lien (facultatif) de la page vers laquelle est liée l’annonce dans le champ « Announcement link » ou sélectionnez-la directement dans le menu déroulant s’il s’agit d’une page de la boutique.
    • Changez la couleur de fond de la zone d’annonce en cliquant sur la couleur à côté de « Announcement color », pour afficher la palette de sélection.

Éléments de configuration essentiels du pied de page :

  • Passez par « Sections » / « Footer ».
  • Dans l’ascenseur « Primary menu », sélectionnez le menu principal à faire apparaître dans le pied de page.
  • Dans l’ascenseur « Additional menu », sélectionnez le menu secondaire.
  • Pour afficher un lien d’inscription à votre newsletter, cochez « Show newsletter signup ».
  • Pour afficher les icônes des systèmes de paiement, cochez « Show payment icons ».

 

La page d’accueil de la boutique

 

Elle inclut 4 sections par défaut :

  • Une image avec un texte en surimpression.
  • Une collection mise en avant.
  • Une image avec du texte adjacent.
  • Un diaporama.

Ces sections peuvent être déplacées, complétées, supprimées, etc. pour aller plus loin dans la personnalisation de votre page d’accueil.

 

L’image avec le texte en surimpression

 

Il s’agit d’une façon unique de mettre les particularités de votre boutique en avant. Dès que vous modifiez l’en-tête de l’image, l’intitulé de la section « Image with text overlay » est automatiquement actualisé.

Vous pouvez ajouter un bouton sur cette image, pour renvoyer vos visiteurs vers n’importe quelle page de la boutique. Vous pouvez aussi changer l’alignement de l’image au sein de la section, ajuster la hauteur de la section, et choisir la taille du texte.

Éléments de configuration essentiels de cette section :

  • Passez par « Sections » / « Image with text overlay ».
  • Choisissez l’image dans « Image / Upload image ».
  • Choisissez l’alignement de l’image dans la zone « Image alignment », en sélectionnant « Top », « Middle » ou « Bottom » (haut, milieu ou bas).
  • Donnez un titre à la section dans le champ « Heading ».
  • Saisissez le texte complémentaire dans le champ « Text ».
  • Choisissez la hauteur de l’image dans la liste « Section height ».
  • Personnalisez la taille du texte en sélectionnant le format dans la liste « Text size ».
  • Le texte du bouton se modifie dans le champ « Button label ».
  • Le lien entre le bouton et une page de la boutique se sélectionne dans le champ « Button link ».

Si l’image est plus large que la hauteur de la section, elle sera coupée. Afin de vous assurer que les éléments importants de votre image restent visibles, utilisez les tailles correspondant au réglage qui vous intéresse :

  • « Extra small » : 1 200 pixels par 200 pixels
  • « Small » : 1 200 pixels par 300 pixels
  • « Medium » : 1 200 pixels par 375 pixels
  • « Large » : 1 200 pixels par 650 pixels
  • « Extra large » : 1 200 pixels par 775 pixels

 

La collection mise en avant

 

Dans Debut, cette section a la particularité de vous permettre d’ajouter un bouton « Tout voir », afin que vos visiteurs puissent accéder la collection complète.

Vous pouvez aussi afficher le nom du vendeur en dessous de l’image de chaque produit.

Éléments de configuration essentiels de cette section :

  • Passez par « Sections » / « Featured collection ».
  • Le texte affiché au-dessus de la collection se personnalise dans le champ « Heading ».
  • La collection se choisit dans la liste « Collection ».
  • L’ascenseur « Products per row » permet de choisir le nombre de produits à afficher dans chaque ligne.
  • Dans l’ascenseur « Rows », sélectionnez le nombre de lignes de produits à afficher.
  • Si vous voulez afficher le nom de la marque ou du vendeur sous chaque image de produit, cochez « Show product vendor ».
  • Si vous voulez laisser les clients voir tous les produits de la collection mise en avant, cochez « Show “View all” button ».

 

L’image avec texte

 

Avec Debut, vous pouvez ajouter sur votre page d’accueil une image accompagnée d’un texte à droite ou gauche.

Vous pouvez aussi ajouter un bouton qui lie cette section à une page de la boutique.

Cette section est intéressante à utiliser pour faire la promotion d’un produit ou d’une collection, ou encore créer du trafic vers le blog de la boutique.

Éléments de configuration essentiels de cette section :

  • Passez par « Sections » / « Image with text ».
  • Choisissez l’image à faire apparaître dans la zone « Image ».
  • Le choix entre un affichage à gauche ou droite de l’image se fait via l’ascenseur « Layout ».
  • Utilisez les champs « Heading » et « Text » pour saisir le titre et le texte d’accompagnement.
  • Le texte du bouton se modifie dans le champ « Button label ».
  • Le lien entre le bouton et une page de la boutique se sélectionne dans le champ « Button link ».

 

Le diaporama

 

Avec Debut, vous pouvez créer un diaporama d’images et de vidéos.

Vous pouvez fixer une fréquence de rotation et y inclure un texte lié à une page de votre boutique.

Encore une fois, les images du diaporama peuvent être coupées en fonction de l’écran qui affiche la boutique et des tailles que vous avez choisies.

Pour éviter les coupures trop importantes, utilisez des images adaptées à vos réglages :

  • « Small » : 1 200 pixels par 475 pixels
  • « Medium » : 1 200 pixels par 489 pixels
  • « Large » : 1 200 pixels par 775 pixels

L’idéal est de vérifier l’affichage de votre diaporama sur différents écrans et en utilisant différents alignements (« Top », « Middle » et « Bottom »), pour vous assurer que les parties importantes de l’image ne sont pas coupées ou trop décalées sur le bord.

Pour les éléments vidéo de votre diaporama, Debut intègre YouTube. Ces vidéos peuvent être jouées automatiquement, sans son, ou vous pouvez les régler en mode manuel et inclure le son.

Pour les appareils ne pouvant pas afficher les vidéos, une image (que vous choisissez) est affichée en remplacement.

Note importante : pour intégrer une vidéo YouTube, vous devez disposer d’une ID YouTube, c’est-à-dire le code de la vidéo qui se trouve à la fin de son adresse, après le signe « = ». Par exemple, dans l’adresse https://www.youtube.com/watch?v=aa11bb22cc3, c’est le code aa11bb22cc3 que vous allez utiliser.

Éléments de configuration essentiels d’une image :

  • Passez par « Sections » / « Slideshow ».
  • Choisissez vos images via « Content / Image slide / Image area ».
  • Les autres réglages (titre, texte, lien) se déterminent de façon quasi identique à ceux des sections évoquées précédemment.

Éléments de configuration essentiels d’une vidéo :

  • Dans la zone « Content / Add content », sélectionnez « Video slide ».
  • Saisissez l’ID de la vidéo YouTube dans le champ « YouTube video ID ».
  • Dans la liste « Style », sélectionnez l’une des options d’affichage suivantes :
    • « Image with play button » correspond à un bouton de déclenchement, avec audio inclus.
    • « Background video with play button » est un réglage similaire, mais sans le son.
    • « Background video » correspond à un lancement automatique de la vidéo, sans bouton « play » et sans audio.
  • Pour sélectionner une photo de remplacement, lorsque la vidéo n’est pas visible par le terminal du client, passez par « Image / Upload image ».
  • Si vous voulez que le diaporama tourne automatiquement, cochez « Auto-rotate slides », puis sélectionnez la fréquence, en secondes, dans le menu « Change slides every ».
  • Dans la liste « Section height », choisissez une hauteur pour le diaporama (« Small », « Medium » ou « Large »).
  • Même chose pour le texte, via le menu « Text size ».

 

Le blog

 

Debut permet de lister les articles de blog ou de les afficher sous forme de grille.

Si votre blog contient plus d’un article, vous pouvez afficher le nom de l’auteur de l’article pour chacun d’eux, ainsi que la date de publication.

La personnalisation du blog dans le « Theme editor » se fait lorsqu’une page du blog est ouverte :

Éléments de configuration essentiels de la section :

  • Passez par « Sections » / « Blog pages ».
  • Le choix entre l’affichage par liste ou sous forme de grille se détermine dans la liste « Layout ».
  • Cochez « Show author » pour afficher le nom de l’auteur de chaque article.
  • Cochez « Show date » pour afficher la date de publication de chaque article.

 

Les pages de collection et les produits

 

Ces paramètres se règlent de la même façon que dans les autres thèmes, présentés dans les focus précédents, et je ne m’étends donc pas dessus.

Rappel : vous devez ouvrir une page correspondant à ce que vous souhaitez régler, pendant que le « Theme editor » est ouvert.

Particularité de Debut : comme pour l’affichage du blog, collections et produits peuvent être montrés sous forme de grille ou de liste.

 

Zone de commentaire dans la page de panier

 

Debut vous permet d’ajouter une zone de commentaires pour les clients dans la page de panier, grâce à laquelle ils peuvent commenter leur commande en vous laissant une note (demande de personnalisation d’un article, remarque pour une livraison, etc.).

Cette fonction se paramètre en ouvrant d’abord la page de panier dans le « Theme editor », puis en cliquant sur « Sections / Cart page » et en cochant « Enable cart notes ».

Voilà l’essentiel à connaître pour le thème Debut. Je vous retrouve prochainement pour des focus sur d’autres thèmes Shopify gratuits.

À très bientôt pour la suite !