Help
Inloggen

Shop Promise weergeven op je productpagina

De Shop Promise-badge wordt weergegeven naast leverdatums en op productpagina's voor in aanmerking komende bestellingen die naar schatting binnen vijf kalenderdagen of minder binnenlands in de Verenigde Staten worden bezorgd. Deze badge laat klanten weten dat hun bestelling een snelle en betrouwbare bezorging omvat.

Nadat je Shop Promise hebt geactiveerd, navigeer je via je themabewerker naar de productpagina om te controleren of de Shop Promise-badge correct wordt weergegeven.

Als de badge niet correct wordt weergegeven, zorg er dan voor dat in je winkel versnelde checkoutknoppen zijn geactiveerd. Je hebt ook verschillende opties om de weergave van de Shop Promise-badge aan te passen.

Op deze pagina

De Shop Promise-module handmatig positioneren

Als je vertrouwd bent met het lezen en bewerken van themacode, kun je bepalen waar je wijzigingen moet aanbrengen en de productpagina updaten.

Bepalen waar je wijzigingen moet aanbrengen

De code voor de Shop Promise-module moet worden opgenomen in het productformulier op de productpagina, die er ongeveer zo uit zou moeten zien: {%- form 'product', product -%}. De Shop Promise-module kan zich afhankelijk van je thema op verschillende locaties bevinden. Hieronder staan veelvoorkomende locaties:

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

De productpagina updaten

Stappen:

Desktop

  1. Ga in het Shopify-beheercentrum naar Onlinewinkel > Thema's.

  2. Zoek het thema dat je wilt bewerken, klik op het pictogram Horizontaal menu om het actiemenu te openen en klik vervolgens op Code bewerken.

  3. Open het betreffende bestand.

  4. Zoek de regel met {%- if block.settings.show_dynamic_checkout -%} of {{ form | payment_button }}.

  5. Maak een nieuwe regel direct onder {%- if block.settings.show_dynamic_checkout -%}{{ form | payment_button }}{%- endif -%} en plak daar het volgende op:

<div class="delivery-promise__promise-container"></div>
  1. Klik op Opslaan.

Het resultaat zou er ongeveer als volgt uit moeten zien:

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

  1. Tik in de Shopify-app op het pictogram Menu.

  2. Tik in het gedeelte Verkoopkanalen op Webshop > Alle thema's beheren.

  3. Zoek het thema dat je wilt bewerken, tik op de knop ... om het actiemenu te openen en tik vervolgens op Code bewerken.

  4. Open het betreffende bestand.

  5. Zoek de regel met {%- if block.settings.show_dynamic_checkout -%} of {{ form | payment_button }}.

  6. Maak een nieuwe regel direct onder {%- if block.settings.show_dynamic_checkout -%}{{ form | payment_button }}{%- endif -%} en plak daar het volgende op:

<div class="delivery-promise__promise-container"></div>
  1. Tik op Opslaan of ✓.

Het resultaat zou er ongeveer als volgt uit moeten zien:

{%- 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 in vergelijking met 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 data-attribuut toe te voegen aan het ankerelement dat wordt gebruikt om de Shop Promise-module handmatig te positioneren.

Voordat je wijzigingen aanbrengt, moet je een duplicaat van je thema maken en het dubbele thema bewerken, zodat je eventuele wijzigingen eenvoudig kunt terugdraaien.

Stappen:

Desktop
  1. Volg de instructies om de Shop Promise-module handmatig te positioneren op je productpagina en houd de themabewerker open.
  2. Voeg een thema-data-attribuut toe aan je zojuist aangemaakte ankerelement, ingesteld op dark of light.
  3. Klik op Opslaan.

Het resultaat zou er ongeveer uit moeten zien als een van de volgende:

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

Of

<div class="delivery-promise__promise-container" data-theme="light"></div>
Mobiel
  1. Volg de instructies om de Shop Promise-module handmatig te positioneren op je productpagina en houd de themabewerker open.
  2. Voeg een thema-data-attribuut toe aan je zojuist aangemaakte ankerelement, ingesteld op dark of light.
  3. Tik op Opslaan.

Het resultaat zou er ongeveer uit moeten zien als een van de volgende:

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

Of

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

Aangepaste HTML of Liquid toevoegen voor de Promise-module

Als je thema aangepaste blokken ondersteunt, kun je een Aangepast Liquid-blok gebruiken om de Shop Promise-module aan je productpagina toe te voegen zonder themacode te bewerken.

Stappen om de Promise-module toe te voegen met een aangepast Liquid-blok:

Desktop

  1. Ga in het Shopify-beheercentrum naar Onlinewinkel > Thema's.

  2. Zoek het thema dat je wilt bewerken en klik op Thema bewerken.

  3. Navigeer naar een productpagina met de templateselector in de bovenste menubalk.

  4. Zoek in het zijbalkmenu de sectie Productinformatie.

  5. Klik op Blok toevoegen en selecteer aangepaste Liquid in de lijst met beschikbare blokken.

  6. Plak de volgende code in het tekstveld voor aangepaste Liquid:

<div class="delivery-promise__promise-container"></div>
  1. Positioneer het blok door het naar de gewenste locatie te slepen, meestal onder het blok Koopknoppen.
  2. Klik op Opslaan om je wijzigingen toe te passen.

Gebruik in plaats daarvan een van de volgende opties als je een themavoorkeur (donker of licht) wilt opgeven:

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

Of

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

  1. Tik in de Shopify-app op het pictogram Menu.

  2. Tik in het gedeelte Verkoopkanalen op Webshop > Alle thema's beheren.

  3. Zoek je actieve thema en tik op Thema bewerken.

  4. Navigeer naar een productpagina met de templateselector bovenaan.

  5. Tik op de sectie Productinformatie.

  6. Tik op Blok toevoegen en selecteer Aangepaste Liquid.

  7. Plak de volgende code in het tekstveld voor aangepaste Liquid:

<div class="delivery-promise__promise-container"></div>
  1. Positioneer het blok door het naar de gewenste locatie te slepen, meestal onder het blok Koopknoppen.
  2. Tik op Opslaan om je wijzigingen toe te passen.

Gebruik in plaats daarvan een van de volgende opties als je een themavoorkeur (donker of licht) wilt opgeven:

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

Of

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

Ondersteunde talen voor de Shop Promise-badge

Raadpleeg de volgende tabel voor de talen waarin de Shop Promise-badge kan worden weergegeven. Als de taal van je winkel niet wordt ondersteund, wordt de Shop Promise-badge in het Engels weergegeven.

Talen waarin de Shop Promise-badge kan worden weergegeven.
Chinees (vereenvoudigd)Chinees (traditioneel)KroatischTsjechisch
DeensNederlandsEngelsFins
FransDuitsGrieksHindi
HongaarsIndonesischItaliaansJapans
KoreaansLitouwsMaleisNoors (Bokmål)
PoolsPortugees (Brazilië)Portugees (Portugal)Roemeens
RussischSlowaaksSloveensSpaans
ZweedsThaiTurksVietnamees