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. Mer information 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å ikonen 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å .
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å .
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å ✓.

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. Mer information 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>

Lägg till anpassad HTML eller Liquid för Promise-modulen

Om ditt tema stöder anpassade block kan du lägga till Shop Promise-modulen på din produktsida med hjälp av ett anpassat Liquid-block utan att behöva redigera temakoden.

Steg för att lägga till Promise-modulen med ett anpassat Liquid-block:

Dator

1. Från din Shopify-admin går du till Webbshop > Teman.
2. Hitta det tema du vill redigera och klicka på Anpassa.
3. Navigera till en produktsida med hjälp av mallväljaren i det övre menyfältet.
4. I sidomenyn hittar du avsnittet Produktinformation.
5. Klicka på Lägg till block och välj Anpassa Liquid från listan över tillgängliga block.
6. I textfältet för anpassad Liquid klistrar du in följande kod:

<div class="delivery-promise__promise-container"></div>

1. Placera blocket genom att dra det till önskad plats, vanligtvis under blocket Köpknappar.
2. Klicka på Spara för att tillämpa ändringarna.

Om du vill ange en temainställning (mörk eller ljus) kan du använda något av följande istället:

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

Eller

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

iPhone

1. Från Shopify-appen trycker du på och blippa sedan Onlinebutik.
2. Tryck på Hantera teman.
3. Hitta ditt aktiva tema och klicka på Anpassa.
4. Navigera till en produktsida med hjälp av mallväljaren högst upp.
5. Tryck på avsnittet Produktinformation.
6. Tryck på Lägg till block och välj Anpassa Liquid.
7. I textfältet för anpassad Liquid klistrar du in följande kod:

<div class="delivery-promise__promise-container"></div>

1. Placera blocket genom att dra det till önskad plats, vanligtvis under blocket Köpknappar.
2. Tryck på Spara för att tillämpa dina ändringar.

Om du vill ange en temainställning (mörk eller ljus) kan du använda något av följande istället:

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

Eller

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

Android

1. Från Shopify-appen trycker du på och blippa sedan Onlinebutik.
2. Tryck på Hantera teman.
3. Hitta ditt aktiva tema och klicka på Anpassa.
4. Navigera till en produktsida med hjälp av mallväljaren högst upp.
5. Tryck på avsnittet Produktinformation.
6. Tryck på Lägg till block och välj Anpassa Liquid.
7. I textfältet för anpassad Liquid klistrar du in följande kod:

<div class="delivery-promise__promise-container"></div>

1. Placera blocket genom att dra det till önskad plats, vanligtvis under blocket Köpknappar.
2. Tryck på Spara för att tillämpa dina ändringar.

Om du vill ange en temainställning (mörk eller ljus) kan du använda något av följande istället:

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

Eller

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

Tips

Det är inte alla teman som stöder anpassade Liquid-block. Om ditt tema inte har det här alternativet, följer du instruktionerna för manuell placering av Shop Promise-modulen genom att redigera din temakod.