Aujourd’hui, je vais vous parler de la personnalisation du thème Shopify pour ce qui concerne l’affichage des devises dans votre boutique.

Nous allons voir comment afficher plusieurs devises dans une liste déroulante ou via un sélecteur de type bouton.

Attention, toutes ces personnalisations n’ont pas été testées pour les thèmes qui fonctionnent avec sections, ce qui signifie que vous pouvez les tester, mais sans garantie que cela fonctionnera.

 

1/ Afficher plusieurs devises dans une liste déroulante

 

Cette personnalisation vous permet de proposer à vos clients un sélecteur de devises, sous forme de liste déroulante, qui affiche vos prix dans différentes monnaies.

La sélection du client sera conservée sous forme de cookie et réutilisée lors de sa visite suivante.

Dans le « Theme editor / General settings », vous pouvez choisir quelles devises montrer.

Notes importantes :

  • Les taux de conversion utilisés par Shopify sont rafraîchis deux fois par jour, vers minuit et 7 heures du matin (horaires indicatifs).
  • Quelle que soit la devise affichée par le client dans la boutique, la commande elle-même s’effectuera toujours dans la monnaie principale que vous avez paramétrée.
  • Si vous utilisez le thème Brooklyn, une étape supplémentaire sera nécessaire (voir à la fin).
  • Cette personnalisation ne fonctionnera pas avec les thèmes Boundless et Venture.

Voici les étapes à suivre pour mettre en place cette personnalisation :

  • 1- Éditez le format d’affichage de vos devises

 

  • Rendez-vous sur la page « Settings ».
  • Dans la section « Standards and formats », trouvez le paramètre « Currency », comme dans cette image :

    • Cliquez sur « Change formatting ».
    • Trouvez les lignes de code HTML pour l’affichage de votre devise, comme dans cette image :

    • Dans chaque champ, coller le code <span class=money> devant le texte formaté, puis </span> après, pour obtenir le résultat suivant :

    • Attention, ne touchez pas aux deux autres champs (Email) qui se trouvent en dessous !
    • Sauvegardez vos changements.

 

  • 2- Éditez le fichier thème de votre « Theme editor »
    • Rendez-vous sur la page HTML/CSS de votre thème actif.
    • Dans le dossier « Config », cliquez sur le fichier « settings_schema.json », pour l’ouvrir dans l’éditeur de code.
    • En bas du fichier, après la dernière accolade « } », mais avant le dernier crochet « ] », collez le code suivant :

 ,

   {

     « name »: « Currency »,

     « settings »: [

       {

         « type »: « paragraph »,

         « content »: « To offer multiple currencies on your online store, you must first [edit your store’s currency formatting]({{ site.url }}/manual/using-themes/troubleshooting/help-script-find-money-formats). »

       },

       {

         « type »: « checkbox »,

         « id »: « show_multiple_currencies »,

         « label »: « Enable currency conversion »,

         « default »: true,

         « info »: « Even though prices are displayed in different currencies, orders will still be processed in your store’s currency. »

       },

       {

         « type »: « select »,

         « id »: « currency_format »,

         « label »: « Format »,

         « options »: [

           {

             « value »: « money_format »,

             « label »: « Without currency ($10.00) »

           },

           {

             « value »: « money_with_currency_format »,

             « label »: « With currency ($10.00 CAD) »

           }

         ],

         « default »: « money_with_currency_format »

       },

       {

         « type »: « text »,

         « id »: « supported_currencies »,

         « label »: « Supported currencies »,

         « default »: « INR GBP CAD USD AUD EUR JPY »,

         « info »: « Use the country’s ISO [currency code](http://www.xe.com/iso4217.php). Separate your currency codes with a space. »

       },

       {

         « type »: « text »,

         « id »: « default_currency »,

         « label »: « Default currency »,

         « default »: « USD »

       }

     ]

   }

    • Sauvegardez.

 

  • 2- Éditez les paramètres de votre « Theme editor »

 

  • Rendez-vous dans votre « Theme editor ».
  • Cliquez sur « Currency ».
  • Sous « Format », choisissez d’inclure ou pas le code de la devise (comme USD ou CAD) quand elle est convertie.
  • Sous « Supported currencies », saisissez les codes de toutes les devises que vous souhaitez afficher dans la boutique, en laissant un espace entre deux saisies.
  • Sous « Default currency », entrer le code de la devise que vous voulez montrer par défaut à tout nouveau client (qui devait logiquement être la devise de votre boutique).
  • Sauvegardez vos réglages.

Voici un exemple de paramétrage (pour une boutique américaine) :

 

 

  • 3- Téléchargez le fichier « jquery.currencies.min.js »

 

  • Rendez-vous sur cette page pour y récupérer le dossier .zip (bouton en bas à droite).

    • Décompressez ce dossier.
    • Rendez-vous sur la page HTML/CSS de votre thème actif.
    • Ouvrez le dossier « Assets » et cliquez sur « Add a new asset ».
    • Cliquez sur « Choose file » et trouvez le dossier que vous avez dézippé.
    • Uploadez le fichier « jquery.currencies.min.js »

 

  • 4- Créez un snippet pour les devises
    • Rendez-vous sur la page HTML/CSS de votre thème actif.
    • Dans le dossier « Snippets », cliquez sur « Add a new snippet ».
    • Donnez à votre snippet le nom « currencies » (sans les guillemets).
    • Dans la page de ce nouveau code, collez le contenu à récupérer sur cette page.
    • Sauvegardez.

 

  • 5- Incluez le snippet des devises
    • Rendez-vous sur la page HTML/CSS de votre thème actif.
    • Dans le dossier « Layout », cliquez sur le fichier « theme.liquid ».
    • Juste avant la balise de fermeture </body>, collez le code {% include ‘currencies’ %}.
    • La fin de votre code devrait maintenant ressembler à cela :

 

    • Sauvegardez vos changements.

 

  • 6- Créez votre sélecteur de devises

Vous allez devoir créer un second snippet pour votre sélecteur de devises.

Il s’agira d’un menu déroulant affichant toutes les devises déterminées dans le « Theme editor ».

Pour créer ce snippet :

    • Rendez-vous sur la page HTML/CSS de votre thème actif.
    • Dans le dossier « Snippets », cliquez sur « Add a new snippet ».
    • Donnez à votre snippet le nom « currency-picker » (sans les guillemets).
    • Dans la page de ce nouveau code, collez le contenu à récupérer sur cette page.
    • Sauvegardez.

 

  • 7- Affichez votre sélecteur de devises

Il va permettre à vos clients de choisir leur devise affichée préférée.

C’est à vous de choisir l’endroit où le menu déroulant va apparaître dans la boutique.

Pour le placer :

    • Rendez-vous sur la page HTML/CSS de votre thème actif.
    • Dans le dossier « Layout », cliquez sur le fichier « theme.liquid ».
    • Dans l’éditeur de code, collez le code {% include ‘currency-picker’ %} à l’endroit que vous souhaitez :
      • Si vous voulez que le sélecteur s’affiche dans l’en-tête, ajoutez le code entre les balises <header> and </header>.
      • Si vous voulez que le sélecteur s’affiche dans le pied de page, ajoutez le code entre les balises <footer> and </footer>.
      • Vous pouvez aussi tester d’autres emplacements, en contrôlant l’affichage pour voir ce qui vous convient.
    • Sauvegardez.

 

  • 8- Expliquez à vos clients ce qui se passe à la validation de commande

Le paiement lui-même se fait toujours dans la devise de la boutique (fixée dans les « General settings » de votre administration).

Ceci signifie qu’un client qui consulte votre boutique dans sa monnaie préférée va la voir changer au moment de son arrivée à la page de validation de commande.

Il est donc utile d’éditer votre template « cart.liquid » pour y afficher un message d’explication.

Par exemple, vous pouvez copier et coller le code suivant près de votre bouton de validation :

<p>

  {{ shop.name }} enregistre les commandes en {{ shop.currency }}.

  Même si le contenu de votre panier est actuellement affiché en

  <span class= »selected-currency »></span>,

  le paiement de la commande sera effectué en {{ shop.currency }} au taux de conversion le plus récent.

</p>

  • 9- Étape réservée au thème Brooklyn

Une fois toutes ces étapes effectuées, vous devez aussi éditer le snippet « product-grid-item.liquid », en remplaçant toutes les occurrences :

money_without_trailing_zeros

Par :

money

Voilà pour cette première personnalisation.

 

2/ Ajouter un bouton pour basculer d’une devise à une autre, avec deux monnaies

Attention, ce tutoriel n’est pas adapté aux thèmes Venture et Boundless.

Ici, l’objectif est d’ajouter un bouton qui va permettre à votre client de passer d’une devise à une autre (information conservée à sa visite suivante).

Devise 7

  • 1- Éditez le format d’affichage de vos devises
    • Rendez-vous sur la page « Settings ».
    • Dans la section « Standards and formats », trouvez le paramètre « Currency », comme dans cette image :
    • Cliquez sur « Change formatting ».
    • Trouvez les lignes de code HTML pour l’affichage de votre devise.
    • Dans chaque champ, coller le code <span class=money> devant le texte formaté, puis </span> après, pour obtenir le résultat suivant :

    • Dans le deuxième champ, ajoutez bien la devise, qui n’est pas présente par défaut.
    • Attention, ne touchez pas aux deux autres champs (Email) qui se trouvent en dessous !
    • Sauvegardez vos changements.

 

  • 2- Téléchargez le fichier « jquery.currencies.min.js »
    • Rendez-vous sur cette page pour y récupérer le dossier .zip (bouton en bas à droite).

    • Décompressez ce dossier.
    • Rendez-vous sur la page HTML/CSS de votre thème actif.
    • Ouvrez le dossier « Assets » et cliquez sur « Add a new asset ».
    • Cliquez sur « Choose file » et trouvez le dossier que vous avez dézippé.
    • Uploadez le fichier « jquery.currencies.min.js »

 

  • 3- Créez un snippet pour les devises
    • Rendez-vous sur la page HTML/CSS de votre thème actif.
    • Dans le dossier « Snippets », cliquez sur « Add a new snippet ».
    • Donnez à votre snippet le nom « currencies » (sans les guillemets).
    • Dans la page de ce nouveau code, collez le code suivant :

{{ « //cdn.shopify.com/s/javascripts/currencies.js » | script_tag }}

{{ « jquery.currencies.min.js » | asset_url | script_tag }}

 

<script>

 

// Pick your format here:

// money_format or money_with_currency_format

Currency.format = ‘money_with_currency_format’;

 

var shopCurrency = ‘{{ shop.currency }}’;

 

/* Sometimes merchants change their shop currency, let’s tell our JavaScript file */

Currency.moneyFormats[shopCurrency].money_with_currency_format = {{ shop.money_with_currency_format | strip_html | json }};

Currency.moneyFormats[shopCurrency].money_format = {{ shop.money_format | strip_html | json }};

 

var cookieCurrency = Currency.cookie.read();

 

// Fix for customer account pages.

jQuery(‘span.money span.money’).each(function() {

  jQuery(this).parents(‘span.money’).removeClass(‘money’);

});

 

// Saving the current price.

jQuery(‘span.money’).each(function() {

  jQuery(this).attr(‘data-currency-{{ shop.currency }}’, jQuery(this).html());

});

 

// Select all your currencies buttons.

var buttons = jQuery(‘#currencies span’);

 

// If there’s no cookie or it’s the shop currency.

if (cookieCurrency == null || cookieCurrency === shopCurrency) {

  buttons.removeClass(‘selected’);

  jQuery(‘#currencies span[data-currency=’ + shopCurrency + ‘]’).addClass(‘selected’);

  Currency.currentCurrency = shopCurrency;

}

else {

  Currency.convertAll(shopCurrency, cookieCurrency);

  buttons.removeClass(‘selected’);

  jQuery(‘#currencies span[data-currency=’ + cookieCurrency + ‘]’).addClass(‘selected’);

}

 

// When customer clicks on a currency button.

buttons.click(function() {

  buttons.removeClass(‘selected’);

  jQuery(this).addClass(‘selected’);

  var newCurrency =  jQuery(this).attr(‘data-currency’);

  Currency.convertAll(Currency.currentCurrency, newCurrency);

});

 

// For options.

var original_selectCallback = window.selectCallback;

var selectCallback = function(variant, selector) {

  original_selectCallback(variant, selector);

  Currency.convertAll(shopCurrency, jQuery(‘#currencies span.selected’).attr(‘data-currency’));

  jQuery(‘.selected-currency’).text(Currency.currentCurrency);

};

 

$(‘body’).on(‘ajaxCart.afterCartLoad’, function(cart) {

  Currency.convertAll(shopCurrency, jQuery(‘#currencies span.selected’).attr(‘data-currency’));

  jQuery(‘.selected-currency’).text(Currency.currentCurrency);

});

 

jQuery(‘.selected-currency’).text(Currency.currentCurrency);

 

</script>

    • Sauvegardez.

 

  • 4- Incluez le snippet des devises
    • Rendez-vous sur la page HTML/CSS de votre thème actif.
    • Dans le dossier « Layout », cliquez sur le fichier « theme.liquid ».
    • Juste avant la balise de fermeture </body>, collez le code {% include ‘currencies’ %}.
    • La fin de votre code devrait maintenant ressembler à cela :

Devise 10

    • Sauvegardez vos changements.

 

  • 5- Créez un second snippet pour votre bouton de basculement
    • Rendez-vous sur la page HTML/CSS de votre thème actif.
    • Dans le dossier « Snippets », cliquez sur « Add a new snippet ».
    • Donnez à votre snippet le nom « currency-picker » (sans les guillemets).
    • Dans la page de ce nouveau code, collez le code suivant :

<span id= »currencies »>

  <span data-currency= »EUR » class= »left »>&euro;</span>

  <span data-currency= »GBP » class= »right »>&pound;</span>

</span>

 

<style>

#currencies {

    display: -moz-inline-stack;

    display: inline-block;

    zoom: 1;

    *display: inline;

    color: #bbbbbb;

    font-size: 0; /* to eliminate space between buttons */

    line-height: 1.5;

    cursor: pointer;

}

#currencies span {

    display: -moz-inline-stack;

    display: inline-block;

    zoom: 1;

    *display: inline;

    padding: 5px 10px;

    border: 1px solid #D6D6D6;

    background: none #F6F6F6;

    font-size: 13px;

}

#currencies .left  {

    -webkit-border-top-left-radius: 7px;

    -webkit-border-bottom-left-radius: 7px;

    -moz-border-radius-topleft: 7px;

    -moz-border-radius-bottomleft: 7px;

    border-top-left-radius: 7px;

    border-bottom-left-radius: 7px;

}

#currencies .right  {

    -webkit-border-top-right-radius: 7px;

    -webkit-border-bottom-right-radius: 7px;

    -moz-border-radius-topright: 7px;

    -moz-border-radius-bottomright: 7px;

    border-top-right-radius: 7px;

    border-bottom-right-radius: 7px;

    border-left: none;

}

#currencies .selected {

    font-weight: normal;

    color: #666666;

    background: none #eeeeee;

}

</style>

    • Sauvegardez.
    • Vous pouvez personnaliser les deux premières lignes, en fonction des deux devises que vous souhaitez afficher :

<span id= »currencies »>

  <span data-currency= »EUR » class= »left »>&euro;</span>

  <span data-currency= »GBP » class= »right »>&pound;</span>

</span>

    • Si vous les modifiez, pensez bien à sauvegarder de nouveau.

 

  • 6- Affichez votre bouton

Il va permettre à vos clients de choisir leur devise affichée préférée entre les deux choix possibles.

C’est à vous de choisir l’endroit où ce bouton va apparaître dans la boutique.

Pour le placer :

    • Rendez-vous sur la page HTML/CSS de votre thème actif.
    • Dans le dossier « Layout », cliquez sur le fichier « theme.liquid ».
    • Dans l’éditeur de code, collez le code {% include ‘currency-picker’ %} à l’endroit que vous souhaitez :
      • Si vous voulez que le sélecteur s’affiche dans l’en-tête, ajoutez le code entre les balises <header> and </header>.
      • Si vous voulez que le sélecteur s’affiche dans le pied de page, ajoutez le code entre les balises <footer> and </footer>.
      • Il vous faudra utiliser du code CSS pour peaufiner l’emplacement du bouton.
    • Sauvegardez.

 

  • 7- Expliquez à vos clients ce qui se passe à la validation de commande

Le paiement lui-même se fait toujours dans la devise de la boutique (fixée dans les « General settings » de votre administration).

Ceci signifie qu’un client qui consulte votre boutique dans sa monnaie préférée va la voir changer au moment de son arrivée à la page de validation de commande.

Il est donc utile d’éditer votre template « cart.liquid » pour y afficher un message d’explication.

Par exemple, vous pouvez copier et coller le code suivant près de votre bouton de validation :

<p>

  {{ shop.name }} enregistre les commandes en {{ shop.currency }}.

  Même si le contenu de votre panier est actuellement affiché en

  <span class= »selected-currency »></span>,

  le paiement de la commande sera effectué en {{ shop.currency }} au taux de conversion le plus récent.

</p>

 

3/ Ajouter un bouton pour basculer d’une devise à une autre, avec de multiples monnaies

À partir de la personnalisation précédente (bouton de bascule entre deux devises), vous pouvez aller plus loin, avec de multiples devises (attention, cette personnalisation n’est à faire que si vous avez réussi à bien suivre le tutoriel précédent).

Une fois que vous avez atteint la création du snippet « currencies-picker », vous devez faire les ajouts suivants dans le code :

  • Définissez une classe CSS additionnelle :

#currencies .middle  {

    border-left: none;

}

  • Ajoutez vos autres devises (voici un exemple avec deux devises supplémentaires) :

<span id= »currencies »>

  <span data-currency= »EUR » class= »{% if shop.currency == ‘EUR’ %}selected {% endif %}left »>EUR</span>

  <span data-currency= »GBP » class= »{% if shop.currency == ‘GBP’ %}selected {% endif %}middle »>GBP</span>

  <span data-currency= »USD » class= »{% if shop.currency == ‘USD’ %}selected {% endif %}middle »>USD</span>

  <span data-currency= »CAD » class= »{% if shop.currency == ‘CAD’ %}selected {% endif %}right »>CAD</span>

</span>

Voilà pour aujourd’hui. Dans le prochain focus, nous aborderons la personnalisation du code pour modifier la navigation dans votre boutique, avec de nombreuses fonctions très intéressantes.

À très bientôt pour la suite !