Carte d'offre en boutique

Ce qu’est la carte d’offre#

Vos rabais s’appliquent automatiquement au paiement sur chaque forfait, alors les clients n’entrent jamais de code. La carte d’offre en boutique (storefront offer card) est l’autre moitié de l’affaire. C’est une petite carte sur votre page produit qui parle de l’offre aux clients avant qu’ils arrivent au paiement.

La carte lit exactement la même configuration que le rabais au paiement. C’est voulu. Ce qu’on montre à un client et ce qu’on lui facture ne peuvent pas diverger.

Deux choses à savoir avant de commencer :

• La carte d’offre est incluse dans chaque forfait, le forfait Gratuit (Free) inclus. Vos rabais s’appliquent automatiquement au paiement, que la carte soit sur votre thème ou non, et la carte ne change que ce que les clients voient avant.
• La carte est un bloc d’application de thème. Elle n’apparaît pas tant que vous ne l’ajoutez pas vous-même à votre thème, dans l’éditeur de thème Shopify. Rien d’un rabais ne change quand vous l’ajoutez.

Ajouter le bloc à votre thème#

Ce que la pastille veut dire :

Une fois le bloc installé, le bouton devient Ouvrir l’éditeur de thème (Open theme editor) et ouvre le même modèle sans ajouter une deuxième copie du bloc. Un bouton Désinstaller (Uninstall) apparaît à côté de Vérifier de nouveau. Il ouvre le même éditeur, parce que Shopify ne donne aux applications aucun moyen de retirer un bloc d’un thème. La carte le dit au-dessus du bouton, et une fois que vous supprimez le bloc là-bas, la pastille se met à jour toute seule.

Ce que la vérification regarde vraiment#

• Votre thème publié seulement. Si vous publiez un autre thème, ajoutez-y le bloc aussi.
• Votre modèle de produit par défaut, parce que la carte est un bloc de page produit. Si certains de vos produits utilisent un autre modèle de produit, la carte s’affiche quand même partout où vous avez ajouté le bloc, mais la pastille ne reflète que le modèle par défaut.
• Un bloc présent mais désactivé dans l’éditeur de thème compte comme non ajouté.
• Un bloc imbriqué dans un groupe ou dans un autre bloc est quand même trouvé.
• Un thème antérieur à Online Store 2.0 n’a pas de modèle de produit de ce type et ne peut pas prendre de blocs d’application du tout, alors la pastille reste à Désactivé.
• Le bloc est reconnu par sa propre poignée de bloc, le offer_card dans shopify://apps/…/blocks/offer_card/<uuid>. Ce segment appartient à xDiscount et ne change pas quand l’application est renommée ou l’extension réenregistrée, alors la pastille continue de fonctionner d’une mise à niveau à l’autre.

Shopify n’avertit jamais une application quand un bloc de thème est ajouté ou retiré, alors après que vous cliquez sur Ajouter au thème (Add to theme), xDiscount va voir lui-même : une fois après deux secondes, puis toutes les cinq secondes, jusqu’à vingt fois, en s’arrêtant dès que la pastille change. Après ça, utilisez Vérifier de nouveau.

Réglages de l’éditeur de thème#

Sélectionnez le bloc xDiscount offer dans l’éditeur de thème. Ses réglages sont regroupés sous six en-têtes : Texte (Text), Ligne de stock (Stock line), Conditions, Couleurs (Colours), Taille et espacement (Size and spacing) et Affichage (Display).

Tout ce qui touche à ce que la carte dit d’un rabais vient encore du rabais lui-même. Aucun de ces réglages ne peut changer un montant, une condition ou une date, alors la carte et le paiement ne peuvent pas se contredire.

Texte#

Chaque réglage de texte est facultatif, et vide veut dire la valeur par défaut traduite. C’est voulu. Une boutique dans une autre langue ne se fait jamais servir de l’anglais à partir d’une valeur par défaut que vous n’avez pas tapée.

Ligne de stock#

Le nombre est le chiffre de stock de votre thème au moment où la page s’affiche. Il est seulement affiché, et aucun rabais n’est décidé à partir de lui.

Conditions#

Trois cases à cocher décident quels types de condition la fenêtre montre, et six gabarits facultatifs sous le même en-tête décident la formulation.

Formulation des conditions. Six gabarits facultatifs, un par type de condition, pour que la fenêtre parle avec vos mots. Chacun prend {min} et, là où ça s’applique, {max} à l’endroit où vont les nombres. Laissez un gabarit vide pour la formulation par défaut.

Une condition dont Inverser cette condition (Negate this condition) est cochée utilise le même gabarit, enveloppé en Non : …. Une borne de maximum seulement, et une ancienne condition de date, utilisent toujours la formulation par défaut.

Couleurs#

Chaque offre est une tuile pleine aux coins arrondis, et Texte d’urgence est la couleur dont elle est remplie. À la sortie de la boîte, c’est un violet, #8B5CF6, avec de l’écriture blanche. Le bloc lui-même n’a ni fond ni bordure à moins que vous lui en donniez un, alors les tuiles reposent directement sur votre page produit.

Taille et espacement#

Les offres sont disposées en grille adaptative : autant de tuiles par rangée qu’il en entre à 280 px chacune, avec un retour à la rangée suivante en dessous de ça. Une tuile se soulève légèrement quand un client la pointe, et ne bouge pas du tout pour un client qui a demandé à son système de réduire les animations.

Affichage#

Le compte à rebours est une bande de Jours / Heures / Min / Sec sous l’offre, et il compte jusqu’à la fin du dernier jour dans le fuseau horaire de votre boutique. Le moment de fin est estampillé avec le décalage UTC de votre boutique, alors un client dans un autre pays voit le même temps restant que vous, pas son propre minuit. La bande devient ambre à moins d’un jour, et rouge, avec une pulsation douce, à moins d’une heure. Un client qui a demandé à son système de réduire les animations ne voit aucune pulsation.

Tout ce que vous tapez dans un réglage de texte est montré aux clients exactement comme vous l’avez écrit, et est échappé avant d’atteindre la page, alors un guillemet ou un chevron égaré dans votre formulation ne peut jamais casser la carte ni votre thème.

Ce que les clients voient#

Sur une page produit avec au moins une offre en cours, la carte affiche votre Titre et votre Sous-titre si vous les avez définis, puis une tuile par rabais en cours, disposées en grille de tuiles pleines aux coins arrondis.

Chaque tuile se lit, de gauche à droite : le nom du rabais tel que vous l’avez tapé dans le formulaire de rabais, la Ligne de détails en dessous, la ligne de stock si vous l’avez activée, et la valeur en gros à droite.

Cliquer sur une tuile ouvre une fenêtre avec le nom du rabais, sa valeur et ses conditions, dans le même ordre et avec les mêmes liaisons que le rabais les évalue réellement. Si votre rabais exige 3 articles et que la carte ne le disait pas, un client ne le découvrirait qu’au paiement. Une offre sans condition le dit.

Les rangées après la première portent leur propre mot de liaison, soit et, soit ou, sur la ligne au-dessus d’elles, ce qui correspond à la façon dont les conditions se lisent de haut en bas dans le formulaire de rabais. Une condition inversée est marquée en rouge. Une condition que la carte ne reconnaît pas n’affiche rien du tout plutôt qu’une supposition, et vos gabarits de Formulation des conditions remplacent les phrases par défaut ci-dessus partout où vous en avez défini un.

Enfin, le dernier jour d’un rabais qui a une date de fin, la tuile affiche Se termine aujourd’hui au-dessus de son compte à rebours.

Quand la carte n’affiche rien#

La carte n’affiche rien, donc pas de boîte vide, pas de titre, pas même sa feuille de style, à moins qu’un produit ait au moins une offre en cours à montrer. Ça veut dire aucune carte quand :

• le produit n’est visé par aucun rabais ;
• chaque rabais sur le produit est Brouillon (Draft) ou Archivé (Archived) ;
• la journée d’aujourd’hui tombe en dehors de la Période du rabais (Discount period) de chaque rabais ;
• le bloc n’est pas sur votre thème publié.

Les deux dates de la période sont des journées entières inclusives dans le fuseau horaire de votre boutique, et chaque côté fonctionne indépendamment. Une date de début sans date de fin dure indéfiniment, et un rabais dont le début et la fin sont la même date dure cette seule journée.

La carte suit la variante que le client sélectionne. Un rabais restreint à des variantes précises indique S’applique uniquement aux variantes sélectionnées dans ses détails tant que la variante sélectionnée en fait partie. Dès que le client choisit une variante que vous avez laissée de côté, cette offre est estompée et marquée Non offert pour la variante sélectionnée, et elle revient lorsqu’il choisit une variante que vous avez incluse. Un rabais sur tout un produit qui saute les variantes en rupture de stock, ou qui porte une condition de Stock, fait de même sur les variantes qu’il saute, et la ligne de stock suit elle aussi.

La carte lit la variante sélectionnée de la façon dont chaque thème l’annonce — l’URL de la page et le formulaire du produit — de sorte que ce qu’un client voit sur la tuile est ce que le paiement fera pour la variante qu’il a entre les mains.

Le sélecteur de cadeau, Achetez X obtenez Y#

Sur un rabais Achetez X obtenez Y, la tuile porte un bouton qui affiche Choisissez votre cadeau gratuit, ou ce que vous avez tapé dans Libellé du sélecteur de cadeau. Il ouvre la fenêtre de cadeau.

Ce que les clients voient dans la fenêtre. Une rangée par produit cadeau que vous avez choisi, chacune avec le titre du produit, une petite image quand nous en avons une, et un bouton Ajouter (Add). Un cadeau sans titre retombe sur Cadeau gratuit. Sous la liste, une ligne affiche 0 sur 2 sélectionnés, comptés par rapport au Nombre d’articles cadeaux (Number of gift items) que vous avez défini sur le rabais.

Un cadeau offrant plus d’une variante au choix affiche Choisir (Choose) au lieu d’Ajouter (Add) : un clic déplie les variantes, chacune nommée comme votre boutique les nomme (Petit, Grand) avec son propre Ajouter, et une variante déjà en rupture est grisée et marquée Épuisé (Sold out). Les noms et la disponibilité des variantes sont lus dans les données de produits de votre boutique à l’ouverture de la fenêtre, alors ils sont toujours à jour et ne sont jamais stockés sur le rabais.

Ce qui se passe à l’ajout. Une unité de ce cadeau est ajoutée au panier, marquée comme ligne de cadeau, la rangée devient Ajouté, et le compte monte de un. Un client qui veut deux fois le même cadeau clique sur Ajouter deux fois, et celui qui en veut un de chaque clique une fois sur chacun. Votre rabais enlève ensuite le pourcentage que vous avez défini sur cette ligne au paiement, pour au plus ce nombre d’unités dans tout le panier. Une fois que le compte atteint la limite, chaque bouton Ajouter est grisé, parce qu’un cadeau de plus serait facturé plein prix au paiement. Un bouton est aussi grisé pendant que sa requête est en vol et revient quand elle se termine, alors un client qui a frappé un échec peut réessayer.

Des choses qui valent la peine d’être sues :

• Le marqueur que la carte met sur la ligne du panier dit seulement « cette ligne est un cadeau ». Chaque valeur, donc le pourcentage, le nombre de cadeaux couverts, le calendrier et les conditions, vient encore de votre rabais. Le navigateur d’un client ne peut jamais décider de ce que coûte un cadeau.
• Les variantes qu’un cadeau offre relèvent de vous, dans le sélecteur : cochez le produit en entier et toutes ses variantes sont offertes, ou ouvrez-le et cochez des variantes précises pour restreindre le choix. Le paiement ne fait jamais de rabais que sur une variante de cadeau que vous avez autorisée, quoi qu’en dise le navigateur d’un client. Un cadeau enregistré avant l’existence de cette option n’offre que la variante saisie à l’époque — ouvrez le sélecteur et resélectionnez-le pour en offrir davantage. Un cadeau pour lequel nous n’avons aucune variante du tout est sauté, et toute la zone des cadeaux est cachée s’il ne reste plus rien à choisir.
• Après l’ajout du cadeau, la carte dit à votre thème de rafraîchir son propre panier. La plupart des thèmes captent ça. Si le vôtre ne met pas à jour son tiroir de panier, l’article est quand même dans le panier, et un rafraîchissement de la page le montrera.
• Un rabais Achetez X obtenez Y sans produits cadeaux ne peut pas être enregistré comme Actif (Active) du tout, et le formulaire de rabais avertit : « Aucun cadeau n’est encore choisi, les clients ne peuvent pas réclamer cette offre tant que vous n’en avez pas choisi un. »

Pourquoi les montants s’affichent dans la devise de votre boutique#

C’est la question que les marchands posent le plus au sujet de la carte, alors voici la réponse franche.

Les montants fixes sont enregistrés dans la devise de votre boutique, parce que c’est la devise dans laquelle vous les avez tapés. Au paiement, Shopify convertit ce chiffre dans la devise du client avec le vrai taux de change de son marché.

La carte, qui tourne dans votre thème, n’a aucun accès à ce taux de change. Les modèles de thème de Shopify exposent le code, le nom et le symbole d’une devise, jamais le taux. Alors si la carte se contentait de mettre en forme votre nombre avec le symbole de devise du client, un client sur un marché en euros lirait « 10,00 € de rabais » pendant que le paiement en enlèverait à peu près 9,20 €. La carte et le paiement se contrediraient, ce qui est exactement ce que cette application est bâtie pour empêcher.

La règle que la carte suit : mettre le montant en forme normalement à moins qu’un écart soit possible.

La même règle s’applique aux conditions de Valeur du panier, alors un seuil ne dit jamais à un client de dépenser le mauvais montant pour se qualifier.

Les pourcentages ne sont jamais touchés, parce que 20 % de rabais, c’est 20 % de rabais dans toutes les devises, et la livraison gratuite non plus. Cette prudence ne vous coûte rien, sauf sur les montants où se tromper compterait vraiment.