Content op je bestelstatuspagina weergeven op basis van criteria

Let op

Dit is een uitgebreide tutorial en wordt niet ondersteund door Shopify. Hiervoor is kennis van een webontwerptaal zoals HTML, CSS, JavaScript en Liquid vereist. We raden je aan een Shopify-partner in te huren als je het niet prettig vindt om verder te gaan met de volgende tutorial.

Opmerking

Aanvullende scripts om de bestelstatuspagina aan te passen, zijn uitgefaseerd.

Merchants met het Basic-, Shopify- en Advanced-abonnement kunnen de bestelstatuspagina aanpassen met de checkout- en accounteditor. Shopify Plus-merchants kunnen Checkout Extensibility gebruiken om hun bestelstatuspagina aan te passen.

Je kunt content op je bestelstatuspagina weergeven op basis van de volgende criteria:

• de locaties van je klanten
• een bestelling voor een bepaald product
• een verzendmethode

Content weergeven op basis van de locaties van klanten

Je kunt een aangepast bericht toevoegen aan de bestelstatuspagina, dat alleen wordt weergegeven aan klanten met bezorgadressen in een bepaalde regio. Je kunt er bijvoorbeeld voor kiezen om een bericht alleen weer te geven aan klanten die in New York wonen, in de Verenigde Staten. Je kunt zoveel locaties opgeven als je wilt.

Stappen:

Desktop

1. Ga in het Shopify-beheercentrum naar Instellingen > Checkout.
2. Plak in het tekstvak Aanvullende scripts de volgende voorbeeldcode:

<script>
{% if checkout.shipping_address.country_code == 'US' and checkout.shipping_address.province_code == 'NY' %}
    Shopify.Checkout.OrderStatus.addContentBox(
    '<h2>YOUR TITLE HERE</h2>',
    '<p>YOUR MESSAGE HERE</p>'
    )
{% endif %}
</script>

1. Bewerk de code om op te geven waar klanten het aangepaste bericht ontvangen. Bewerk hiervoor de land- en staatafkortingen in de Liquid-instructie {% if %} bovenaan het codeblok. Het bericht in het bovenstaande voorbeeld is zo ingesteld dat dit wordt weergegeven voor klanten die in New York wonen, in de Verenigde Staten.

   • Vervang NY door de afkorting van de gewenste staat om het bericht weer te geven aan klanten in een andere staat. Raadpleeg deze lijst met de afkortingen voor de staten van USPS om de afkorting voor een bepaalde staat in de Verenigde Staten te zoeken.
   • Voeg and checkout.shipping_address.province_code == 'XX' toe, waarbij XX de afkorting van de andere staat is als je het bericht zowel voor klanten in New York als voor klanten in een andere staat wilt weergeven. Voer de stap nogmaals uit als je nog meer staten wilt toevoegen.
   • Vervang US door de afkorting van het gewenste land als je het bericht voor klanten in een ander land wilt weergeven. Vervang NY door de afkorting van de staat of provincie in het nieuwe land. Verwijder het volgende als je geen staat wilt opgeven: and checkout.shipping_address.province_code == 'NY'.
   • Raadpleeg de de Liquid-naslaginformatie over Controlestroom-tags voor meer informatie over het schrijven van Liquid if-instructies.

2. Plaats een testbestelling om de resultaten op de bestelstatuspagina te bekijken.

iPhone

1. Tik in de Shopify-app op de knop … en daarna op Instellingen.
2. Tik in het gedeelte Winkelinstellingen op Checkout.
3. Plak in het tekstvak Aanvullende scripts de volgende voorbeeldcode:

<script>
{% if checkout.shipping_address.country_code == 'US' and checkout.shipping_address.province_code == 'NY' %}
    Shopify.Checkout.OrderStatus.addContentBox(
    '<h2>YOUR TITLE HERE</h2>',
    '<p>YOUR MESSAGE HERE</p>'
    )
{% endif %}
</script>

1. Bewerk de code om op te geven waar klanten het aangepaste bericht ontvangen. Bewerk hiervoor de land- en staatafkortingen in de Liquid-instructie {% if %} bovenaan het codeblok. Het bericht in het bovenstaande voorbeeld is zo ingesteld dat dit wordt weergegeven voor klanten die in New York wonen, in de Verenigde Staten.

   • Vervang NY door de afkorting van de gewenste staat om het bericht weer te geven aan klanten in een andere staat. Raadpleeg deze lijst met de afkortingen voor de staten van USPS om de afkorting voor een bepaalde staat in de Verenigde Staten te zoeken.
   • Voeg and checkout.shipping_address.province_code == 'XX' toe, waarbij XX de afkorting van de andere staat is als je het bericht zowel voor klanten in New York als voor klanten in een andere staat wilt weergeven. Voer de stap nogmaals uit als je nog meer staten wilt toevoegen.
   • Vervang US door de afkorting van het gewenste land als je het bericht voor klanten in een ander land wilt weergeven. Vervang NY door de afkorting van de staat of provincie in het nieuwe land. Verwijder het volgende als je geen staat wilt opgeven: and checkout.shipping_address.province_code == 'NY'.
   • Raadpleeg de de Liquid-naslaginformatie over Controlestroom-tags voor meer informatie over het schrijven van Liquid if-instructies.

2. Plaats een testbestelling om de resultaten op de bestelstatuspagina te bekijken.

Android

1. Tik in de Shopify-app op de knop … en daarna op Instellingen.
2. Tik in het gedeelte Winkelinstellingen op Checkout.
3. Plak in het tekstvak Aanvullende scripts de volgende voorbeeldcode:

<script>
{% if checkout.shipping_address.country_code == 'US' and checkout.shipping_address.province_code == 'NY' %}
    Shopify.Checkout.OrderStatus.addContentBox(
    '<h2>YOUR TITLE HERE</h2>',
    '<p>YOUR MESSAGE HERE</p>'
    )
{% endif %}
</script>

1. Bewerk de code om op te geven waar klanten het aangepaste bericht ontvangen. Bewerk hiervoor de land- en staatafkortingen in de Liquid-instructie {% if %} bovenaan het codeblok. Het bericht in het bovenstaande voorbeeld is zo ingesteld dat dit wordt weergegeven voor klanten die in New York wonen, in de Verenigde Staten.

   • Vervang NY door de afkorting van de gewenste staat om het bericht weer te geven aan klanten in een andere staat. Raadpleeg deze lijst met de afkortingen voor de staten van USPS om de afkorting voor een bepaalde staat in de Verenigde Staten te zoeken.
   • Voeg and checkout.shipping_address.province_code == 'XX' toe, waarbij XX de afkorting van de andere staat is als je het bericht zowel voor klanten in New York als voor klanten in een andere staat wilt weergeven. Voer de stap nogmaals uit als je nog meer staten wilt toevoegen.
   • Vervang US door de afkorting van het gewenste land als je het bericht voor klanten in een ander land wilt weergeven. Vervang NY door de afkorting van de staat of provincie in het nieuwe land. Verwijder het volgende als je geen staat wilt opgeven: and checkout.shipping_address.province_code == 'NY'.
   • Raadpleeg de de Liquid-naslaginformatie over Controlestroom-tags voor meer informatie over het schrijven van Liquid if-instructies.

2. Plaats een testbestelling om de resultaten op de bestelstatuspagina te bekijken.

Content weergeven op basis van een bestelling voor een bepaald product

Ontdek hoe je door je checkout.line_items kunt gaan om te zien of je speciale product in de bestelling staat.

Stappen:

Desktop

1. Ga in het Shopify-beheercentrum naar Instellingen > Checkout.
2. Scrol omlaag naar het gedeelte Aanvullende scripts.
3. Kopieer de volgende code naar je klembord (command + c op een Mac, ctrl + c op een pc).

<script>
  {% for line in checkout.line_items %}
    // DEBUG looking at {{ line.title }}
    {% if line.title == 'Downloadable product' %}
      Shopify.Checkout.OrderStatus.addContentBox(
        '<p>Download your product <a href="#">Here!</a></p>'
      )
    {% endif %}
  {% endfor %}
</script>

1. Plak de code in het vak Aanvullende scripts (druk op ctrl + V op een pc of command + V op een Mac).
2. Voer een testbestelling uit om je bestelstatuspagina weer te geven.

iPhone

1. Tik in de Shopify-app op de knop … en daarna op Instellingen.
2. Tik in het gedeelte Winkelinstellingen op Checkout.
3. Scrol omlaag naar het gedeelte Aanvullende scripts.
4. Kopieer de volgende code naar je klembord (command + c op een Mac, ctrl + c op een pc).

<script>
  {% for line in checkout.line_items %}
    // DEBUG looking at {{ line.title }}
    {% if line.title == 'Downloadable product' %}
      Shopify.Checkout.OrderStatus.addContentBox(
        '<p>Download your product <a href="#">Here!</a></p>'
      )
    {% endif %}
  {% endfor %}
</script>

1. Plak de code in het vak Aanvullende scripts (druk op ctrl + V op een pc of command + V op een Mac).
2. Voer een testbestelling uit om je bestelstatuspagina weer te geven.

Android

1. Tik in de Shopify-app op de knop … en daarna op Instellingen.
2. Tik in het gedeelte Winkelinstellingen op Checkout.
3. Scrol omlaag naar het gedeelte Aanvullende scripts.
4. Kopieer de volgende code naar je klembord (command + c op een Mac, ctrl + c op een pc).

<script>
  {% for line in checkout.line_items %}
    // DEBUG looking at {{ line.title }}
    {% if line.title == 'Downloadable product' %}
      Shopify.Checkout.OrderStatus.addContentBox(
        '<p>Download your product <a href="#">Here!</a></p>'
      )
    {% endif %}
  {% endfor %}
</script>

1. Plak de code in het vak Aanvullende scripts (druk op ctrl + V op een pc of command + V op een Mac).
2. Voer een testbestelling uit om je bestelstatuspagina weer te geven.

Content weergeven op basis van verzendmethode

Je kunt een voorwaardelijk script met de variabele checkout.shipping_method.title gebruiken om content weer te geven op de bestelstatuspagina wanneer een bepaalde verzendmethode is gebruikt voor een bestelling.

Je hebt bijvoorbeeld een optie voor afhalen in de winkel dicht genoeg bij je fysieke winkel. Je kunt deze klanten het winkeladres van je winkel op de bestelstatuspagina geven als ze voor afhalen in de winkel kiezen.

Stappen:

Desktop

1. Ga in het Shopify-beheercentrum naar Instellingen > Checkout.
2. Scrol omlaag naar het gedeelte Aanvullende scripts.
3. Kopieer de volgende code naar je klembord (Command + c op een Mac, Ctrl + c op een pc).

  <script>
    // DEBUG {{ checkout.shipping_method.title }} has been used
    {% if checkout.shipping_method.title == 'Pick-up at the store' %}
      Shopify.Checkout.OrderStatus.addContentBox(
        `<p>Okay, we're ready for you to collect your products from 17 Mapple Crescent, Toronto. Our store is open 9:00 to 5:00 every day.</p>`
      )
    {% endif %}
  </script>

1. Plak de code in het vak Aanvullende scripts (Command + v op een Mac, Ctrl + v op een pc).
2. Voer een testbestelling uit om je bestelstatuspagina weer te geven.

iPhone

1. Tik in de Shopify-app op de knop … en daarna op Instellingen.
2. Tik in het gedeelte Winkelinstellingen op Checkout.
3. Scrol omlaag naar het gedeelte Aanvullende scripts.
4. Kopieer de volgende code naar je klembord (Command + c op een Mac, Ctrl + c op een pc).

  <script>
    // DEBUG {{ checkout.shipping_method.title }} has been used
    {% if checkout.shipping_method.title == 'Pick-up at the store' %}
      Shopify.Checkout.OrderStatus.addContentBox(
        `<p>Okay, we're ready for you to collect your products from 17 Mapple Crescent, Toronto. Our store is open 9:00 to 5:00 every day.</p>`
      )
    {% endif %}
  </script>

1. Plak de code in het vak Aanvullende scripts (Command + v op een Mac, Ctrl + v op een pc).
2. Voer een testbestelling uit om je bestelstatuspagina weer te geven.

Android

1. Tik in de Shopify-app op de knop … en daarna op Instellingen.
2. Tik in het gedeelte Winkelinstellingen op Checkout.
3. Scrol omlaag naar het gedeelte Aanvullende scripts.
4. Kopieer de volgende code naar je klembord (Command + c op een Mac, Ctrl + c op een pc).

  <script>
    // DEBUG {{ checkout.shipping_method.title }} has been used
    {% if checkout.shipping_method.title == 'Pick-up at the store' %}
      Shopify.Checkout.OrderStatus.addContentBox(
        `<p>Okay, we're ready for you to collect your products from 17 Mapple Crescent, Toronto. Our store is open 9:00 to 5:00 every day.</p>`
      )
    {% endif %}
  </script>

1. Plak de code in het vak Aanvullende scripts (Command + v op een Mac, Ctrl + v op een pc).
2. Voer een testbestelling uit om je bestelstatuspagina weer te geven.