Shop Promise weergeven op de productpagina

De Shop Promise-badge wordt weergegeven naast leverdatums en op productpagina's voor in aanmerking komende binnenlandse bezorgingen in de Verenigde Staten die naar schatting binnen maximaal vijf kalenderdagen worden bezorgd. Dankzij deze badge weten klanten weten dat hun bestelling snelle en betrouwbare bezorging inhoudt.

Nadat je aanvraag voor Shop Promise is goedgekeurd, navigeer je met de themabewerker naar de productpagina om na te gaan of de Shop Promise-badge op de juiste manier wordt weergegeven.

Als de badge niet op de juiste manier wordt weergegeven, positioneer je de Shop Promise-module handmatig.

De Shop Promise-module handmatig positioneren

Als je zelf graag themacode bekijkt en bewerkt, kun je de juiste plek voor wijzigingen zoeken en de productpagina zelf bewerken.

Bepaal waar je wijzigingen kunt aanbrengen

Gebruik de code voor de Shop Promise-module in het formulier op de productpagina. Deze code ziet er ongeveer zo uit: {%- form 'product', product -%}. Je vindt de Shop Promise-module op verschillende plaatsen, afhankelijk van het thema. De volgende plaatsen zijn gangbaar:

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

Tip

Als je niet vertrouwd bent met het lezen en bewerken van themacodes en je een thema van Shopify gebruikt, kun je het thema laten bijwerken door contact op te nemen met Shopify Support. Hier vind je meer informatie over het Ontwerpbeleid van Shopify. Als je een thema van derden gebruikt, kun je contact opnemen met de ontwikkelaar van het thema of een Shopify-partner inhuren.

De productpagina bijwerken

Tip

Voordat je wijzigingen aanbrengt, kopieer je je thema en breng je wijzigingen in de kopie aan, zodat je eenvoudiger alle wijzigingen die je hebt aangebracht, kunt terugdraaien.

Stappen:

Desktop

1. Ga in het Shopify-beheercentrum naar webshop > Thema's.
2. Zoek het thema dat je wilt bewerken, klik op de knop … om het actiemenu te openen en klik vervolgens op Code bewerken.
3. Open het relevante bestand.
4. Zoek de regel met {%- if block.settings.show_dynamic_checkout -%} of {{ form | payment_button }}.
5. Maak direct onder {%- if block.settings.show_dynamic_checkout -%}{{ form | payment_button }}{%- endif -%} een nieuwe regel aan en plak het volgende op die regel:

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

1. Klik op Opslaan.

Het eindresultaat ziet er ongeveer zo uit:

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

iPhone

1. Tik in de Shopify-app op de knop ….
2. Tik in de sectie Verkoopkanalen op webshop.
3. Tik op Thema's beheren.
4. Zoek het thema dat je wil bewerken, tik op de knop … om het actiemenu te openen en tik vervolgens op Code bewerken.
5. Open het relevante bestand.
6. Zoek de regel met {%- if block.settings.show_dynamic_checkout -%} of {{ form | payment_button }}.
7. Maak direct onder {%- if block.settings.show_dynamic_checkout -%}{{ form | payment_button }}{%- endif -%} een nieuwe regel aan en plak het volgende op die regel:

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

1. Tik op Opslaan.

Het eindresultaat ziet er ongeveer zo uit:

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

Android

1. Tik in de Shopify-app op de knop ….
2. Tik in de sectie Verkoopkanalen op webshop.
3. Tik op Thema's beheren.
4. Zoek het thema dat je wil bewerken, tik op de knop … om het actiemenu te openen en tik vervolgens op Code bewerken.
5. Open het relevante bestand.
6. Zoek de regel met {%- if block.settings.show_dynamic_checkout -%} of {{ form | payment_button }}.
7. Maak direct onder {%- if block.settings.show_dynamic_checkout -%}{{ form | payment_button }}{%- endif -%} een nieuwe regel aan en plak het volgende op die regel:

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

1. Tik op Opslaan.

Het eindresultaat ziet er ongeveer zo uit:

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

Het thema van de Shop Promise-module handmatig overschrijven

De Shop Promise-module heeft een donker en een licht thema. De module gebruikt automatisch het thema met de hoogste contrastverhouding ten opzichte van de achtergrondkleur van de productpagina.

Als je vertrouwd bent met het lezen en bewerken van themacode, kun je het geselecteerde thema van de module overschrijven door een gegevenskenmerk aan het ankerelement toe te voegen dat wordt gebruikt om de Shop Promise-module handmatig te plaatsen.

Maak een duplicaat van het thema en bewerk het duplicaat voordat je wijzigingen aanbrengt, zodat je wijzigingen gemakkelijk kunt terugdraaien.

Tip

Als je niet vertrouwd bent met het lezen en bewerken van themacodes en je een thema van Shopify gebruikt, kun je het thema laten bijwerken door contact op te nemen met Shopify Support. Hier vind je meer informatie over het Ontwerpbeleid van Shopify. Als je een thema van derden gebruikt, kun je contact opnemen met de ontwikkelaar van het thema of een Shopify-partner inhuren.

Stappen:

Desktop

1. Volg de instructies om de Shop Promise-module handmatig op de productpagina te plaatsen en hou de themabewerker open.
2. Voeg een thema-gegevenskenmerk aan het zojuist aangemaakte ankerelement toe, en stel dit in op donker of licht.
3. Klik op Opslaan.

Het eindresultaat ziet er ongeveer zo uit:

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

Of

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

iPhone

1. Volg de instructies om de Shop Promise-module handmatig op de productpagina te plaatsen en hou de themabewerker open.
2. Voeg een thema-gegevenskenmerk aan het zojuist aangemaakte ankerelement toe, en stel dit in op donker of licht.
3. Tik op Opslaan.

Het eindresultaat ziet er ongeveer zo uit:

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

Of

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

Android

1. Volg de instructies om de Shop Promise-module handmatig op de productpagina te plaatsen en hou de themabewerker open.
2. Voeg een thema-gegevenskenmerk aan het zojuist aangemaakte ankerelement toe, en stel dit in op donker of licht.
3. Tik op Opslaan.

Het eindresultaat ziet er ongeveer zo uit:

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

Of

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