Aujourd’hui, suite des focus consacrés à la personnalisation du code Shopify, avec une série de modifications qui concernent la page « Mot de passe » et une introduction aux customisations qui concernent les réseaux sociaux.

 

1/ La page « Mot de passe »

 

Avant l’ouverture de votre boutique en ligne, les clients ne seront pas en mesure d’accéder à vos produits.

À la place, ils arrivent par défaut sur votre page « Mot de passe » : il s’agit d’une page de type « bannière » qui donne aux visiteurs des informations au sujet du statut de la boutique.

Vous pouvez inclure dans ces informations la date prévisionnelle de lancement, les types de produits que vous allez vendre, des contenus médias ou des détails au sujet d’une promotion spéciale.

Le champ email peut être utilisé par les clients s’ils souhaitent recevoir les futures newsletters émanant de votre boutique.

 

Dans cette page, vous avez la possibilité de personnaliser un certain nombre de paramètres, avant même de parler des personnalisations via le code.

 

  • 1- Activer ou désactiver la page

Lorsque vous ouvrez une boutique Shopify, la page « Mot de passe » est activée par défaut.

Vous pouvez choisir de la désactiver. Pour cela :

    • Rendez-vous sur la page « Online store » et cliquez sur « Preferences ».
    • Descendez jusqu’à la section « Storefront password ».
    • Décochez la fonction (ou recochez-la, pour réactiver la page) « Enable password page ».
    • Sauvegardez.

  • 2- Consulter ou modifier les paramètres de la page « Mot de passe »

Vous pouvez visualiser cette page pendant que vous êtes en mode prévisualisation dans votre « Theme editor », en ajoutant /password à la fin de l’adresse de votre boutique.

Vous verrez alors dans le « Theme editor » les options disponibles.

2/ Changer l’apparence de votre page « Mot de passe »

 

Si votre boutique n’est pas prête et que votre page « Mot de passe » doit rester active un certain temps, vous aurez peut-être envie de la personnaliser.

Vous disposez de deux méthodes :

  • Ajouter un simple message pour les visiteurs, si vous ne souhaitez pas toucher au code (Rendez-vous sur la page « Online store » et cliquez sur « Preferences », puis modifiez le champ « Message for your visitors »).
  • Utiliser une modification des codes HTML/CSS du template « password.liquid ».

La plupart des thèmes ont déjà un template « password.liquid ». Si ce n’est pas le cas du vôtre, vous allez pouvoir en créer un.

Pour vérifier si votre thème possède un template « password.liquid » :

    • Rendez-vous dans la page « HTML/CSS » de votre thème actif.
    • Ouvrez le dossier « Templates » et vérifiez que le fichier s’y trouve.
    • Si c’est le cas, vous allez pouvoir le personnaliser, puisque celui-ci possède sa propre feuille de styles.

Si ce fichier n’existe pas, voici comment le créer :

    • Rendez-vous dans la page « HTML/CSS » de votre thème actif.
    • Dans le dossier « Templates », cliquez sur « Add a new template ».

    • Dans le menu « Create a new template for », choisissez « Password ».

    • Cliquez sur « Create template ».

Ensuite, à vous de personnaliser l’apparence de ce template, avec un peu de code.

 

3/ Retirer le pied de page de votre page « Mot de passe »

 

Par défaut, cette page contient un pied de page qui ressemble à ceci :

Si vous souhaitez supprimer ce pied de page, suivez ces étapes :

  • Rendez-vous sur la page « Online store » et cliquez sur « Preferences ».
  • Descendez jusqu’à la section « Storefront password ».
  • Dans la zone « Message for your visitors », ajoutez le code suivant :

<style>#footer { display: none; }</style>

  • Sauvegardez vos changements.

 

4/ Supprimer le nom de votre boutique sur votre page « Mot de passe »

 

Par défaut, le nom de votre boutique est affiché sur la page, comme ci-dessous :

 

Si vous souhaitez le supprimer, suivez ces étapes :

  • Rendez-vous sur la page « Online store » et cliquez sur « Preferences ».
  • Descendez jusqu’à la section « Storefront password ».
  • Dans la zone « Message for your visitors », ajoutez le code suivant :

<style>h1 { display: none; }</style>

  • Sauvegardez vos changements.

Voilà pour les personnalisations relatives à la page « Mot de passe ».

Maintenant, quelques premières informations relatives aux boutons des réseaux sociaux, dont les personnalisations seront aussi détaillées dans le focus suivant.

 

5/ Ajouter des boutons pour les réseaux sociaux

 

Vous disposez de deux méthodes pour ajouter des boutons :

  • La méthode simple :

Ajoutez à votre boutique une application qui fait tout le travail à votre place !

Pour en choisir une, rendez-vous dans l’App store, dans cette rubrique : https://apps.shopify.com/categories/social-media?filter=newest

Notez que de nombreux thèmes issus du Theme store proposent déjà cette fonction.

Pour savoir si le vôtre la possède, rendez-vous dans votre page « Theme editor » et vérifiez les paramètres des sections « Header », « Sidebar », « Homepage » et « Footer ».

  • La méthode avancée :

Rendez-vous sur les pages correspondantes de vos comptes Facebook, Twitter, etc. pour y récupérer les codes de bouton que ces médias sociaux vous proposent.

Pour ajouter les boutons :

    • Rendez-vous sur la page « HTML/CSS » de votre thème.
    • Vous devez d’abord télécharger l’image du futur bouton parmi vos fichiers.

Pour cela, ouvrez le dossier « Assets ».

    • Cliquez sur le lien « Add a new asset ».
    • Choisissez les icônes que vous souhaitez récupérer sur votre ordinateur et cliquez sur « Upload asset ».
    • Ensuite, cliquez sur le fichier « theme.liquid » pour l’ouvrir dans l’éditeur de code.
    • Le code peut être collé à divers endroits du fichier, selon le rendu que vous désirez, et vous devrez sans doute faire plusieurs tests.

L’exemple qui suit est celui de Twitter, mais il peut aussi fonctionner pour Facebook, Pinterest, etc. :

{{ ‘my-twitter-button.png’ | asset_url | img_tag | link_to: ‘https://twitter.com/iamawesome’, ‘follow me on twitter’ }}

    • Exemple de code alternatif incluant du HTML :

<a href= »https://twitter.com »><img src= »/assets/my-button.jpg?1500668719″ alt= »Follow  on Twitter »/></a>

 

6/ Ajouter des boutons « Facebook like »

 

Voici une personnalisation plus précise, pour l’ajout de boutons « Facebook like » sur vos pages.

La meilleure manière de procéder est d’ajouter un onglet « Shop » à la page Facebook de votre marque.

Pour cela, vous devez connecter votre boutique et votre page, ce qui vous permet aussi d’y faire apparaître vos produits et collections.

Attention ! Les boutons Facebook ne fonctionnent pas ou mal dans les boutiques qui sont en mode « mot de passe activé ».

Pour éviter tout futur problème, n’installez pas ces boutons (et surtout, ne cliquez pas dessus, si vous les avez déjà installés) dans une boutique qui n’est pas encore active.

Si vous avez cliqué par inadvertance sur un bouton « like » avant le lancement de la boutique et que Facebook a enregistré la page « Mot de passe » pour ce like, vous pouvez modifier ce rattachement une fois que la boutique est lancée.

Pour cela, rendez-vous dans le debugger Facebook, à cette adresse :

https://developers.facebook.com/tools/debug/

Saisissez-y l’adresse de votre boutique et Facebook récupérera les informations actualisées.

 

7/ Changer l’image rattachée au bouton « Facebook like »

 

Si vous avez ajouté des boutons « Facebook Like » à vos pages et que vous n’aimez pas les images à la une que Facebook a automatiquement sélectionnées pour chacune d’entre elles, vous pouvez agir pour les modifier.

D’abord, tentez d’utiliser le debugger, pour chaque adresse de page où l’image ne vous convient pas. Normalement, Facebook doit automatiquement récupérer l’image principale que vous avez ajoutée à chaque page de votre boutique.

Vous pouvez aussi mettre à jour votre thème, au cas où le code déjà intégré ne serait pas à jour et contienne des erreurs.

Pour cela, suivez ces étapes :

  • Rendez-vous sur la page « HTML/CSS » de votre thème.
  • Dans le dossier « Layouts », ouvrez le fichier « theme.liquid » pour l’ouvrir dans l’éditeur de code.
  • Entre les balises <head> et </head>, ajoutez le code suivant :

{% if template contains ‘product’ %}

  <meta property= »og:image » content= »http:{{ product.featured_image.src | product_img_url: ‘grande’ }} » />

  <meta property= »og:image:secure_url » content= »https:{{ product.featured_image.src | product_img_url: ‘grande’ }} » />

{% elsif template contains ‘article’ %}

  {% assign img_tag = ‘<‘ | append: ‘img’ %}

  {% if article.content contains img_tag %}

    {% assign src = article.content | split: ‘src= »‘ %}

    {% assign src = src[1] | split: ‘ »‘ | first | remove: ‘https:’ | remove: ‘http:’ %}

    {% if src %}

      <meta property= »og:image » content= »http:{{ src }} » />

      <meta property= »og:image:secure_url » content= »https:{{ src }} » />

    {% endif %}

  {% endif %}

{% else %}

  {% if settings.use_logo %}

    <meta property= »og:image » content= »http:{{ ‘logo.png’ | asset_url }} » />

    <meta property= »og:image:secure_url » content= »https:{{ ‘logo.png’ | asset_url }} » />

  {% endif %}

{% endif %}

  • Sauvegardez.

Notez que certains thèmes contiennent un code Facebook dans un snippet séparé, inclus dans le fichier « theme.liquid ».

Si c’est le cas de votre thème, vous allez devoir mettre à jour votre code dans un snippet Liquid, et pas dans le fichier « theme.liquid ».

Le nom du snippet correspondant sera « snippet-fb-open-graph-tags.liquid », « fb-open-graph-tags.liquid », « fb-open-graph.liquid » ou un intitulé équivalent, et il sera accessible dans le dossier « Snippets ».

Après toute modification dans la boutique, n’oubliez pas de réutiliser le debugger présenté plus haut, pour forcer la prise en compte par Facebook si elle n’a pas été automatique.

Voilà pour les premières informations relatives à l’intégration de boutons sociaux dans les pages de votre boutique.

Dans le prochain article, je vous proposerai d’autres personnalisations pour Twitter, Instagram, Google + et Pinterest.

À très bientôt pour la suite !