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

Opdater produktsiden

Trin:

Desktop
  1. Gå til Webshop > Temaer i din Shopify-administrator.

  2. Find det tema, du vil redigere, klik på ikonet Vandret menu for at åbne handlingsmenuen, og 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. I Shopify-appen skal du trykke på Mere-menuen .
  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. I Shopify-appen skal du trykke på Mere-menuen .
  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å .

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.

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>

Tilføj brugerdefineret HTML eller Liquid til Promise-modulet

Hvis dit tema understøtter brugerdefinerede blokke, kan du bruge en brugerdefineret Liquid-blok til at føje Shop Promise-modulet til din produktside uden at redigere temakoden.

Trin til at tilføje Promise-modulet ved hjælp af en brugerdefineret Liquid-blok:

Desktop
  1. Gå til Webshop > Temaer i din Shopify-administrator.
  2. Find det tema, du vil redigere, og klik på Tilpas.
  3. Gå til en produktside ved hjælp af skabelonvælgeren i menulinjen øverst.
  4. Find afsnittet Produktoplysninger i menuen i sidebjælken.
  5. Klik på Tilføj blok , og vælg tilpassett Liquid fra listen over tilgængelige blokke.
  6. Indsæt følgende kode i det brugerdefinerede Liquid-tekstfelt:
<div class="delivery-promise__promise-container"></div>
  1. Placer blokken ved at trække den til den ønskede placering, typisk under Køb-knappens blok.
  2. Klik på Gem for at anvende dine ændringer.

Hvis du vil angive en temapræference (mørk eller lys), skal du bruge et af 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 skal du trykke på Mere-menuen , og tryk derefter på Webshop.
  2. Tryk på Administrer temaer.
  3. Find dit aktive tema og tryk på Tilpas.
  4. Gå til en produktside ved hjælp af skabelonvælgeren øverst.
  5. Tryk på afsnittet Produktoplysninger.
  6. Tryk på Tilføj blok, og vælg Tilpasset Liquid.
  7. Indsæt følgende kode i det brugerdefinerede Liquid-tekstfelt:
<div class="delivery-promise__promise-container"></div>
  1. Placer blokken ved at trække den til den ønskede placering, typisk under Køb-knappens blok.
  2. Tryk på Gem for at anvende dine ændringer.

Hvis du vil angive en temapræference (mørk eller lys), skal du bruge et af 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 skal du trykke på Mere-menuen , og tryk derefter på Webshop.
  2. Tryk på Administrer temaer.
  3. Find dit aktive tema og tryk på Tilpas.
  4. Gå til en produktside ved hjælp af skabelonvælgeren øverst.
  5. Tryk på afsnittet Produktoplysninger.
  6. Tryk på Tilføj blok, og vælg Tilpasset Liquid.
  7. Indsæt følgende kode i det brugerdefinerede Liquid-tekstfelt:
<div class="delivery-promise__promise-container"></div>
  1. Placer blokken ved at trække den til den ønskede placering, typisk under Køb-knappens blok.
  2. Tryk på Gem for at anvende dine ændringer.

Hvis du vil angive en temapræference (mørk eller lys), skal du bruge et af 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>
Kan du ikke finde de svar, du leder efter? Vi er her for at hjælpe.