Aujourd’hui, suite de l’exploration des quatrième et cinquième thèmes gratuits de Shopify : Jumpstart et Minimal.

Je vais passer assez rapidement sur le premier (qui, par nature, n’est pas le plus utilisé, en raison de ses limitations voulues) et m’attarder un peu plus sur le suivant.

 

1/ Jumpstart

 

C’est un thème très visuel un peu particulier, puisqu’il est spécialement pensé pour l’organisation d’une collecte de fonds dans le cadre d’un projet de financement participatif. Il est néanmoins également très adapté à une petite boutique proposant moins de dix produits.

Voici les caractéristiques spécifiques de ce thème :

  • Sa page d’accueil inclut un encart vidéo et des sections de mise en avant.
  • La page de panier ne propose pas de bouton « Continuer vos achats », car le thème est bâti selon la logique d’une boutique mono-produit : le processus de commande est donc très rapide, une fois que le client a validé son souhait d’achat.
  • La section de « Checkout » est personnalisable.
  • Dans Jumpstart, les produits d’une page de collection sont organisés selon un script appelé « Packery », à partir de l’espace disponible sur la page.

Les images sont donc réarrangées de façon à remplir l’espace du mieux possible, comme des briques empilées (concept appelé « masonry » par les développeurs), ce qui est très pratique lorsque vous avez des images produits à taille variable.

Si vous ne souhaitez pas cet effet d’empilement, il est possible de le désactiver (attention, vous obtiendrez des espaces blancs entre vos images).

Pour cela, vous devez supprimer le bloc de code suivant, dans le fichier « collection.liquid » de votre thème :

{% unless shop.products_count == 0 %}

  {{ ‘//cdnjs.cloudflare.com/ajax/libs/packery/1.4.3/packery.pkgd.min.js’ | script_tag }}

{% endunless %}

  • Afin que la navigation de vos clients soit plus simple, vous pouvez ajouter des liens internes menant aux différentes sections disponibles pour votre page d’accueil.

Pour ajouter des liens internes dans un menu, choisissez le type de lien « Web address » et utilisez l’une des adresses suivantes en tant qu’adresses de destination.

    • Image et vidéo : /#home-video
    • Image et texte : /#home-imagebox
    • Liste des caractéristiques : /#home-features
    • Contenu mis en avant : /#home-page
    • Campagne de financement participatif : /#home-kickstarter
    • FAQ : /#home-faq
    • Diaporama : /#home-slideshow
    • Produit : /#home-product
    • Articles de blog récent : /#home-blog
    • Liste des clients : /#home-clients
  • Le module de la page d’accueil « Produit mis en avant » n’affiche pas la description du produit, celle-ci n’apparaissant que sur la page produit.

Ceci pour une logique générale d’affichage, puisque les nombreuses autres sections de contenu prévues pour la page d’accueil permettent déjà de donner plus d’informations.

Ce module est donc à utiliser selon une logique « d’incitation à l’action », dont l’objectif est de pousser vos clients à cliquer pour acheter.

  • Jumpstart inclut un module unique : « List of clients ».

Ce module est utile pour référencer les clients qui utilisent votre produit ou des mentions dans les médias qui en ont parlé.

Pour chaque référence, vous pouvez ajouter une image de logo et un lien vers le site Web où votre produit a été utilisé ou mentionné.

Jumpstart est très utile pour une boutique à produit unique, car elle se configure très vite, mais ne sera pas vraiment adapté à une boutique que vous avez l’intention de faire grandir à court terme.

Je vous recommande donc de ne pas le choisir si vous savez que votre gamme de produits va se développer, mais de le réserver à des projets très particuliers.

 

2/ Minimal

 

Minimal est un thème large et « responsive » qui s’affiche parfaitement sur n’importe quel terminal.

Il est doté de nombreuses fonctions pensées pour donner une flexibilité complète à votre boutique, qui peut être personnalisée avec des options d’affichage, des vues de produits ou de collections, des styles de navigation et des choix de typographie.

Minimal est idéal si :

  • Vous débutez sur Shopify et n’êtes pas très à l’aise avec le design Web.
  • Vous avez un inventaire moyen à large.
  • Vous voulez ajouter une image de fond à votre page d’accueil.

Je vais passer rapidement sur tous les réglages communs à l’ensemble des thèmes, que j’ai déjà longuement présentés, pour vous parler uniquement des spécificités de Minimal.

 

Les sections d’en-tête et de pied de page

 

Ces deux sections sont personnalisables à partir de n’importe quelle page dans laquelle vous ouvrez le « Theme editor ».

  • Pour l’en-tête, vous pouvez ajouter un logo, avec une taille idéale de 450 x 200 pixels, en format .png. Vous pouvez centrer votre menu de navigation sous le logo.

Vous pouvez aussi ajouter une annonce dans votre boutique qui apparaît tout en haut.

Ces options se personnalisent dans « Sections / Header ».

  • Dans le pied de page, vous pouvez inclure des menus, des articles de blog, un lien d’inscription à votre newsletter et des icônes pour les réseaux sociaux et les modes de paiement.

Ces options se personnalisent dans « Sections / Footer ».

 

Le diaporama de la page d’accueil

 

Avec Minimal, vous pouvez afficher jusqu’à 6 images dans votre diaporama de page d’accueil.

Notez que la taille recommandée pour le diaporama de Jumpstart est de 1280 x 460 pixels.

Certaines des fonctions de ce diaporama sont spécifiques et non accessibles dans les autres thèmes.

  • Vous pouvez aussi choisir un effet de transition entre les images.
  • Vous pouvez afficher un indicateur montrant combien d’images sont visibles dans le diaporama.

Cette section se personnalise dans « Sections / Slideshow ».

 

La section « parler de la marque » (« Talk about your brand »).

 

Ce message personnalisable est une section spécifique de Minimal.

Vous pouvez y décrire un produit, afficher une annonce ou souhaiter la bienvenue à vos visiteurs.

Elle se personnalise dans « Sections / Talk about your brand ». Vous pouvez y saisir un titre dans la zone « Heading » et un texte explicatif dans la zone « Text ».

Vous pouvez modifier la largeur du texte en cochant « Wide display » dans la zone « Settings ».

 

La collection mise en avant

 

Elle se paramètre comme nous l’avons déjà vu dans les focus précédents (« Sections / Featured collection »), mais elle comporte des spécificités.

  • Vous pouvez afficher un cercle autour des produits disponibles, en cochant « Show product sale circle ».
  • Vous pouvez afficher un cercle autour des produits épuisés, en cochant « Show product sold out circle ».
  • Vous pouvez centrer le texte du produit, en cochant « Center text below product images ».

La page de produit

 

En plus des fonctions habituelles, Minimal vous permet d’afficher un sélecteur de quantité, un type de zoom et des produits liés dans la même collection, qui s’affichent sous forme de miniatures.

Ces options se personnalisent dans « Sections / Product pages ».

  • L’affichage du sélecteur de quantités est possible en cochant « Show quantity selector ».
  • Le type de zoom est à sélectionner dans la liste « Image zoom type ».
  • La position des miniatures est à déterminer via la liste « Product thumbnail position ».
  • L’affichage des produits disponibles ou épuisés se fait via des cases à cocher (comme pour la section « Collection mise en avant »).

La page de collection

 

Minimal inclut des options de personnalisation qui vous permettent de paramétrer la façon dont vos produits sont affichés :

  • La possibilité de montrer ou cacher une icône « disponible » ou « épuisé ».
  • La possibilité de montrer ou cacher le nom du vendeur.
  • La possibilité de permettre ou pas à vos clients d’accéder à des options de tri et de filtre de vos produits.
  • La possibilité de choisir l’affichage centré ou à gauche du texte produit.

Ces options se personnalisent dans « Sections / Collection pages ».

 

Largeur de la boutique

 

Avec Minimal, vous pouvez changer la largeur maximale de votre boutique, de 1 030 pixels à 1 340 pixels.

Un affichage plus large permet de montrer des images plus larges, mais il étire aussi votre texte.

C’est donc une fonction à utiliser si vous voulez mettre le focus sur les graphismes plutôt que sur le texte.

Pour l’activer, cochez la case « Enable wide layout » dans l’onglet « General settings ».

 

Couleurs de la boutique

 

Avec Minimal, vous pouvez choisir les couleurs de votre boutique.

Certaines options de couleurs affectent plus d’une section dans votre thème et il vous faudra donc faire des tests pour examiner le rendu dans chaque page.

Vous pouvez aussi afficher une image de fond sur votre page d’accueil. Cette image peut couvrir toute la largeur de la page ou être réglée pour se répéter dans la page.

Ces options se personnalisent dans « General settings / Colors » et dans « General settings / Use theme background ».

 

Typographie

 

Les réglages de typographie vous permettent de spécifier de quelle façon les textes apparaissent dans votre boutique.

Vous pouvez en choisir la police du texte, celle des titres, des liens de navigation et des boutons.

Ces réglages s’effectuent via l’onglet « General settings / Typography ».

  • Vous pouvez cocher « Capitalize text » pour passer les éléments de menus et boutons en majuscules.
  • Vous pouvez cocher « Space letters » pour augmenter l’espace entre les lettres, au sein des liens et des intitulés de bouton.

La favicône

 

Vous pouvez télécharger une image qui sera reprise dans divers affichages relatifs à votre boutique, comme l’onglet ou l’historique de votre navigateur.

Ce réglage s’effectue dans « General settings / Favicon » et l’image doit idéalement être d’un format 32 pixels x 32 pixels, au minimum.

 

Les réseaux sociaux

 

Plusieurs options sont incluses dans Minimal, pour rendre votre boutique plus interactive.

L’activation de ces réglages se fait dans « General settings / Social media ».

  • Vous pouvez afficher les liens de vos réseaux dans le pied de page, en saisissant vos adresses Facebook, Twitter et Pinterest.
  • Vous pouvez permettre à vos clients de partager vos contenus sur les réseaux, en choisissant individuellement quels partages sont possibles.

Dans la zone « Sharing options », cochez la ou les cases qui vous intéressent, entre Facebook, Twitter et Pinterest.

 

Le style de bouton

 

Minimal vous permet de choisir un style pour vos boutons de réseaux sociaux sur les pages de produits.

  • L’option « Fully branded » affiche des boutons de type miniatures, avec des coins arrondis.
  • L’option « Logo only » affiche des boutons plus simples, où le logo du réseau social est placé sous fond blanc, avec une bordure fine.

 

Les styles du thème

 

Minimal est préconfiguré avec trois styles de thèmes et leurs sections associées :

  • « Fashion » : un style blanc et gris foncé fourni avec un diaporama sur la page d’accueil, des lignes de produits mis en avant et des collections affichées sous forme de grilles.
  • « Vintage » : un style blanc et gris clair avec des lignes de produits mis en avant et des collections affichées sous forme de grilles.
  • « Music » : un style noir et blanc avec une image de fond texturée façon papier, qui inclut un diaporama, des produits mis en avant et des collections affichées sous forme de grilles.

Vous pouvez choisir l’un de ces styles via « General settings / Change theme style », afin de gagner du temps, puis y ajouter vos propres options de personnalisation, pour rendre votre thème unique.

Voilà pour l’essentiel à connaître à propos de Jumpstart et Minimal. Dans le prochain focus, je vous parlerai de Narrative, un thème qui permet à votre boutique de raconter une histoire à vos visiteurs.

À très bientôt pour la suite !