Aide
Se connecter

Affichage de Shop Promise sur votre page de produit

Le badge Shop Promise s’affiche à côté des dates de livraison et sur les pages de produits pour les livraisons admissibles dont l’acheminement sur le territoire national des États-Unis est estimé à cinq jours calendaires ou moins. Ce badge informe les clients que leur commande inclut une livraison rapide et fiable.

Après avoir activé Shop Promise, accédez à la page de produit à l’aide de votre éditeur de thème pour vérifier que le badge Shop Promise s’affiche correctement.

Si le badge ne s’affiche pas correctement, assurez-vous que les boutons de paiement accéléré sont activés sur votre boutique. Vous disposez également de plusieurs options pour personnaliser l’affichage du badge Shop Promise.

Sur cette page

Positionnement manuel du module Shop Promise

Si vous êtes à l’aise avec la lecture et la modification du code de thème, vous pouvez déterminer où apporter des modifications et mettre à jour la page de produit.

Déterminer où apporter des modifications

Le code du module Shop Promise doit être inclus dans le formulaire de produit de la page de produit, qui devrait être semblable à {%- form 'product', product -%}. Le module Shop Promise se trouve à différents endroits en fonction de votre thème. Voici quelques emplacements courants :

  • main-product.liquid
  • product-form.liquid
  • product-template.liquid
  • product.liquid

Mettre à jour la page de produit

Étapes :

Ordinateur de bureau

  1. Depuis votre interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.

  2. Trouvez le thème que vous souhaitez modifier, cliquez sur l’icône menu horizontal pour ouvrir le menu d’actions, puis cliquez sur Modifier le code.

  3. Ouvrez le fichier concerné.

  4. Trouvez la ligne qui contient {%- if block.settings.show_dynamic_checkout -%} ou {{ form | payment_button }}.

  5. Créez une nouvelle ligne juste en dessous de {%- if block.settings.show_dynamic_checkout -%}{{ form | payment_button }}{%- endif -%} et collez-y le code suivant :

<div class="delivery-promise__promise-container"></div>
  1. Cliquez sur Enregistrer.

Le résultat devrait ressembler à ce qui suit :

{%- if block.settings.show_dynamic_checkout -%}
  {{ form | payment_button }}
{%- endif -%}
<div class="delivery-promise__promise-container"></div>
Mobile

  1. Depuis l’application Shopify, appuyez sur l’icône Menu.

  2. Dans la section Canaux de vente, appuyez sur Boutique en ligne > Gérer tous les thèmes.

  3. Trouvez le thème que vous souhaitez modifier, appuyez sur le bouton … pour ouvrir le menu d’actions, puis appuyez sur Modifier le code.

  4. Ouvrez le fichier concerné.

  5. Trouvez la ligne qui contient {%- if block.settings.show_dynamic_checkout -%} ou {{ form | payment_button }}.

  6. Créez une nouvelle ligne juste en dessous de {%- if block.settings.show_dynamic_checkout -%}{{ form | payment_button }}{%- endif -%} et collez-y le code suivant :

<div class="delivery-promise__promise-container"></div>
  1. Appuyez sur Enregistrer ou sur ✓.

Le résultat devrait ressembler à ce qui suit :

{%- if block.settings.show_dynamic_checkout -%}
  {{ form | payment_button }}
{%- endif -%}
<div class="delivery-promise__promise-container"></div>

Remplacement manuel du thème du module Shop Promise

Le module Shop Promise dispose d’un thème sombre et d’un thème clair. Le module utilise automatiquement le thème qui présente le rapport de contraste le plus élevé par rapport à la couleur d’arrière-plan de la page de produit.

Si vous êtes à l’aise avec la lecture et la modification du code de thème, vous pouvez remplacer le thème sélectionné du module en ajoutant un attribut de données à l’élément d’ancre qui est utilisé pour positionner manuellement le module Shop Promise.

Avant d’apporter des modifications, dupliquez votre thème et modifiez la copie dupliquée afin de pouvoir annuler facilement les changements.

Étapes :

Ordinateur de bureau
  1. Suivez les instructions pour positionner manuellement le module Shop Promise sur votre page de produit, puis laissez l’éditeur de thème ouvert.
  2. Ajoutez un attribut de données de thème à votre élément d’ancre nouvellement créé et définissez-le sur sombre ou clair.
  3. Cliquez sur Enregistrer.

Le résultat devrait ressembler à l’une des options suivantes :

<div class="delivery-promise__promise-container" data-theme="dark"></div>

Ou

<div class="delivery-promise__promise-container" data-theme="light"></div>
Mobile
  1. Suivez les instructions pour positionner manuellement le module Shop Promise sur votre page de produit, puis laissez l’éditeur de thème ouvert.
  2. Ajoutez un attribut de données de thème à votre élément d’ancre nouvellement créé et définissez-le sur sombre ou clair.
  3. Appuyez sur Enregistrer.

Le résultat devrait ressembler à l’une des options suivantes :

<div class="delivery-promise__promise-container" data-theme="dark"></div>

Ou

<div class="delivery-promise__promise-container" data-theme="light"></div>

Ajout de code HTML ou Liquid personnalisé pour le module Promise

Si votre thème prend en charge les blocs personnalisés, vous pouvez utiliser un bloc Liquid personnalisé pour ajouter le module Shop Promise à votre page de produit sans modifier le code du thème.

Étapes pour ajouter le module Promise à l’aide d’un bloc Liquid personnalisé :

Ordinateur de bureau

  1. Depuis votre interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.

  2. Trouvez le thème que vous souhaitez modifier, puis cliquez sur Modifier le thème.

  3. Accédez à une page de produit à l’aide du sélecteur de modèle dans la barre de menu supérieure.

  4. Dans le menu de la barre latérale, recherchez la section Informations sur le produit.

  5. Cliquez sur Ajouter un bloc, puis sélectionnez Liquid personnalisé dans la liste des blocs disponibles.

  6. Dans le champ de texte Liquid personnalisé, collez le code suivant :

<div class="delivery-promise__promise-container"></div>
  1. Positionnez le bloc en le faisant glisser vers l’emplacement souhaité, généralement sous le bloc des boutons d’achat.
  2. Cliquez sur Enregistrer pour appliquer vos modifications.

Si vous souhaitez spécifier une préférence de thème (sombre ou clair), utilisez plutôt l’une des options suivantes :

<div class="delivery-promise__promise-container" data-theme="dark"></div>

Ou

<div class="delivery-promise__promise-container" data-theme="light"></div>
Mobile

  1. Depuis l’application Shopify, appuyez sur l’icône Menu.

  2. Dans la section Canaux de vente, appuyez sur Boutique en ligne > Gérer tous les thèmes.

  3. Trouvez votre thème actif, puis appuyez sur Modifier le thème.

  4. Accédez à une page de produit à l’aide du sélecteur de modèle en haut de la page.

  5. Appuyez sur la section Informations sur le produit.

  6. Appuyez sur Ajouter un bloc, puis sélectionnez Custom Liquid.

  7. Dans le champ de texte Liquid personnalisé, collez le code suivant :

<div class="delivery-promise__promise-container"></div>
  1. Positionnez le bloc en le faisant glisser vers l’emplacement souhaité, généralement sous le bloc des boutons d’achat.
  2. Appuyez sur Enregistrer pour appliquer vos modifications.

Si vous souhaitez spécifier une préférence de thème (sombre ou clair), utilisez plutôt l’une des options suivantes :

<div class="delivery-promise__promise-container" data-theme="dark"></div>

Ou

<div class="delivery-promise__promise-container" data-theme="light"></div>

Langues prises en charge pour le badge Shop Promise

Consultez le tableau ci-dessous pour connaître les langues dans lesquelles le badge Shop Promise peut s’afficher. Si la langue de votre boutique n’est pas prise en charge, le badge Shop Promise s’affiche en anglais.

Langues dans lesquelles le badge Shop Promise peut s’afficher.
Chinois (simplifié)Chinois (traditionnel)CroateTchèque
DanoisNéerlandaisAnglaisFinnois
FrançaisAllemandGrecHindi
HongroisIndonésienItalienJaponais
CoréenLituanienMalaisNorvégien (bokmål)
PolonaisPortuguais (Brésil)Portuguais (Portugal)Roumain
RusseSlovaqueSlovèneEspagnol
SuédoisThaïTurcVietnamien