Shop Promise weergeven op de productpagina

Deze pagina is afgedrukt op Dec 08, 2023. Ga voor de huidige versie naar https://help.shopify.com/nl/manual/shipping/shop-promise/product-page.

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.

Navigeer nadat je Shop Promise hebt geactiveerd 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.

Op deze pagina

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 dan 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

De productpagina bijwerken

Stappen:

  1. Ga in het Shopify-beheercentrum naar Onlinewinkel > 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 moet er als volgt uitzien:

{%- if block.settings.show_dynamic_checkout -%}
  {{ form | payment_button }}
{%- endif -%}
<div class="delivery-promise__promise-container"></div>
  1. Tik in de Shopify-app op de knop ….
  2. Tik in het gedeelte Verkoopkanalen op Onlinewinkel.
  3. Tik op Thema's beheren.
  4. Zoek het thema dat je wilt bewerken, klik op de knop … om het actiemenu te openen en klik 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. Klik op Opslaan.

Het eindresultaat moet er als volgt uitzien:

{%- if block.settings.show_dynamic_checkout -%}
  {{ form | payment_button }}
{%- endif -%}
<div class="delivery-promise__promise-container"></div>
  1. Tik in de Shopify-app op de knop ….
  2. Tik in het gedeelte Verkoopkanalen op Onlinewinkel.
  3. Tik op Thema's beheren.
  4. Zoek het thema dat je wilt bewerken, klik op de knop … om het actiemenu te openen en klik 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. Klik op Opslaan.

Het eindresultaat moet er als volgt uitzien:

{%- 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.

Stappen:

  1. Volg de instructies om de Shop Promise-module handmatig op de productpagina te plaatsen en houd 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 resultaat moet er als volgt uitzien:

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

Of

<div class="delivery-promise__promise-container" data-theme="light"></div>
  1. Volg de instructies om de Shop Promise-module handmatig op de productpagina te plaatsen en houd 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 resultaat moet er als volgt uitzien:

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

Of

<div class="delivery-promise__promise-container" data-theme="light"></div>
  1. Volg de instructies om de Shop Promise-module handmatig op de productpagina te plaatsen en houd 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 resultaat moet er als volgt uitzien:

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

Of

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

Klaar om te beginnen met verkopen met Shopify?

Probeer het gratis