Vis Shop Promise på din produktside

Shop Promise-badget vises ud for leveringsdatoen og på produktsiden for kvalificerede leveringer, der anslås at kunne leveres nationalt i USA inden for fem kalenderdage eller mindre. Dette badge fortæller kunderne, at deres ordrer omfatter hurtig og pålidelig levering.

Når din ansøgning til Shop Promise er levet godkendt, bør du gå til produktsiden ved hjælp af din temaeditor for at bekræfte, at Shop Promise-badget vises korrekt.

Hvis badget ikke vises korrekt, skal du placere Shop Promise-modulet manuelt.

Placer Shop Promise-modulet manuelt

Hvis du er tryg ved at læse og redigere temakode, kan du selv identificere de steder, hvor du vil foretage ændringer og opdatere produktsiden.

Identificerer de steder, hvor du vil foretage ændringer

Koden for Shop Promise-modulet skal inkluderes i produktformularen på produktsiden. Det vil se nogenlunde således ud: {%- form 'product', product -%}. Shop Promise-modulet findes forskellige steder, som afhænger af dit tema. Det findes normalt på følgende steder:

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

Tip

Hvis du ikke er tryg ved at læse og redigere temakode, og du bruger et tema fra Shopify, kan du få opdateret dit tema ved at kontakte Shopify Support. Få mere at vide om Shopifys designpolitik. Hvis du bruger et tema fra tredjepart, kan du kontakte temaudvikleren eller ansætte en Shopify-partner.

Opdater produktsiden

Tip

Før du foretager ændringer, bør du duplikere dit tema og foretage ændringerne i det duplikerede tema, så du nemmere kan annullere ændringerne.

Trin:

Desktop

1. Gå til Webshop > Temaer i din Shopify-administrator.
2. Find det tema, du vil redigere, og klik på knappen … for at åbne handlingsmenuen. Klik derefter på Rediger kode.
3. Åbn den relevante fil.
4. Find linjen, der indeholder {%- if block.settings.show_dynamic_checkout -%} eller {{ form | payment_button }}.
5. Opret en ny linje direkte under {%- if block.settings.show_dynamic_checkout -%}{{ form | payment_button }}{%- endif -%}, og indsæt følgende på denne linje:

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

1. Klik på Gem.

Resultatet bør se nogenlunde således ud:

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

iPhone

1. Tryk på knappen … i Shopify-appen.
2. Tryk på Webshop i afsnittet Salgskanaler.
3. Tryk på Administrer temaer.
4. Find det tema, du vil redigere, og tryk på knappen … for at åbne handlingsmenuen. Tryk derefter på Rediger kode.
5. Åbn den relevante fil.
6. Find linjen, der indeholder {%- if block.settings.show_dynamic_checkout -%} eller {{ form | payment_button }}.
7. Opret en ny linje direkte under {%- if block.settings.show_dynamic_checkout -%}{{ form | payment_button }}{%- endif -%}, og indsæt følgende på denne linje:

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

1. Tryk på Gem.

Resultatet bør se nogenlunde således ud:

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

Android

1. Tryk på knappen … i Shopify-appen.
2. Tryk på Webshop i afsnittet Salgskanaler.
3. Tryk på Administrer temaer.
4. Find det tema, du vil redigere, og tryk på knappen … for at åbne handlingsmenuen. Tryk derefter på Rediger kode.
5. Åbn den relevante fil.
6. Find linjen, der indeholder {%- if block.settings.show_dynamic_checkout -%} eller {{ form | payment_button }}.
7. Opret en ny linje direkte under {%- if block.settings.show_dynamic_checkout -%}{{ form | payment_button }}{%- endif -%}, og indsæt følgende på denne linje:

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

1. Tryk på Gem.

Resultatet bør se nogenlunde således ud:

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

Tilsidesæt Shop Promise-modultemaet manuelt

Shop Promise-modulet har et mørkt og lyst tema. Modulet bruger automatisk det tema, der har det højeste kontrastforhold sammenlignet med baggrundsfarven på produktsiden.

Hvis du er tryg ved at læse og redigere temakode, kan du tilsidesætte det valgte tema for modulet ved at føje en dataattribut til det ankerelement, der bruges til manuel placering af Shop Promise-modulet.

Før du foretager ændringer, skal du duplikere dit tema og redigere det duplikerede tema, så du nemt kan fortryde eventuelle ændringer.

Tip

Hvis du ikke er tryg ved at læse og redigere temakode, og du bruger et tema fra Shopify, kan du få opdateret dit tema ved at kontakte Shopify Support. Få mere at vide om Shopifys designpolitik. Hvis du bruger et tema fra tredjepart, kan du kontakte temaudvikleren eller ansætte en Shopify-partner.

Trin:

Desktop

1. Følg vejledningen for manuelt at placere Shop Promise-modulet på din produktside, og hold derefter temaeditoren åben.
2. Føj en temadataattribut, som er indstillet til mørkt eller lyst, til dit nyoprettede ankerelement.
3. Klik på Gem.

Resultatet vil nogenlunde ligne 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 vejledningen for manuelt at placere Shop Promise-modulet på din produktside, og hold derefter temaeditoren åben.
2. Føj en temadataattribut, som er indstillet til mørkt eller lyst, til dit nyoprettede ankerelement.
3. Tryk på Gem.

Resultatet vil nogenlunde ligne 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 vejledningen for manuelt at placere Shop Promise-modulet på din produktside, og hold derefter temaeditoren åben.
2. Føj en temadataattribut, som er indstillet til mørkt eller lyst, til dit nyoprettede ankerelement.
3. Tryk på Gem.

Resultatet vil nogenlunde ligne følgende:

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

Eller

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