Vise Shop Promise på produktsiden

Shop Promise-merket vises ved siden av leveringsdatoer og på produktsider for kvalifiserte leveranser som estimeres levert innenlands i USA på fem kalenderdager eller mindre. Dette merket viser kunden at bestillingen inkluderer rask og pålitelig leveranse.

Når søknaden din til Shop Promise godkjennes, kan du gå til produktsiden i temaredigeringsprogrammet for å kontrollere at Shop Promise-merket vises riktig.

Hvis merket ikke vises riktig må du plassere Shop Promise-modulen manuelt.

Manuell plassering av Shop Promise-modulen

Hvis du er komfortabel med å lese og redigere temakode kan du identifisere hvor du må gjøre endringer og oppdatere produktsiden.

Finn ut hvor du må gjøre endringer

Koden for Shop Promise-modulen må inkluderes i produktskjemaet på produktsiden, som skal ligne på {%- form 'product', product -%}. Shop Promise-modulen ligger på ulike steder avhengig av tema. Følgende er vanlige steder:

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

Tips

Hvis du ikke er komfortabel med å lese og redigere temakode, og du bruker et tema fra Shopify, kan du få temaet oppdatert ved å kontakte Shopifys brukerstøtte. Finn ut mer om Shopifys designretningslinjer. Hvis du bruker et tredjepartstema, kan du kontakte temautvikleren eller leie inn en Shopify-partner.

Oppdater produktsiden

Tips

Før du gjør noen endringer, bør du duplisere temaet og gjøre endringer i duplikatet slik at du enkelt kan tilbakestille endringer som er gjort.

Trinn:

Datamaskin

1. Fra Shopify-administrator går du til Nettbutikk > Temaer.
2. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen, og klikk deretter på Rediger kode.
3. Åpne den relevante filen.
4. Finn linjen som inneholder {%- if block.settings.show_dynamic_checkout -%} eller {{ form | payment_button }}.
5. Opprett en ny linje rett under {%- if block.settings.show_dynamic_checkout -%}{{ form | payment_button }}{%- endif -%} og lim inn følgende på denne linjen:

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

1. Klikk på Lagre.

Resultatet bør se omtrent slik ut:

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

iPhone

1. Trykk på …-knappen fra Shopify-appen.
2. I Salgskanaler-seksjonen trykker du på Nettbutikk.
3. Trykk på Administrer temaer.
4. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen, og klikk deretter på Rediger kode.
5. Åpne den relevante filen.
6. Finn linjen som inneholder {%- if block.settings.show_dynamic_checkout -%} eller {{ form | payment_button }}.
7. Opprett en ny linje rett under {%- if block.settings.show_dynamic_checkout -%}{{ form | payment_button }}{%- endif -%} og lim inn følgende på denne linjen:

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

1. Trykk på Lagre.

Resultatet bør se omtrent slik ut:

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

Android

1. Trykk på …-knappen fra Shopify-appen.
2. I Salgskanaler-seksjonen trykker du på Nettbutikk.
3. Trykk på Administrer temaer.
4. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen, og klikk deretter på Rediger kode.
5. Åpne den relevante filen.
6. Finn linjen som inneholder {%- if block.settings.show_dynamic_checkout -%} eller {{ form | payment_button }}.
7. Opprett en ny linje rett under {%- if block.settings.show_dynamic_checkout -%}{{ form | payment_button }}{%- endif -%} og lim inn følgende på denne linjen:

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

1. Trykk på Lagre.

Resultatet bør se omtrent slik ut:

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

Overstyre modultemaet for Shop Promise manuelt

Shop Promise-modulen har et mørkt og lyst tema. Modulen bruker automatisk det temaet som har det høyeste kontrastforholdet i forhold til produktsidens bakgrunnsfarge.

Hvis du er komfortabel med å lese og redigere temakoder, kan du overstyre det valgte temaet i modulen ved å legge til et dataattributt i ankerelementet som brukes til å plassere Shop Promise-modulen manuelt.

Før du gjør endringer må du duplisere temaet og redigere det dupliserte temaet slik at du enkelt kan gjenopprette eventuelle endringer.

Tips

Hvis du ikke er komfortabel med å lese og redigere temakode, og du bruker et tema fra Shopify, kan du få temaet oppdatert ved å kontakte Shopifys brukerstøtte. Finn ut mer om Shopifys designretningslinjer. Hvis du bruker et tredjepartstema, kan du kontakte temautvikleren eller leie inn en Shopify-partner.

Trinn:

Datamaskin

1. Følg instruksjonene for å plassere Shop Promise-moduler manuelt på produktsiden og la temaredigeringsprogrammet være åpent.
2. Legg til et temadataattributt i det nyopprettede ankerelementet angitt som mørkt eller lyst.
3. Klikk på Lagre.

Resultatet skal ligne på én av følgende:

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

Eller

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

iPhone

1. Følg instruksjonene for å plassere Shop Promise-moduler manuelt på produktsiden og la temaredigeringsprogrammet være åpent.
2. Legg til et temadataattributt i det nyopprettede ankerelementet angitt som mørkt eller lyst.
3. Trykk på Lagre.

Resultatet skal ligne på én av følgende:

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

Eller

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

Android

1. Følg instruksjonene for å plassere Shop Promise-moduler manuelt på produktsiden og la temaredigeringsprogrammet være åpent.
2. Legg til et temadataattributt i det nyopprettede ankerelementet angitt som mørkt eller lyst.
3. Trykk på Lagre.

Resultatet skal ligne på én av følgende:

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

Eller

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