Après vous avoir parlé de Boundless, je vous propose aujourd’hui de découvrir un deuxième thème gratuit de Shopify, adapté à des besoins très différents : Brooklyn.

C’est un thème encore une fois plutôt visuel, mais qui est surtout prévu pour les boutiques conçues avec de petits menus (et qui proposent plus de 5 produits).

 

Rappels généraux

 

Comme pour tout autre thème, tout ce dont je vais vous parler se paramètre à partir du « Theme editor », accessible via la page « Online store / Customize theme ».

C’est dans le « Theme editor » que vous pouvez retrouver le détail des sections disponibles dans le thème Brooklyn, en sachant que je vais ici me focaliser sur les sections les plus intéressantes pour ce design.

Pensez à bien sauvegarder tous vos réglages, au fil du paramétrage.

 

Les sections de base

 

Brooklyn inclut trois sections qui apparaissent sur chaque page de la boutique :

  • La section « menu de barre latérale » (« sidebar menu section »), qui se déploie à partir de la gauche et dans lequel on trouve par exemple les liens de « recherche », « à propos » et « se connecter », avec un menu principal et un menu secondaire.
  • La section « en-tête » (« header »), qui est placée en haut de la page et va inclure le logo et les menus de navigation.
  • La section « pied de page » (« footer »), qui est placée en bas de la page et inclut les liens de « recherche » et « à propos », ainsi que les informations de copyright.

Dans le « Theme editor », vous pouvez éditer l’en-tête et la barre latérale à partir de n’importe quelle page.

À la différence des autres types de sections, ces deux-ci sont visibles sur toutes les pages de la boutique.

Brooklyn inclut plusieurs réglages spécifiques pour l’en-tête et le menu latéral.

 

Le menu de la barre latérale

 

Brooklyn propose un menu coulissant qui se déploie quand on clique sur l’icône de menu.

  • Cliquez sur l’onglet « Sections ».
  • Cliquez sur « Sidebar menu ».
  • Dans l’ascenseur « Top menu », sélectionnez le menu principal.
  • Dans l’ascenseur « Bottom menu », sélectionnez le menu secondaire.

 

L’en-tête

 

Vous pouvez ajouter votre logo dans la section d’en-tête.

Le meilleur format de fichier est le .png, avec un fond transparent et une taille de 450 x 200 pixels. Il est possible de retailler l’image du logo en réduisant sa largeur.

Vous pouvez aussi ajouter un menu et une icône de recherche dans l’en-tête de la boutique.

Pour ajouter un logo personnalisé :

  • Cliquez sur l’onglet « Sections ».
  • Cliquez sur « Header ».
  • Dans l’ascenseur « Menu », sélectionnez le menu que vous voulez afficher dans l’en-tête.
  • Dans la zone « Logo image », cliquez sur « Upload image » pour choisir une image sur votre ordinateur, ou cliquez sur le lien « Select from library » pour sélectionner une image déjà en ligne dans l’administration de votre boutique.

Si vous utilisez une image de diaporama un peu sombre, il est possible qu’un logo foncé ne soit pas bien visible sur ce fond.

Si cela se produit, vous pouvez ajouter une seconde version plus claire de votre logo, dans la zone « Inverted logo » (idéalement, ce logo devrait être blanc).

Cela permettra au logo d’être affiché en version claire chaque fois qu’une image de diaporama sombre est à l’écran et que son texte est réglé en mode « Light » (clair).

 

Le pied de page

 

Le contenu de cette section est affiché en bas de chaque page

Avec Brooklyn, vous pouvez changer le menu qui est affiché.

Pour personnaliser cette section :

  • Cliquez sur l’onglet « Sections ».
  • Cliquez sur la section « Footer ».
  • Dans l’ascenseur « Footer menu », sélectionnez le menu que vous voulez afficher. Par défaut, il s’agit du menu « Footer », qui inclut les liens « Search », « About us » et « Log in ».

Notez que n’importe quel menu existant dans l’administration de la boutique peut être utilisé. Vous pouvez aussi, dans cette section, cliquer sur le lien « Add menu » : cela ouvrira la page des menus, pour que vous puissiez en créer un de zéro.

 

Les sections de la page d’accueil

 

Par défaut, Brooklyn inclut 5 sections pour la page d’accueil :

  • Le diaporama (« Slideshow »), qui est plein écran et prend toute la largeur de la page d’accueil.
  • Le texte enrichi (« Rich text ») est une section de contenu que vous personnalisez soit en ajoutant du texte, soit en mettant en avant une page de votre boutique.
  • La liste des collections (« Collection list »), qui permet d’afficher plusieurs collections sur la page d’accueil.
  • La collection mise en avant (« Featured collection »), qui permet d’afficher les produits d’une collection spécifique.
  • La zone « Newsletter » affiche un lien pour l’inscription à la newsletter de votre boutique.

Vous pouvez ajouter, supprimer et réarranger des sections pour créer une page d’accueil personnalisée.

La seule section que vous ne pouvez pas supprimer ou modifier est celle du « Slideshow », qui est statique et apparaîtra toujours en haut de la page d’accueil.

 

La section « Slideshow »

 

Brooklyn affiche un diaporama plein écran, ce qui signifie que vos images doivent idéalement faire 1 200 pixels de largeur.

Ce thème est « responsive » et s’adapte donc automatiquement au matériel utilisé par l’internaute pour visiter la boutique.

Par conséquent :

  • Il est important de ne pas utiliser de texte dans les images, car il pourrait être tronqué lorsque l’image est retaillée.

Mieux vaut utiliser un titre et un sous-titre dans chaque image (en choisissant de régler le texte en clair ou foncé, « light » ou « dark », afin qu’il soit bien visible par-dessus l’image.

Il est aussi possible d’ajouter un bouton pour lier l’image à une adresse Web.

  • Il est essentiel que toutes les images utilisées soient adaptées, avec des éléments importants proches du centre, pour éviter le risque de coupe des zones visuelles importantes.

Pour modifier les paramètres du diaporama de la page d’accueil :

  • Cliquez sur l’onglet « Sections ».
  • Cliquez sur la section « Slideshow ».
  • Dans la zone « Content », cliquez sur « Slide ».
  • Dans la zone « Logo image », cliquez sur « Upload image » pour choisir une image sur votre ordinateur, ou cliquez sur le lien « Select from library » pour sélectionner une image déjà en ligne dans l’administration de votre boutique.
  • Choisissez l’apparence claire ou sombre du texte dans la liste « Text color ».
  • Dans les champs « Heading text » et « Subheading text », saisissez les titre et sous-titre que vous voulez faire apparaître sur l’image.
  • Si vous souhaitez que l’image soit cliquable et mène vers une page Web, saisissez le texte du lien dans le champ « Button field », puis saisissez l’adresse dans le champ « Slide link » (dans le cas où le lien mène vers une page de la boutique, inutile de saisir toute l’adresse, il suffit d’indiquer ce qui se trouve après, par exemple « /collections/all »).

En sélectionnant l’option « Auto rotate between slides » et l’intervalle de temps entre deux images, vous pouvez choisir de rendre le diaporama automatique.

 

La section « Rich text »

 

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.

 

La section « liste des collections »

 

Avec Brooklyn, vous pouvez présenter jusqu’à 9 collections sur la page d’accueil.

  • Cliquez sur l’onglet « Sections ».
  • Cliquez sur « Collection ».
  • Choisissez les collections à afficher dans le menu déroulant.
  • Dans la zone « Settings » et le champ « Heading », saisissez le texte que vous voulez voir apparaître au-dessus des collections.

 

La section « collection mise en avant »

 

Avec Brooklyn, vous pouvez mettre en avant les produits de l’une de vos collections, sur votre page d’accueil.

Il est possible de choisir un affichage de type « grille » (« grid ») ou « collage ».

  • Cliquez sur l’onglet « Sections ».
  • Cliquez sur « Featured collection ».
  • Dans le champ « Heading », saisissez le texte que vous voulez voir apparaître au-dessus de la collection.
  • Dans la liste « Grid style », choisissez le format d’affichage des produits.

 

La section « Newsletter »

 

Cette section n’inclut aucune option personnalisable, si ce n’est de choisir l’affichage ou pas de la section (vous pouvez tout simplement supprimer la section, si vous ne souhaitez pas l’utiliser).

Lorsqu’une personne s’inscrit à votre newsletter, elle est automatiquement ajoutée à la liste de clients de votre boutique.

Vous pouvez consulter cette liste directement à partir du « Theme editor », en cliquant sur le lien « Customers ».

 

Les pages de collection

 

Avec Brooklyn, vous pouvez afficher les produits d’une page de collection avec le format grille ou collage.

L’affichage de type « collage » est spécifique à Brooklyn. Ceci permet un mélange d’images plus ou moins grandes, avec une mise en valeur aléatoire de certains produits.

La grille, elle, présente les produits sous forme de tableau, avec une taille identique pour tous les produits.

  • Dans le « Theme editor », ouvrez une page de collection.
  • Cliquez sur l’onglet « Sections ».
  • Cliquez sur « Collection page ».
  • Dans la liste « Grid style », sélectionnez « Collage » ou « Grid ».
  • Cochez « Show selection tags » pour inclure un lien en haut de la page permettant aux clients de filtrer l’affichage des produits par tag de collection.
  • Cochez « Show product vendor » pour ajouter le nom de vendeur en dessous de l’image du produit.

 

Les pages de produits

 

Avec Brooklyn, vous pouvez activer la fonction de zoom sur les images, afin de permettre à vos clients d’obtenir un aperçu plus détaillé de vos produits.

Pour activer la fonction de zoom :

  • Ouvrez une page produit dans le « Theme editor ».
  • Cliquez sur l’onglet « Sections ».
  • Cliquez sur « Product pages ».
  • Si vous voulez activer la fonction zoom, cochez « Enable image zoom ».
  • Si vous voulez laisser vos clients partager le produit sur les réseaux sociaux, cochez « Enable product sharing ».
  • Si vous voulez afficher le nom du vendeur ou de la marque, cochez « Show product vendor ».

Voilà pour les fonctions essentielles de Brooklyn.

Je vous présenterai un autre thème gratuit de Shopify dans un prochain focus.

À très bientôt pour la suite !