Visa Shop Promise på din produktsida
Shop Promise-brickan visas bredvid leveransdatum och på produktsidor för kvalificerade leveranser som beräknas levereras inom USA på fem eller färre kalenderdagar. Den här brickan meddelar kunderna att deras order inkluderar snabb och pålitlig leverans.
När du har aktiverat Shop Promise bör du navigera till produktsidan med din temaredigerare för att bekräfta att Shop Promise-brickan visas korrekt.
Om brickan inte visas korrekt ska du se till att din butik har accelererade kassaknappar aktiverade. Du har även flera alternativ för att anpassa visningen av Shop Promise-brickan.
På den här sidan
Placera Shop Promise-modulen manuellt
Om du är bekväm med att läsa och redigera temakod kan du identifiera var du ska göra ändringar och uppdatera produktsidan.
Identifiera var du ska göra ändringar
Koden för Shop Promise-modulen måste inkluderas i produktformuläret på produktsidan, vilket bör likna {%- form 'product', product -%}. Shop Promise-modulen kan finnas på olika platser beroende på ditt tema. Följande är vanliga platser:
main-product.liquidproduct-form.liquidproduct-template.liquidproduct.liquid
Uppdatera produktsidan
Steg:
Dator
Från din Shopify admin, gå till Webbutik > Teman.
Hitta det tema som du vill redigera, klicka på
-ikonen för att öppna åtgärdsmenyn och klicka sedan på Redigera kod.Öppna relevant fil.
Hitta raden som innehåller
{%- if block.settings.show_dynamic_checkout -%}eller{{ form | payment_button }}.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>- Klicka på Spara.
Resultatet bör se ut ungefär så här:
{%- if block.settings.show_dynamic_checkout -%}
{{ form | payment_button }}
{%- endif -%}
<div class="delivery-promise__promise-container"></div>Mobil
Från Shopify app, tryck på ikonen
.I avsnittet Försäljningskanaler, tryck på Webbshop > Hantera alla teman.
Hitta det tema du vill redigera, tryck på …-knappen för att öppna åtgärdsmenyn och tryck sedan på Redigera kod.
Öppna relevant fil.
Hitta raden som innehåller
{%- if block.settings.show_dynamic_checkout -%}eller{{ form | payment_button }}.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>- Tryck på Spara eller ✓.
Resultatet bör se ut ungefär så här:
{%- if block.settings.show_dynamic_checkout -%}
{{ form | payment_button }}
{%- endif -%}
<div class="delivery-promise__promise-container"></div>Åsidosätt Shop Promise-modulens tema manuellt
Shop Promise-modulen har ett mörkt och ett ljust tema. Modulen använder automatiskt det tema som har högst kontrastförhållande jämfört med produktsidans bakgrundsfärg.
Om du är bekväm med att läsa och redigera temakod kan du åsidosätta modulens valda tema genom att lägga till ett dataattribut i ankarelementet som används för att placera Shop Promise-modulen manuellt.
Innan du gör några ändringar ska du duplicera ditt tema och redigera dubblett-temat, så att du enkelt kan återställa eventuella ändringar.
Steg:
Dator
- Följ instruktionerna för att placera Shop Promise-modulen manuellt på din produktsida och håll sedan temaredigeraren öppen.
- Lägg till ett tema-dataattribut inställt på mörkt eller ljust i ditt nyskapade ankarelement.
- Klicka på Spara.
Resultatet bör se ut ungefär som 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>Mobil
- Följ instruktionerna för att placera Shop Promise-modulen manuellt på din produktsida och håll sedan temaredigeraren öppen.
- Lägg till ett tema-dataattribut inställt på mörkt eller ljust i ditt nyskapade ankarelement.
- Tryck på Spara.
Resultatet bör se ut ungefär som 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 har stöd för anpassade block kan du använda ett block för anpassad Liquid för att lägga till Shop Promise-modulen på din produktsida utan att redigera temakod.
Steg för att lägga till Promise-modulen med ett anpassat Liquid-block:
Dator
Från din Shopify admin, gå till Webbutik > Teman.
Hitta det tema du vill redigera och klicka på Redigera tema.
Navigera till en produktsida med hjälp av mallväljaren i den övre menyraden.
Hitta avsnittet Produktinformation i sidofältsmenyn.
Klicka på Lägg till block och välj anpassad Liquid från listan över tillgängliga block.
Klistra in följande kod i textfältet för anpassad Liquid:
<div class="delivery-promise__promise-container"></div>- Placera blocket genom att dra det till önskad plats, vanligtvis under blocket Köpknappar.
- Klicka på Spara för att tillämpa dina ändringar.
Om du vill ange en temainställning (mörk eller ljus) använder du i stället 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>Mobil
Från Shopify app, tryck på ikonen
.I avsnittet Försäljningskanaler, tryck på Webbshop > Hantera alla teman.
Hitta ditt aktiva tema och tryck på Redigera tema.
Navigera till en produktsida med hjälp av mallväljaren högst upp.
Tryck på avsnittet Produktinformation.
Tryck på Lägg till block och välj Anpassad Liquid.
Klistra in följande kod i textfältet för anpassad Liquid:
<div class="delivery-promise__promise-container"></div>- Placera blocket genom att dra det till önskad plats, vanligtvis under blocket Köpknappar.
- Tryck på Spara för att tillämpa dina ändringar.
Om du vill ange en temainställning (mörk eller ljus) använder du i stället 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>Språk som stöds för Shop Promise-brickan
Se följande tabell för språk som Shop Promise-brickan kan visas på. Om din butiks språk inte stöds visas Shop Promise-brickan på engelska.
| Kinesiska (förenklad) | Kinesiska (traditionell) | Kroatiska | Tjeckiska |
| Danska | Nederländska | Engelska | Finska |
| Franska | Tyska | Grekiska | Hindi |
| Ungerska | Indonesiska | Italienska | Japanska |
| Koreanska | Litauiska | Malajiska | Norska (bokmål) |
| Polska | Portugisiska (Brasilien) | Portugisiska (Portugal) | Rumänska |
| Ryska | Slovakiska | Slovenska | Spanska |
| Svenska | Thailändska | Turkiska | Vietnamesiska |