Dans cet article, suite et fin de la série de focus consacrés aux thèmes gratuits de Shopify, dans le cadre du cycle consacré.

Je vous propose de boucler cette séquence avec Supply et Venture, qui sont tous deux pensés pour les boutiques proposant de gros catalogues de produits.

Je rappelle à toutes fins utiles que je ne rentre pas dans le détail des fonctions communes déjà largement évoquées dans les premiers articles de cette série, pour vous parler surtout des points forts et particuliers de ces deux thèmes. De plus, tous les réglages évoqués sont à retrouver dans le « Theme editor ».

 

1/ Supply

 

C’est un thème simple, facile à utiliser pour les clients ayant de gros inventaires et de nombreuses collections.

Il se distingue par une navigation particulièrement travaillée, de multiples collections en page d’accueil, un filtrage dans la barre de navigation latérale et une intégration simplifiée de l’application « Product Reviews ».

Supply est idéal pour vous si :

  • Vous avez plus de 50 produits.
  • Plus de 5 collections.
  • De grands menus.

Si votre offre est plus modeste, mais que les éléments de navigation de Supply vous plaisent, je vous conseille de plutôt choisir Minimal.

À l’inverse, si vous voulez pouvoir gérer de gros inventaires, comme dans Supply, mais que vous voulez une approche plus imagée, alors intéressez-vous plutôt à Venture, dans la deuxième partie de cet article.

 

L’en-tête

 

Supply inclut des réglages uniques pour l’en-tête. Vous pouvez choisir un menu à y afficher, télécharger un logo et afficher un message à vos clients.

Rendez-vous dans « Sections / Header » et :

  • Sélectionnez un menu dans la liste.
  • Téléchargez un logo en .png de 400 pixels de large. Si vous souhaitez utiliser le réglage « Custom logo width » pour agrandir le logo, téléchargez une version plus large.
  • Avec Supply, vous pouvez saisir un message dans l’en-tête (jusqu’à 55 caractères) et il apparaîtra au-dessus de la barre de recherche.

Il peut s’agir d’un message de bienvenue, d’une offre ponctuelle ou d’une réduction globale en cours, par exemple.

Ce message se saisit dans la zone « Message », avec possibilité d’ajouter du gras ou de l’italique.

 

Le pied de page

 

Supply vous permet d’ajouter un menu de navigation et des informations de contact dans le pied de page. Vous pouvez aussi afficher un formulaire d’inscription à votre newsletter et un lien vers vos conditions générales, par exemple.

Dans les réglages « Supply / Footer » :

  • Cochez « Show social media icons » pour lier votre boutique aux réseaux proposés.
  • Dans la liste « Legal menu », choisissez un menu (préalablement créé) à afficher dans votre pied de page et dirigeant vers les pages relatives à toutes vos conditions.
  • Dans « Content », cliquez sur « Quick links » pour sélectionner un second menu, qui lui pourrait rediriger vers d’autres pages de contenus d’information (comme « À propos » ou « Collection ») et ajoutez-lui un titre dans « Heading ».
  • Dans la zone « Content area », cliquez sur « Get in touch » pour accéder aux réglages de la zone d’infos de contact. Vous pouvez y saisir vos téléphones, email, etc.

Dans « Container width », vous pouvez sélectionner le pourcentage de largeur de cette zone d’information, qui peut prendre jusqu’à 50 % de l’espace.

  • Le formulaire de newsletter vous permet d’ajouter automatiquement les gens qui s’inscrivent à votre liste de clients dans la boutique.

Vous pouvez personnaliser son intitulé (« champ Heading ») et sa largeur (« Container width »), qui peut prendre jusqu’à 33 %. Vous pouvez aussi la supprimer (« Delete ») si vous le préférez.

 

Le diaporama

 

Cette section de page d’accueil vous permet de télécharger des images qui vont pouvoir s’afficher sous forme de diaporama manuel ou automatique, en réglant la fréquence, en secondes, de la rotation (je vous conseille de régler cette fréquence de façon élevée si vos diapos contiennent du texte, pour que vos clients aient le temps de lire les contenus).

Supply vous permet de sélectionner jusqu’à 6 images, avec possibilité d’intégrer une adresse de page boutique dans chaque diapo.

Idéalement, chaque image doit mesurer 1 000 pixels par 500 pixels et elles doivent toutes être au même format, si vous choisissez une autre taille, pour éviter les sautes dans le diaporama.

La personnalisation du diaporama dans son ensemble et dans les images individuelles se fait dans « Sections / Slideshow ».

 

Les collections mises en avant

 

Cette section se paramètre comme je vous l’ai déjà expliqué dans d’autres articles (« Sections / Featured collections ») et je ne m’attarde donc pas dessus.

 

Les lignes de collections

 

Supply permet en plus d’afficher en page d’accueil des produits issus de plusieurs collections.

Vous pouvez choisir jusqu’à 4 collections et 4 lignes de 5 produits, et tout se paramètre dans « Sections / Collections rows ».

  • Cette section est particulièrement adaptée pour la mise en avant de nouveaux articles ou de collections qui sont en promotion.
  • Conseil : même si vous pouvez afficher jusqu’à 4×5 produits sur la page d’accueil, préférez un réglage plus petit, car 20 produits vont ralentir l’affichage et risquent aussi d’être trop envahissants aux yeux des lecteurs.
  • Cochez « Show saved amount » pour afficher ce que le client gagnerait à acheter un produit en promotion.
  • Et cochez « Show compare at price » pour afficher le prix d’origine du produit.

 

La page produit

 

Dans Supply, en plus des réglages standard, vous pouvez configurer les options suivantes (dans « Sections / Product », lorsque votre « Theme editor » est ouvert sur une page produit) :

  • Permettre aux clients de zoomer dans les images des produits, ce qui peut être très utile pour montrer les détails d’un article qui le nécessite.

Zoomer dans une image est un peu différent dans Supply, par rapport aux autres thèmes, car le zoom se fait sans pop-up et directement dans l’image d’origine.

Pour que le zoom soit fonctionnel, les images doivent mesurer au moins 480 par 480 pixels (mais je conseille des images de plus grande taille).

  • Afficher un sélecteur de quantité, pour que le client puisse commander plusieurs exemplaires d’un même produit.
  • Afficher les quantités restantes d’un produit, lorsqu’il reste moins de 10 exemplaires (attention, pour que ça fonctionne, il faut avoir activé la fonction « Enable inventory tracking » dont j’ai longuement parlé dans la série consacrée aux produits.
  • Personnaliser le message affiché quand un article est en rupture de stock (si vous avez configuré le produit en ce sens), en cochant la case « Show incoming stock transfer message when sold out ».
  • Afficher le gain pour le client, lors d’une promotion (« Show saved amount »), qui s’affichera au prix net le plus proche (par exemple, 25 € si l’économie est de 25,09 €).
  • Afficher les produits similaires (« Show compare at price »), lorsque le produit montré appartient à une collection (sinon, rien ne s’affichera).
  • Paramétrer l’app « Product Reviews », en cochant « Enable product reviews » et en sélectionnant une couleur dans la palette pour les étoiles.

Pour cela, vous devez avoir installé l’app au préalable (à récupérer gratuitement dans l’App store de Shopify).

Notez que la logique est la même pour l’affichage dans une page de collection.

 

2/ Venture

 

Ce thème est sobre, mais très visuel. Il est lui aussi adapté aux boutiques proposant une large gamme de produits (plus de 50).

Ses fonctions principales :

  • Un diaporama pleine largeur.
  • Un menu de navigation multicolonnes.
  • Une barre de message promotionnel.

 

L’en-tête

 

En vous rendant dans « Sections / Header », vous pouvez :

  • Télécharger votre logo, en saisissant sa largeur en pixels dans « Custom logo width ».
  • Choisir le menu que vous désirez afficher (en l’ayant préalablement créé).
  • Cocher « Enable promotions bar » si vous désirez activer la barre de message promotionnel.

Saisissez ensuite son titre, le message et l’URL éventuelle qui vous intéresse.

Notez que la couleur de fond de la barre se règle dans l’onglet « General settings » et pas dans la section elle-même.

 

Le pied de page

 

Il peut contenir des menus, les icônes des réseaux sociaux, le formulaire d’inscription à votre newsletter et du texte libre.

Les réglages (dans « Sections / Footer ») vous permettent de paramétrer ces diverses zones.

Comme ils sont similaires à ceux des autres thèmes, je ne m’attarde pas dessus.

 

Le diaporama de la page d’accueil

 

Dans Venture, ce diaporama est toujours situé juste en dessous de l’en-tête (vous ne pouvez pas déplacer cette section plus bas dans la page).

Chaque image peut contenir un titre, un sous-titre et du texte (qui peut lui-même inclure un lien renvoyant vers une autre page de la boutique ou un site externe).

Pour ce thème, la taille idéale des images est de 1 800 pixels par 1 000 pixels.

Comme il est « responsive », Venture peut couper vos images pour s’adapter à divers terminaux de lecture. Par conséquent, attention de bien respecter les habituelles bonnes pratiques pour ce qui concerne les éléments importants et le centrage, ainsi que la non-intégration de textes dans les images elles-mêmes.

Si vous ne souhaitez afficher aucun texte, vous pouvez laisser en blanc les champs « Heading » et « Subheading ».

Pour le reste, les réglages suivent la même logique que d’habitude, dans « Sections / Slideshow ».

 

Les collections mises en avant sur la page d’accueil

 

Sur ordinateur et tablette, vous pouvez afficher jusqu’à 6 collections mises en avant sur votre page d’accueil.

Sur les téléphones portables, ces collections montreront par défaut le menu principal, ceci pour faciliter la navigation de vos clients.

Dans « Sections / Collection list », vous pouvez cocher « Stretch collection image » pour que vos images de collections remplissent complètement chaque cadre.

Si vous choisissez ce réglage, il peut être utile de changer le réglage « Colors » de « Featured collection titles », pour un bon contraste.

 

Les produits mis en avant sur la page d’accueil

 

Sur les ordinateurs et tablettes, vous pouvez afficher des groupes de produits, en choisissant dans « Sections / Featured collection » la collection qui vous intéresse et le nombre de lignes à afficher.

 

L’image assortie de texte sur la page d’accueil

 

Venture offre l’accès à la section « Image with text », qui permet d’afficher une image assortie de texte à gauche ou droite.

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

Les réglages sont à effectuer dans « Sections / Image with text », où vous déterminez choix de l’image, titre, texte et alignement gauche ou droite.

 

L’affichage des pages de produits

 

Venture vous permet, dans « Sections / Product pages » :

  • D’afficher les quantités restantes d’un produit proche de la rupture (selon la même logique que Supply).
  • Empêcher la page de panier de s’ouvrir automatiquement lorsqu’un client sélectionne un produit, en cochant « Stay on current page when item is added to cart ».
  • D’offrir à vos clients la possibilité de partager vos produits sur les réseaux, en cochant « Enable product sharing ».

 

L’affichage des pages de collections

 

Vous pouvez (dans « Sections / Collection pages ») activer le tri et le filtre des contenus de collection pour vos clients, afin de les aider à trouver plus facilement ce qu’ils cherchent.

La fonction « Enable filtering by product tag » ajoute un menu en haut de la page de collection, que les clients peuvent utiliser pour voir seulement les produits tagués avec l’expression qui les intéresse.

La fonction « Enable collection sorting » ajoute une mention « Trier par » en haut de la page. Les clients peuvent utiliser ce menu pour trier les produits par :

  • Featured (« Mis en avant »)
  • Best selling (« Meilleures ventes »)
  • Alphabetically, A–Z (« Ordre alphabétique croissant »)
  • Alphabetically, Z–A (« Ordre alphabétique décroissant »)
  • Price, low to high (« Prix croissant »)
  • Price, high to low (« Prix décroissant »)
  • Date, new to old (« Du plus récent au plus ancien »)
  • Date, old to new (Du plus ancien au plus récent »)

Rappel (j’en ai déjà parlé dans les focus sur la fonction « Collection ») : vous pouvez choisir quels produits sont « featured » dans chaque collection, en réglant l’ordre de l’affichage des produits en mode manuel et en plaçant en haut de la liste le produit que vous voulez mettre en avant.

 

Autres réglages

 

Pour terminer, deux fonctions intéressantes dans Venture :

  • L’activation, dans « Sections / Cart pages », de la zone de commentaire client pour le processus de client, en cochant « Enable order notes ».
  • L’affichage de produits mis en avant dans la barre latérale qui figure sur les articles de blog et les pages fixes de la boutique.

Pour l’activer, allez dans « Sections / Featured products », puis sélectionnez dans la liste « Collection » la collection qui vous intéresse dans ce contexte.

Voilà pour ce dernier récap sur les thèmes gratuits proposés par Shopify.

Dans le prochain focus, toujours relatif à la fonction « Theme », je commencerai à entrer plus dans le détail de certaines personnalisations qui nécessitent une modification du code Liquid de votre boutique.

À très bientôt pour la suite !