Visa Shop Promise på din produktsida

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.

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

Tips

Du kan uppdatera ditt tema genom att kontakta Shopify-support om du inte själv vill läsa och redigera temakod och om du använder ett tema från Shopify. Läs mer om Shopifys designpolicy. Om du använder ett tema från tredje part kan du kontakta din temautvecklare eller anlita en Shopify partner.

Uppdatera produktsidan

Tips

Innan du gör några ändringar ska du duplicera ditt tema och göra ändringar i kopian, så att du enkelt kan återställa alla ändringar som du gör.

Steg:

Dator

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>

iPhone

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>

Android

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.

Tips

Du kan uppdatera ditt tema genom att kontakta Shopify-support om du inte själv vill läsa och redigera temakod och om du använder ett tema från Shopify. Läs mer om Shopifys designpolicy. Om du använder ett tema från tredje part kan du kontakta din temautvecklare eller anlita en Shopify partner.

Steg:

Dator

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>

iPhone

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>

Android

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>