Aujourd’hui, je vais vous parler du sixième thème disponible dans l’offre gratuite de Shopify : Narrative.

Il s’agit d’un thème très particulier, dont le design visuel a été pensé selon une logique de « storytelling », où vous misez sur les visuels pour attirer l’attention et séduire vos prospects.

 

Présentation générale

 

Ce thème peut répondre tout spécialement aux vendeurs qui :

  • Utilisent des images et de la vidéo pour raconter une histoire au sujet de la marque.
  • Ont envie de communiquer autour de leur vision, de leur mission ou de leurs valeurs.
  • Veulent mettre en valeur le design d’un produit unique ou d’un petit catalogue.

Par défaut, la page d’accueil inclut un diaporama pleine largeur, une image assortie de texte et une vidéo.

Ce thème, de façon globale, repose sur l’omniprésence des éléments visuels, avec un minimum de texte.

Dans ce focus, je ne vais pas revenir sur les éléments communs aux thèmes évoqués dans les articles précédents, mais vous présenter les fonctions spécifiques de Narrative, pour que vous puissiez évaluer l’intérêt de ce thème dans le cadre de votre activité.

Comme la logique générale de personnalisation des thèmes est identique à chaque fois, vous devez maintenant être assez familiarisé avec le principe pour retrouver intuitivement les sections communes.

Rappel : tous les réglages dont je parle dans cette série de focus sont à effectuer dans le « Theme editor » de Shopify, dans les onglets « Sections » ou « General settings ».

 

L’en-tête

 

Quelques particularités, en plus des réglages communs à tous les thèmes (à effectuer dans « Sections / Header » :

  • Ce thème propose un double menu de navigation accessible par l’internaute via un bouton présent en haut à gauche de la page.

Vous devez choisir un menu primaire et un menu secondaire, parmi les menus créés dans votre boutique.

  • L’en-tête inclut un réglage qui peut changer l’apparence du menu en le rendant transparent, ce qui signifie qu’il utilisera le même fond que la section suivante. Vous pouvez l’activer en cochant « Enable transparent header on the home page » et en cochant « Transparent header icons color » pour sélectionner une couleur relative à divers boutons intégrés.

Cette particularité n’est valable que pour la page d’accueil de la boutique.

  • Pour l’icône de panier, vous pouvez choisir entre un logo de sac ou un logo de panier.

 

Le pied de page

 

Narrative vous permet :

  • D’ajouter un second menu au menu établi par défaut.
  • D’ajouter un formulaire d’inscription à votre newsletter.
  • De montrer ou cacher les icônes de paiement acceptées dans votre boutique.
  • De montrer ou cacher vos icônes des réseaux sociaux.

Les réglages s’effectuent dans « Sections / Footer » et sont similaires à ceux dont je vous ai déjà parlé dans les articles précédents. Je n’y reviens donc pas de façon détaillée.

 

La page d’accueil

 

Par défaut, Narrative inclut 6 sections dans la page d’accueil :

  • Un diaporama
  • Une image assortie de texte
  • Une galerie d’images
  • Une image avec du texte en surimpression
  • Un diaporama de mises en avant
  • Une collection mise en avant

Vous pouvez bien sûr réarranger ces sections comme vous le souhaitez, même si je vous conseille de préserver l’aspect très visuel de cette page d’accueil.

Si vous avez besoin de mettre en avant des blocs de texte plus importants, Narrative n’est peut-être pas le thème qui sera le plus adapté pour vous.

 

Le diaporama

 

En haut de la page réglée par défaut se trouve un diaporama qui vous permet de mettre en valeur jusqu’à 5 images et/ou vidéos.

Pour cette section (et plus globalement, dans tout le thème Narrative), je vous recommande de sélectionner des images de haute qualité et dont les éléments importants sont bien centrés (pour éviter toute coupe automatique non désirée, le thème s’adaptant de lui-même à l’affichage du visiteur).

Pendant la phase de personnalisation, prenez l’habitude de contrôler le rendu sur d’autres terminaux que votre ordinateur, afin de vérifier ce que voient vos clients.

Pour inciter vos visiteurs à cliquer sur les images du diaporama, de larges boutons sont affichés en bas des images, en plus d’un intitulé (qui peut ne pas être utilisé, si vous laissez le champ « Heading » correspondant vide).

Attention : certains appareils mobiles ne supportent pas l’affichage des vidéos dans le diaporama et vous devez donc prévoir une image de remplacement qui apparaîtra à la place.

Tous les réglages sont à effectuer dans « Sections / Slideshow », puis dans la zone « Content » et vous pouvez retrouver le détail de chaque fonction dans les articles où je vous ai présenté les autres thèmes gratuits.

Idéalement, les images de cette section doivent mesurer de 1 200 à 2 000 pixels de largeur et 400 à 600 pixels de hauteur.

 

L’image assortie de texte

 

Cette section est très utile pour mettre un élément de branding en avant, avec un message personnalisé à côté.

Cette image peut être coupée pour apparaître sous forme de rond ou de carré (« Square » ou « Circle »).

Vous pouvez aussi choisir de ne pas la retailler et vous contenter de sélectionner un alignement d’image qui vous assurera une absence de coupure du côté choisi lorsque l’image est automatiquement coupée.

Par exemple, si vous choisissez un alignement « Bottom center », la partie basse et centrale de l’image ne sera pas altérée.

Les réglages sont à effectuer dans « Sections / Image with text ».

La section elle-même peut être réglée pour prendre plus ou moins de place, via le réglage « Section spacing » qui peut être « Small », « Medium », « Large » ou « Extra large ».

L’affichage varie selon que la boutique est consultée sur ordinateur (choix entre gauche et droite) ou terminal mobile (choix entre haut et bas) et vous pouvez choisir ce réglage dans « Desktop layout list » et « Mobile layout list ».

 

La galerie

 

Cette section (à personnaliser dans « Sections / Gallery) peut montrer jusqu’à trois images.

Elle vous permet aussi de sélectionner une icône dans une liste de 13 icônes disponibles, à afficher par-dessus l’image (si vous n’en voulez pas, vous devrez sélectionner « None » pour cette fonction).

L’option de lier chaque image à une adresse Web externe ou une page de la boutique est aussi disponible. Pour l’activer, vous devez saisir une adresse ou sélectionner un contenu de la boutique dans une liste.

 

L’image avec texte en surimpression

 

Narrative vous permet d’afficher un message personnalisé par-dessus une image. Il peut s’agir, par exemple, de la description d’un produit, d’une annonce générale ou d’un message de bienvenue.

Cette section se personnalise dans « Sections / Image with text overlay », via les zones de saisie « Image », « Text », « Button » et « Overlay ».

Si vous choisissez une image de fond sombre, sélectionnez une couleur de texte qui sera claire, et inversement.

Cette logique s’applique à toute section dans laquelle il vous est possible d’afficher un texte par-dessus un visuel.

 

Le diaporama de mises en avant

 

Cette section vous permet de mettre en avant plus d’informations à propos de votre catalogue, sans que le visiteur ait besoin de quitter la page d’accueil de la boutique.

Vous pouvez y montrer les caractéristiques de certains produits, présenter une nouvelle collection ou les variantes d’un produit, avec jusqu’à cinq diapositives.

Ce diaporama fonctionne mieux lorsque le nombre de diapositives reste faible, puisque la navigation sur la page est bloquée pendant que votre visiteur consulte les contenus de cette section.

Lorsque ce diaporama est affiché sur un téléphone portable, il faut cliquer sur le contenu visuel pour en voir le détail.

Par conséquent, mon conseil pour l’affichage sur mobile est de proposer une image attractive avec un petit texte d’appel à l’action, qui permet au visiteur de comprendre qu’il a accès à d’autres informations.

Tous les réglages de cette section sont à paramétrer dans « Sections / Featured slider ».

Chaque diapositive se règle dans « Content », où vous allez sélectionner chaque image, le titre à faire apparaître, le texte de chaque bouton et le lien de redirection individuel.

Les réglages généraux (« Featured slider settings ») s’appliquent à toutes les diapositives du diaporama à la fois.

Dedans, entre autres fonctions :

  • Vous avez la possibilité de personnaliser vos boutons, et vous pouvez choisir « Use secondary button style » pour afficher vos boutons de façon transparente, avec un simple encadré de couleur.
  • « Slide heading color » permet de changer la couleur du texte.
  • « Cover settings » est la section où se détermine l’image de couverture du diaporama.
  • Dans « Header list », vous saisissez le titre global de la section.
  • « Header position list » vous permet de choisir si l’affichage de ce titre se fait à gauche ou au centre de l’image (pour les visites via ordinateur, uniquement).

 

La collection mise en avant

 

Cette section se règle globalement comme dans les thèmes déjà vus précédemment et je ne vais donc pas m’attarder dessus.

Vous pouvez la paramétrer dans « Sections / Featured collection », en choisissant une collection parmi la liste existante.

Dedans, vous pouvez choisir l’espace entre les images, déterminer un intitulé, afficher ou pas le nom du vendeur, permettre à vos clients de voir tous les produits de la collection (via un bouton) et fixer le nombre de produits apparaissant à chaque ligne.

 

Autres fonctions

 

La plupart des autres sections disponibles sont très similaires à celles que vous avez déjà vues dans les articles précédents.

Notez quelques spécificités :

  • Si vous ouvrez le « Theme editor » alors que vous naviguez dans votre blog, vous pouvez ouvrir « Sections / Blog pages » et cochez « Show date », pour que la date de publication de chaque article s’affiche.
  • Si vous personnalisez une page produit, vous pouvez (en plus des personnalisations déjà vues) faire apparaître les images des variantes d’un produit, en cochant « Show variant images in gallery »).
  • Pour la page de panier, vous pouvez activer la fonction de note personnalisée pour le client (« Show cart note » doit être coché).

De plus, si le thème propose un panier en affichage « tiroir » (qui s’ouvre latéralement sur la page, sans la fermer), vous pouvez choisir de passer en mode pleine page en décochant « Show cart drawer » dans l’onglet « General settings ».

 

Réglages généraux

 

Dans l’onglet « General settings », vous pouvez aussi personnaliser (voir les focus précédents, pour plus de détails) :

  • Les options de couleur de votre boutique.
  • La typographie des titres et des textes.
  • L’activation des icônes de vos réseaux sociaux et de la fonction de partage de vos contenus.
  • L’affichage d’une favicône.
  • La page de confirmation de commande (où vous pouvez afficher une bannière spécifique en haut de la page, votre logo, une image de fond et des polices/couleurs spécifiques à cette page).

Les réglages de cette section sont multiples et peuvent être retrouvés dans « Checkout », avec plusieurs zones à personnaliser.

Pour en savoir plus sur le détail des paramètres, je vous invite à relire les articles précédents, où j’ai beaucoup plus détaillé toutes les manipulations, section par section.

Dans le prochain article, je vous parlerai des particularités de Pop et Simple, deux autres thèmes gratuits proposés par Shopify, le premier étant axé sur une navigation plus puissante que la moyenne et le deuxième étant pensé pour offrir une grande simplicité d’affichage à vos clients.

À très bientôt pour la suite !