Aujourd’hui, je vous propose l’avant-dernier focus consacré aux thèmes gratuits de Shopify : je vais vous parler de Pop et de Simple, en passant plus de temps sur le second, car il est doté de plus de sections et fonctions.

Comme je l’ai expliqué dans mes derniers articles, je considère que vous avez suivi cette série depuis le début et que vous êtes familiarisé avec les manipulations récurrentes du « Theme editor ».

Je vais donc surtout m’attarder sur les fonctions de Pop et Simple qui sont un peu différentes de ce que nous avons vu jusque-là, et passer très vite sur le reste.

 

1/ Pop

 

Ce thème est idéal pour les boutiques dont l’inventaire est réduit ou moyen.

Son point fort principal réside dans sa grande barre de navigation latérale, qui permet de rendre accessible un maximum de contenus.

Il propose aussi un design « responsive », une page de panier qui fonctionne en « fly-in » et « fly-out », une page d’accueil dont les sections peuvent être réarrangées et quatre styles prêts à l’emploi.

 

Informations générales

 

  • Pour ajouter des sous-menus au menu principal, vous devez au préalable créer ces menus dans votre administration, sur la page de navigation.
  • Pop fonctionne mieux avec un logo compact, puisque celui-ci est inséré dans la barre latérale de navigation : les logos de type « bannière » (beaucoup plus large que haut) n’auront pas belle apparence dans ce thème.

La largeur maximale acceptée par Pop est 450 pixels en largeur et 200 pixels en hauteur. Pour éviter un redimensionnement peu flatteur, préparez une version adaptée à votre boutique (qui sera en .png, pour préserver la transparence derrière le logo).

Pour que le logo soit parfait sur tout terminal, assurez-vous que votre fichier .png ne comporte pas de pixels autour du logo et que celui-ci touche parfaitement les bords de l’image.

  • Dans le « Theme editor », vous pouvez régler le logo pour qu’il soit plus grand lorsque la boutique est affichée sur mobile, en allant dans la section « Header and navigation » et en augmentant la valeur « Sizing / Mobile menu Height ».
  • La même chose est possible pour l’affichage sur ordinateur, en augmentant cette fois la valeur « Sizing / Desktop Menu Width ».

 

Réduire les espaces au-dessus et en dessous du logo

 

Si, malgré une préparation minutieuse de votre logo, vous estimez que les espaces présents au-dessus et en dessous ne vous conviennent pas, vous pouvez régler ces écarts à l’aide d’un peu de code ajouté à votre thème.

Pour cela :

  • Allez sur la page des thèmes, cliquez sur le bouton « Actions » de votre thème actif et sur « Edit HTML/CSS ».
  • Dans la section « Assets », cliquez sur timber.scss.liquid.
  • Tout en bas de ce fichier, ajoutez :

   {% comment %}

     The following media query function produces this:

     @media screen and (min-width: 1025px) { … }

     Sidebar is only shown when width > 1025 pixels.

   {% endcomment %}

   @include at-query ($min, $large) {

     .header-logo {

       margin-bottom: 30px /* original is 60px */;

     }

     .site-header {

       padding-top: 30px /* original is 90px */;

       .hr–small {

         margin: 0 auto 10px /* original is 15px auto 30px */;

       }

     }

   }

  • N’oubliez pas de sauvegarder le fichier.

 

Les images dans Pop

 

Pop nécessite des images haute résolution pour un affichage impeccable et vous avez donc intérêt à intégrer des images d’au moins 1 024 pixels x 1 024 pixels, en haute qualité.

Je vous conseille même de les intégrer en 2 048 pixels par 2048, puisque Simple supporte les images de cette taille.

Cela est d’autant plus important pour une bonne mise en valeur de la fonction zoom, qui s’active dans les réglages de la section « Product page » du « Theme editor ».

L’idéal, pour un affichage parfait dans les pages de collection également, est d’utiliser des images de taille identique, ou du moins de proportion identique.

 

Le slogan « Get connected » du pied de page

 

Les utilisateurs de Pop ont souvent du mal à trouver l’endroit où modifier la phrase d’origine.

Vous devez vous rendre dans la traduction de votre thème, et chercher le slogan dans l’onglet « Layout / Footer / Social title » pour le remplacer par l’intitulé de votre choix.

 

2/ Simple

 

Ce thème est simple et minimaliste, idéal pour mettre en valeur des produits.

Son design est « responsive », il propose des animations d’images et un zoom sur les images de produits.

Il est adapté aux vendeurs qui désirent :

  • Une barre de navigation latérale.
  • De larges menus.
  • Proposer plus de 5 produits, mais un catalogue pas trop large non plus.

 

Réglages de l’en-tête

 

Ils sont à retrouver dans « Sections / Header » :

Vous pouvez y intégrer votre logo, idéalement en téléchargeant un fichier .png de 450 pixels par 200 pixels.

Si vous voulez réduire la taille du logo, vous pouvez modifier la valeur de sa largeur en pixels dans « Custom logo width ».

 

Réglages de la barre latérale de navigation

 

Ils sont à paramétrer dans « Sections / Sidebar » et vous devez sélectionner un menu (préalablement créé dans la navigation de la boutique) pour qu’il apparaisse dans cette barre.

 

Réglages du pied de page

 

Le pied de page se configure dans « Sections / Footer ».

Cette section peut contenir de multiples éléments, dont un menu de navigation, une zone de texte et un lien d’inscription à votre newsletter.

Ces sections peuvent être modifiées, par ajout ou suppression, et déplacées, pour un pied de page totalement personnalisé.

  • Les liens que vous pouvez intégrer dans le pied de page se paramètrent dans la zone « Links » de cette section.
  • La newsletter n’est pas configurable par des options particulières, mais peut être supprimée si vous ne souhaitez pas l’afficher (via la zone « Newsletter signup »).
  • La zone « Text » vous permet d’ajouter n’importe quel contenu écrit que vous désirez afficher dans le pied de page, en intégrant notamment un lien vers le blog ou une page de la boutique proposant une Google map ou des informations de contact.

 

La page d’accueil

 

Par défaut, Simple propose deux sections dans la page d’accueil :

  • La collection mise en avant (« Featured collection »), qui affiche les produits d’une collection choisie.
  • Une section de « Rich text », qui peut contenir du texte libre ou des contenus issus de pages de la boutique.

Vous pouvez bien sûr modifier cet arrangement initial, mais si vous recherchez de très nombreuses sections, vous avez intérêt à vous tourner vers d’autres thèmes qui sont plus adaptés à cet objectif.

Voici les informations essentielles :

  • La collection mise en avant se règle dans « Sections / Featured collection », avec un intitulé de présentation à saisir dans « Heading », puis une sélection de la collection voulue.
  • Jusqu’à 50 produits peuvent être affichés, et vous devez sélectionner le nombre de lignes souhaitées en choisissant ce réglage dans la liste « Number of rows ».
  • Vous pouvez saisir un message personnalisé dans « Sections / Talk about your brand », ce qui vous permet de souhaiter la bienvenue à vos visiteurs ou de faire une annonce.

Le texte se saisit dans « Content / Text » et le titre dans « Settings / Heading »

  • Avec Simple, vous pouvez afficher une bannière spécifique dans votre page d’accueil et celle-ci peut inclure un titre et un lien menant vers une adresse Web ou une page de votre boutique.

Pour l’ajouter, rendez-vous dans « Sections / Add section / Featured banner / Add » et donnez-lui un titre dans « Heading ».

  • Simple offre l’accès à la section « Image with text », qui permet d’afficher une image assortie de texte à gauche ou droite, et peut aussi contenir un bouton menant à une page de la boutique..

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, bouton et lien.

  • Vous avez aussi accès à la section « Rich text », qui vous permet de saisir des contenus textuels à 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, rendez-vous dans « Sections / Rich text ».

  • Simple inclut une fonction de « vidéo mise en avant (« Featured video »), où une vidéo YouTube ou Vimeo peut être jouée.

Ce réglage s’effectue via « Sections / Add section / Featured video / Add ».

Saisissez un lien YouTube ou Vimeo et choisissez une valeur dans « Container width » pour déterminer la largeur du bloc vidéo.

  • Une section intéressante de Simple est la possibilité d’ajouter un bloc de code HTML personnalisé à la page d’accueil (mais attention, à n’utiliser que si vous savez ce que vous faites ! J ).

Pour cela, rendez-vous dans « Sections / Add section / Custom HTML / Add ».

Cliquez sur « Custom HTML » dans la zone « Content » et saisissez dans ce champ le code que vous désirez ajouter à la boutique.

Vous pouvez sélectionner une largeur dans la liste « Container width » et régler l’alignement vertical du bloc avec une sélection dans « Vertical alignment ».

Vous pouvez saisir un titre dans le champ « Heading ».

 

Autres réglages

 

Le paramétrage des pages de collections ou de produits est similaire à celui des autres thèmes et je ne m’étends pas dessus (attention de bien naviguer vers les pages correspondantes pour que le « Theme editor » vous donne accès aux sections correspondantes).

Pensez à bien configurer les options d’affichage (tri, affichage des produits dans les pages de collection, position des intitulés de produits par rapport aux images, etc.), le sélecteur de quantités et les options de partage vers les réseaux sociaux.

Notez spécialement la particularité de trois des réglages des pages produits :

  • Le premier vous permet de choisir ce qui se passe lorsqu’un client met un produit au panier : en cochant « Stay on current page when item is added to cart », votre client restera sur la page du produit et ne sera pas renvoyé directement vers le panier.
  • Le second vous permet d’afficher un contenu textuel additionnel qui figurera à côté de l’image du produit (vous pouvez par exemple y faire figurer vos conditions de retour, de remboursement ou d’échange).

Pour cela, cochez « Show a tab next to your product description » dans les réglages.

  • Enfin, vous pouvez régler le type de zoom utilisable par les clients sur les images des produits, via la liste « Zoom type ».

En ce qui concerne le blog de Simple, notez que la première image intégrée dans un article devient automatiquement l’image mise en avant (qui est donc reprise lors des partages).

Notez que le thème est compatible avec l’affichage des prix dans de multiples devises. Mais pour que l’ajout d’une app ou d’un code permettant l’accès à cette fonction s’affiche correctement, vous devez au préalable modifier le fichier « product-grid-item.liquid snippet » dans votre thème.

Pour cela, remplacez la formule :

money_without_trailing_zeros

… par :

money

Voilà pour l’essentiel à connaître à propos de Pop et Simple. Dans le prochain focus, je vous parlerai de Supply et Venture, les deux derniers thèmes gratuits appartenant à cette série d’articles.

Ensuite, nous passerons à un peu plus de complexité, avec une présentation plus poussée du code Liquid de Shopify.

À très bientôt pour la suite !