Avant de vous parler de code et de personnalisation des thèmes premium, je poursuis la découverte de la fonction « Theme » en vous proposant d’abord quelques focus sur les thèmes gratuits de Shopify, qui sont souvent ceux que les débutants sélectionnent pour le lancement de leur boutique, afin de limiter leurs frais.

Je vous rappelle qu’il en existe aujourd’hui 10, très différents quant aux fonctions et aspects de design qu’ils incluent, et qu’il est donc intéressant de pouvoir savoir en amont à quoi vous attendre, afin de choisir celui qui correspondra le mieux à vos besoins.

Aujourd’hui, je vais donc vous donner un aperçu de Boundless, qui est un thème au design axé sur les images et dont la conception est particulièrement pensée pour les boutiques dont l’inventaire est moyen à grand, puisque vous avez aussi accès à plusieurs sections incluant des menus.

 

Remarques générales

 

La plupart des thèmes incluent des sections « en-tête » et « pied de page » qui sont affichées sur chaque page de la boutique.

Boundless est différent des autres thèmes, puisqu’il n’inclut pas une unique zone d’en-tête, mais propose à la place une barre de menu latérale (« Sidebar menu ») et une barre d’action en haut de chaque page de la boutique (« Action bar »).

Boundless inclut aussi une zone de pied de page (« Footer »), qui est intégrée en bas de chaque page et affiche un menu dédié, celui-ci incluant généralement les fonctions de recherche, un accès à une page « à propos » et les liens vers les conditions générales de la boutique.

 

La barre de menu latérale (rétractable) :

 

Elle fonctionne comme une table des matières pour votre boutique : où que se trouve la personne qui visite votre boutique, il peut cliquer sur le bouton de menu pour afficher cette barre de menu latéral.

Celui-ci contient deux menus :

  • Le menu primaire est affiché en premier, en plus gros caractères.
  • Un menu additionnel est proposé en dessous, en plus petits caractères.

Pour personnaliser ce menu latéral, une fois que vous avez ouvert le « Theme editor » :

  • Cliquez sur « Sections »
  • Cliquez sur « Sidebar menu ».
  • Dans la liste du « Primary menu », sélectionnez le menu que vous voulez afficher en tant que menu primaire (le menu principal de votre boutique).
  • Dans la liste du « Additional menu », sélectionnez le menu que vous désirez afficher en dessous du menu primaire (le menu de type pied de page).
  • Sauvegardez.

 

La barre d’action

 

Par défaut, la barre d’action affiche le menu principal de votre boutique.

Vous pouvez la personnaliser pour montrer d’autres éléments, en fonction de la page que votre visiteur est en train de consulter.

Sur la page d’accueil, la barre d’action est généralement utilisée pour montrer des collections de produits.

À l’intérieur d’une collection, la barre d’action peut afficher des sous-catégories complémentaires ou d’autres collections liées.

Par exemple, si vous vendez des articles d’habillement, votre barre d’action pourrait afficher « Hommes / Femmes / Accessoires » sur la page d’accueil.

Puis, si le visiteur cliquait sur « Femmes », la barre d’action pourrait afficher « Hauts / Pantalons / Chaussures ».

Si vous souhaitez que votre barre d’action fonctionne de cette façon, utilisez votre menu principal pour y afficher les liens de base vers vos collections et placez les liens vers les autres parties de votre boutique (« Contact », « À propos », etc.) dans le menu de pied de page.

Pour personnaliser la barre d’action, une fois que vous avez ouvert le « Theme editor » :

  • Cliquez sur « Sections »
  • Cliquez sur « Action bar ».
  • Dans la liste du « Menu », sélectionnez le menu que vous voulez afficher dans la barre d’action.
  • Sauvegardez.

 

La zone de pied de page

Avec Boundless, vous pouvez afficher un menu dans le contenu de pied de page.

Je vous recommande d’afficher le menu de pied de page à la fois dans la barre de menu latérale et dans la zone de pied de page, afin de faciliter l’accès à vos pages de contenus additionnels.

Pour personnaliser la zone de pied de page, une fois que vous avez ouvert le « Theme editor » :

  • Cliquez sur « Sections »
  • Cliquez sur « Footer ».
  • Dans la liste du « Menu », sélectionnez le menu que vous voulez afficher dans le pied de page.
  • Sauvegardez.

 

Le diaporama

 

Boundless affiche un diaporama (« Slideshow ») plein écran, en haut de la page d’accueil.

Avec ce thème, vous pouvez montrer jusqu’à 6 diapositives sur la page. La taille recommandée pour les images de ce diaporama est de 1 000 pixels x 1 000 pixels.

De plus, Boundless inclut plusieurs fonctions relatives au diaporama qui ne sont pas disponibles dans tous les thèmes. Par exemple, vous pouvez afficher un logo ou le nom de votre boutique au centre du diaporama. Vous pouvez aussi appliquer un fond de couleur sur les images.

Pour personnaliser le diaporama, une fois que vous avez ouvert le « Theme editor » :

  • Cliquez sur « Sections »
  • Cliquez sur « Diaporama ».

Ensuite, pour ajouter une image au diaporama :

  • Dans la zone « Content », cliquez sur « Image ».
  • Dans la zone « Image », cliquez sur « Upload image » pour sélectionner une image parmi vos fichiers, ou cliquez sur le lien « Select from library » pour choisir une image déjà téléchargée dans votre boutique.

Pour afficher le nom de votre boutique sur les images du diaporama :

  • Dans la zone « Logo », cliquez sur « Text color » pour choisir une couleur de texte dans la palette.
  • Dans la liste « Logo type », sélectionnez « Store name text ». Le nom de votre boutique est automatiquement affiché.

Pour afficher le logo de votre boutique sur les images du diaporama :

  • Dans la zone « Logo », cliquez sur la liste « Logo type » et sélectionnez « Custom logo ».
  • Dans la zone « Custom logo image », cliquez sur « Upload image » pour sélectionner une image parmi vos fichiers, ou cliquez sur le lien « Select from library » pour choisir une image déjà téléchargée dans votre boutique.
  • Saisissez la largeur du logo (en nombre de pixels) dans le champ « Logo width ».

Pour appliquer un fond de couleur aux images du diaporama :

  • Dans la zone « Overlay », cliquez sur « Image overlay color » pour choisir une couleur de texte dans la palette.
  • Dans la liste « Opacité », choisissez un pourcentage de transparence pour la couleur.

 

Le texte enrichi

 

Utilisez la section « Rich text » pour saisir les contenus textuels que vous voulez afficher sur votre page d’accueil ou pour y intégrer n’importe quelle page créée dans votre boutique.

Par exemple, vous pouvez inclure vos prochains événements en intégrant votre page de blog, ou afficher une page proposant l’un de ces contenus :

  • Les vidéos de votre boutique.
  • Une map Google pour y montrer l’adresse de votre boutique.
  • Des informations de contact.

Pour personnaliser cette fonction, une fois que vous avez ouvert le « Theme editor » :

  • Cliquez sur « Sections »
  • Cliquez sur « Rich text ».
  • Si vous voulez ajouter du texte, cliquez sur « Text » et saisissez le contenu dans le champ « Text ». Cliquez sur les icônes correspondantes pour ajouter du gras ou de l’italique au texte sélectionné.
  • Si vous voulez afficher une page de votre boutique, cliquez sur « Add content », puis cliquez sur « Page ». Sélectionnez dans le menu déroulant la page à inclure dans votre page d’accueil.
  • Sauvegardez.

 

La collection mise en avant

 

Dans votre « Theme editor », via la section « Featured collection », l’option « Image style » vous permet de modifier la façon dont vos produits et collections s’affichent :

  • « Tall / Square » est la meilleure option si vos images de produits sans carrées ou au format portrait.
  • « Wide » est plus adapté aux images larges, de type « paysage ».

L’option « Image size » détermine la largeur de vos images de produits dans les pages de collections : si vous affichez des images plus petites, vous pouvez faire entrer plus d’images dans une seule ligne.

Le nombre d’images montrer par ligne dépend aussi du type d’appareil utilisé par vos visiteurs (ordinateur, tablette ou smartphone).

Pour personnaliser cet affichage, une fois que vous avez ouvert le « Theme editor » :

  • Cliquez sur la section « Featured collection ».
  • Sélectionnez une collection à partir de la liste « Collection ». Jusqu’à 50 produits seront affichés, parmi tous les produits de la collection choisie.
  • Dans la liste « Image style », choisissez l’option « Tall/Square » ou « Wide ».
  • Dans la liste « Image size », choisissez une taille d’image, entre « Small », « Medium », « Large » ou « Extra large ».
  • Pour augmenter l’espace autour des images des produits, cochez « Add image spacing ».
  • Pour afficher le nom du vendeur ou de la marque, cochez « Show product vendor ».

 

L’inscription à votre newsletter

 

Avec Boundless, vous pouvez personnaliser la section d’inscription à votre newsletter, où vos clients peuvent fournir leur adresse email afin de recevoir les newsletters de votre boutique.

Je vous rappelle que lorsqu’un internaute s’inscrit à votre newsletter via votre boutique, il est aussi ajouté à la liste de vos clients.

Je vous recommande d’ajouter une application pour gérer vos campagnes ou, mieux encore, de travailler avec MailChimp, qui fonctionne très bien avec Shopify. Je reviendrai sur cette question dans un autre focus.

Par défaut, Boundless inclut une section que vous pouvez personnaliser en lui donnant un titre (comme « Abonnez-vous »).

Si vous ne souhaitez pas permettre cette inscription, vous pouvez supprimer la section de votre page d’accueil.

Pour personnaliser cette section, une fois que vous avez ouvert le « Theme editor » :

  • Cliquez sur « Sections ».
  • Cliquez sur « Newsletter signup ».
  • Dans le champ « Header », saisissez le texte que vous voulez voir apparaître au-dessus du formulaire.
  • Sauvegardez.

 

La page des produits

 

Avec Boundless, vous pouvez utiliser l’option « Skip first product image » pour faire en sorte que la première image de chaque produit n’apparaisse que dans la page des collections de votre boutique.

Votre page produit masquera cette première image et ne montrera que les autres images en pleine largeur.

En utilisant cette option, vous pouvez faire en sorte que votre première image de produit soit formatée pour apparaître au mieux sur la page des collections, puis préparer les images du produit pour qu’elles apparaissent au mieux dans l’espace plus large fourni par la page produit.

Vous pouvez aussi permettre aux clients de partager vos produits sur les réseaux sociaux (Facebook, Instagram et Pinterest).

Pour personnaliser cette fonction, une fois que vous avez ouvert le « Theme editor » :

  • Ouvrez une page de produit.
  • Cliquez sur « Sections »
  • Cliquez sur « Product ».
  • Cliquez sur « Enable product sharing », si vous voulez permettre le partage.
  • Cliquez sur « Skip first product image », si vous voulez masquer la première image de produit sur vos pages de produits.
  • Dans la liste « Image style », sélectionnez l’orientation de l’image de produit, soit « Tall/square » ou « Wide ».
  • Sauvegardez.

 

La page des collections

 

Boundless inclut plusieurs options de tri, de filtre, d’apparence et de pagination pour vos pages de collections.

Pour personnaliser ces options, une fois que vous avez ouvert le « Theme editor » :

  • Ouvrez une page de collection.
  • Cliquez sur « Sections ».
  • Dans la zone « Appearance », déterminez les options suivantes :
    • Dans la liste « Image style », sélectionnez une orientation pour les images des produits, soit « Tall/square » ou « Wide ».
    • Dans la liste « Image size », sélectionnez une taille pour les images des produits.
    • Pour augmenter l’espace entre les images des produits, cochez « Add spacing between images ».
    • Si vous voulez faire apparaître le nom du vendeur ou de la marque en dessous des images des produits, cochez « Show product vendor ».
  • Dans la zone « Sorting & Filtering », déterminez les options suivantes :
    • Si vous voulez offrir à vos visiteurs une fonction de tri, cochez « Show sorting options ».
    • Si vous voulez offrir à vos visiteurs une fonction de filtrage par tag, cochez « Show tag filtering ».
  • Dans la zone « Pagination area », via la liste « Pagination type », sélectionnez si vous voulez montrer des pages numérotées ou un bouton « Voir plus » en bas de page.
  • Sauvegardez.

Voilà pour la découverte de Boundless, qui est un thème très complet, si vous avez beaucoup de produits à proposer, et particulièrement pratique pour la navigation de vos clients.

Dans les prochains focus, je vous parlerai d’autres thèmes gratuits qui pourront vous intéresser pour des besoins différents.

À très bientôt pour la suite !