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å ikonet 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. I Shopify-appen trykker du på .
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. I Shopify-appen trykker du på .
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å ✓.

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>

Legg til tilpasset HTML eller Liquid for Promise Modules

Hvis temaet ditt støtter tilpassede blokker, kan du bruke en tilpasset Liquid-blokk for å legge til Shop Promise-modulen på produktsiden din uten å redigere temakoden.

Fremgangsmåte for å legge til Promise-modulen ved hjelp av en tilpasset Liquid-blokk:

Datamaskin

1. Fra Shopify-administrator går du til Nettbutikk > Temaer.
2. Finn temaet du vil redigere, og klikk på Tilpass.
3. Naviger til en produktside ved hjelp av malvelgeren i menylinjen øverst.
4. Finn seksjonen Produktinformasjon i sidemenyen.
5. Klikk på Legg til blokk og velg tilpasset Liquid fra listen over tilgjengelige blokker.
6. Lim inn følgende kode i det tilpassede Liquid-tekstfeltet:

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

1. Plasser blokken ved å dra den til ønsket lokaliseringssted, vanligvis under Kjøp-knappblokken.
2. Klikk på Lagre for å ta endringene i bruk.

Hvis du vil spesifisere et temapreferanse (mørk eller lys), bruk ett av følgende i stedet:

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

Eller

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

iPhone

1. I Shopify-appen trykker du på , og deretter trykk Nettbutikk.
2. Trykk på Administrer temaer.
3. Finn ditt aktive tema og trykk Tilpass.
4. Naviger til en produktside ved hjelp av mal-velgeren øverst.
5. Trykk på seksjonen Produktinformasjon.
6. Trykk Legg til blokk og velg Tilpasset Liquid.
7. Lim inn følgende kode i det tilpassede Liquid-tekstfeltet:

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

1. Plasser blokken ved å dra den til ønsket lokaliseringssted, vanligvis under Kjøp-knappblokken.
2. Trykk på Lagre for å lagre endringene.

Hvis du vil spesifisere et temapreferanse (mørk eller lys), bruk ett av følgende i stedet:

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

Eller

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

Android

1. I Shopify-appen trykker du på , og deretter trykk Nettbutikk.
2. Trykk på Administrer temaer.
3. Finn ditt aktive tema og trykk Tilpass.
4. Naviger til en produktside ved hjelp av mal-velgeren øverst.
5. Trykk på seksjonen Produktinformasjon.
6. Trykk Legg til blokk og velg Tilpasset Liquid.
7. Lim inn følgende kode i det tilpassede Liquid-tekstfeltet:

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

1. Plasser blokken ved å dra den til ønsket lokaliseringssted, vanligvis under Kjøp-knappblokken.
2. Trykk på Lagre for å lagre endringene.

Hvis du vil spesifisere et temapreferanse (mørk eller lys), bruk ett av følgende i stedet:

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

Eller

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

Tips

Ikke alle temaer støtter tilpassede Liquid-blokker. Hvis temaet ditt ikke har dette alternativet, følger du instruksjonene for å manuelt plassere Shop Promise-moduler ved å redigere temakoden din.