Visa Shop Promise på din produktsida

Den här sidan skrevs ut den Sep 18, 2024. Besök https://help.shopify.com/sv/manual/fulfillment/setup/shop-promise/product-page för den aktuella versionen.

Shop Promise-märket visas bredvid leveransdatum och på produktsidor för leveranser som beräknas levereras till USA inom max fem kalenderdagar. Detta märke gör att kunderna vet att deras ordrar inkluderar snabb och pålitlig leverans.

När din ansökan om Shop Promise är godkänd bör du navigera till produktsidan med hjälp av din temaredigerare för att bekräfta att Shop Promise-märket visas korrekt.

Om märket inte visas korrekt måste du manuellt lägga till Shop Promise-modulen.

På den här sidan

Lägg till Shop Promise-modulen manuellt

Om du är van vid att läsa och redigera temakod kan du identifiera var du ska göra ändringar och själv uppdatera produktsidan.

Identifiera var du ska göra ändringar

Koden för Shop Promise-modulen måste ingå i produktformuläret på produktsidan, som kommer se ut ungefär som {%- form 'product', product -%}. Shop Promise-modulen kan ha olika placering beroende på ditt tema. Följande är vanliga placeringar:

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

Uppdatera produktsidan

Steg:

  1. Från din Shopify-admin går du till Webbshop > Teman.
  2. Hitta det tema du vill redigera, klicka på knappen … för att öppna åtgärdsmenyn och klicka sedan på Redigera kod.
  3. Öppna relevant fil.
  4. Hitta den rad som innehåller en {%- if block.settings.show_dynamic_checkout -%} eller {{ form | payment_button }}.
  5. Skapa en ny rad direkt under {%- if block.settings.show_dynamic_checkout -%}{{ form | payment_button }}{%- endif -%} och klistra in följande på den raden: 
<div class="delivery-promise__promise-container"></div>
  1. Klicka på Spara.

Resultatet bör likna följande:

{%- if block.settings.show_dynamic_checkout -%}
  {{ form | payment_button }}
{%- endif -%}
<div class="delivery-promise__promise-container"></div>
  1. Från Shopify-appen trycker du på knappen ….
  2. Tryck på Webbshop i avsnittet Försäljningskanaler.
  3. Tryck på Hantera teman.
  4. Hitta det tema du vill redigera, tryck på knappen … för att öppna åtgärdsmenyn och tryck sedan på Redigera kod.
  5. Öppna relevant fil.
  6. Hitta den rad som innehåller en {%- if block.settings.show_dynamic_checkout -%} eller {{ form | payment_button }}.
  7. Skapa en ny rad direkt under {%- if block.settings.show_dynamic_checkout -%}{{ form | payment_button }}{%- endif -%} och klistra in följande på den raden: 
<div class="delivery-promise__promise-container"></div>
  1. Tryck på Spara.

Resultatet bör likna följande:

{%- if block.settings.show_dynamic_checkout -%}
  {{ form | payment_button }}
{%- endif -%}
<div class="delivery-promise__promise-container"></div>
  1. Från Shopify-appen trycker du på knappen ….
  2. Tryck på Webbshop i avsnittet Försäljningskanaler.
  3. Tryck på Hantera teman.
  4. Hitta det tema du vill redigera, tryck på knappen … för att öppna åtgärdsmenyn och tryck sedan på Redigera kod.
  5. Öppna relevant fil.
  6. Hitta den rad som innehåller en {%- if block.settings.show_dynamic_checkout -%} eller {{ form | payment_button }}.
  7. Skapa en ny rad direkt under {%- if block.settings.show_dynamic_checkout -%}{{ form | payment_button }}{%- endif -%} och klistra in följande på den raden: 
<div class="delivery-promise__promise-container"></div>
  1. Tryck på Spara.

Resultatet bör likna följande:

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

Åsidosätt manuellt temat Shop Promise-modul

Shop Promise-modul har ett mörkt och ljust tema. Modulenheten använder automatiskt det tema som har det högsta kontrastförhållandet jämfört med produktsidans bakgrundsfärg.

Om du är bekväm med att läsa och redigera temakod kan du åsidosätta det valda temat för modulen genom att lägga till ett dataattribut till ankarelementet som används för att manuellt placera Shop Promise-modulen.

Duplicera ditt tema och redigera det duplicerade temat innan du gör några ändringar, så att du enkelt kan återställa eventuella ändringar.

Steg:

  1. Följ anvisningarna för att manuellt placera Shop Promise-modulen på din produktsida och håll sedan temaredigeraren öppen.
  2. Lägg till ett temadataattribut till ditt nyskapade ankarelement som är inställt på mörkt eller ljust.
  3. Klicka på Spara.

Resultatet bör likna något av följande:

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

Eller

<div class="delivery-promise__promise-container" data-theme="light"></div>
  1. Följ anvisningarna för att manuellt placera Shop Promise-modulen på din produktsida och håll sedan temaredigeraren öppen.
  2. Lägg till ett temadataattribut till ditt nyskapade ankarelement som är inställt på mörkt eller ljust.
  3. Tryck på Spara.

Resultatet bör likna något av följande:

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

Eller

<div class="delivery-promise__promise-container" data-theme="light"></div>
  1. Följ anvisningarna för att manuellt placera Shop Promise-modulen på din produktsida och håll sedan temaredigeraren öppen.
  2. Lägg till ett temadataattribut till ditt nyskapade ankarelement som är inställt på mörkt eller ljust.
  3. Tryck på Spara.

Resultatet bör likna något av följande:

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

Eller

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

Är du redo att börja sälja med Shopify?

Prova gratis