Afficher Shop Promise sur votre page de produit

Cette page a été imprimée le Apr 25, 2024. Pour la dernière version, allez à https://help.shopify.com/fr/manual/shipping/shop-promise/product-page.

Le badge Shop Promise s’affiche à côté des dates de livraison et sur les pages de produits pour les livraisons admissibles, qui sont estimées être livrées à l’intérieur des États-Unis en cinq jours civils ou moins. Ce badge permet aux clients de savoir que leur commande inclut une livraison rapide et fiable.

Une fois que votre candidature à Shop Promise a été approuvée, vous devez accéder à la page de produit en utilisant votre éditeur de thème pour confirmer que le badge Shop Promise s’affiche correctement.

Si le badge ne s’affiche pas correctement, vous devrez positionner manuellement le module Shop Promise.

Sur cette page

Position manuelle du module Shop Promise

Si vous souhaitez lire et modifier le code du thème, vous pouvez identifier les endroits où apporter des modifications et mettre à jour la page de produit.

Identifier les endroits où apporter des modifications

Le code du module Shop Promise doit être inclus au formulaire de produit sur la page du produit, qui ressemblera à {%- form 'product', product -%}. Le module Shop Promise se trouve à différents emplacements en fonction de votre thème. Les emplacements suivants sont courants :

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

Mettre à jour la page de produit

Étapes :

  1. Dans l'interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.
  2. Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
  3. Ouvrez le fichier concerné.
  4. Recherchez la ligne qui contient ce qui suit : {%- if block.settings.show_dynamic_checkout -%} ou {{ form | payment_button }}.
  5. Créez une nouvelle ligne directement au-dessous de {%- if block.settings.show_dynamic_checkout -%}{{ form | payment_button }}{%- endif -%} et collez ce qui suit sur cette ligne : 
<div class="delivery-promise__promise-container"></div>
  1. Cliquez sur Enregistrer.

Le résultat devrait ressembler à ceci :

{%- if block.settings.show_dynamic_checkout -%}
  {{ form | payment_button }}
{%- endif -%}
<div class="delivery-promise__promise-container"></div>
  1. Dans l’application Shopify, appuyez sur le bouton …
  2. Dans la section Canaux de vente, appuyez sur Online Store (Boutique en ligne).
  3. Appuyez sur Manage themes (Gérer les thèmes).
  4. Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
  5. Ouvrez le fichier concerné.
  6. Recherchez la ligne qui contient ce qui suit : {%- if block.settings.show_dynamic_checkout -%} ou {{ form | payment_button }}.
  7. Créez une nouvelle ligne directement au-dessous de {%- if block.settings.show_dynamic_checkout -%}{{ form | payment_button }}{%- endif -%} et collez ce qui suit sur cette ligne : 
<div class="delivery-promise__promise-container"></div>
  1. Cliquez sur Enregistrer.

Le résultat devrait ressembler à ceci :

{%- if block.settings.show_dynamic_checkout -%}
  {{ form | payment_button }}
{%- endif -%}
<div class="delivery-promise__promise-container"></div>
  1. Dans l’application Shopify, appuyez sur le bouton …
  2. Dans la section Canaux de vente, appuyez sur Online Store (Boutique en ligne).
  3. Appuyez sur Manage themes (Gérer les thèmes).
  4. Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
  5. Ouvrez le fichier concerné.
  6. Recherchez la ligne qui contient ce qui suit : {%- if block.settings.show_dynamic_checkout -%} ou {{ form | payment_button }}.
  7. Créez une nouvelle ligne directement au-dessous de {%- if block.settings.show_dynamic_checkout -%}{{ form | payment_button }}{%- endif -%} et collez ce qui suit sur cette ligne : 
<div class="delivery-promise__promise-container"></div>
  1. Cliquez sur Enregistrer.

Le résultat devrait ressembler à ceci :

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

Remplacer manuellement le thème du module Shop Promise

Le module Shop Promise a un thème sombre et 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 du 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 utilisé pour positionner manuellement le module Shop Promise.

Avant d’apporter des modifications, dupliquez votre thème et modifiez le thème dupliqué, afin de pouvoir facilement inverser les modifications.

Étapes :

  1. Suivez les instructions pour positionner manuellement le module Shop Promise sur votre page de produit, puis gardez l’éditeur de thème ouvert.
  2. Ajoutez un attribut de données de thème à votre élément d’ancre que vous avez récemment créé et configuré sur sombre ou clair.
  3. Cliquez sur Enregistrer.

Le résultat doit ressembler à l’un des résultats suivants :

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

Ou

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

Le résultat doit ressembler à l’un des résultats suivants :

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

Ou

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

Le résultat doit ressembler à l’un des résultats suivants :

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

Ou

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

Prêt(e) à commencer à vendre avec Shopify ?

Essayez gratuitement