Alternatieve producten promoten wanneer een product is uitverkocht

Introductie

Voordat we beginnen, laten we eerst eens kijken waarom het belangrijk is om een vervangend product te tonen. Het is niet alleen goed voor de gebruikerservaring van je klanten, maar het kan ook helpen om je omzet te verhogen. Stel je voor dat een klant op zoek is naar een bepaald product, maar het is uitverkocht. Als je geen vervangend product toont, zal de klant waarschijnlijk je webshop verlaten en op zoek gaan naar een andere shop die het product wel op voorraad heeft. Maar als je een vervangend product toont, geef je de klant een andere optie en vergroot je de kans dat de klant iets koopt.

Mijn Shopify dashboard staat ingesteld in het Engels, dus mocht jij zelf gebruik maken van een Nederlands dashboard, zorg er dan even voor dat je de volgende instructies vertaald.

Dit artikel gaat er vanuit dat je het Shopify Dawn thema gebruikt. Wil je dit ook toepassen op een ander thema? Neem dan contact met mij op.

Laten we nu gaan kijken hoe je een vervangend product kunt tonen op de productpagina van je Shopify-webwinkel.

Stap 1: Voeg een metafield toe aan je product

We zullen eerst moeten aangeven welke producten een goed alternatief zijn voor een bepaald product. Om dit aan te geven kunnen we een 'metafield' toevoegen aan je producten.

Ga in het Shopify dashboard naar 'Settings' -> 'Custom data' -> 'Products'. Klik vervolgens op de groene knop 'Add definition'. In het 'Name' veld vul je 'Replacement' in, zodat je makkelijk kunt herkennen waar dit meta-veld over gaat. Als je wilt kun je ook een beschrijving toevoegen, maar dit is niet verplicht. Vervolgens gaan we een type selecteren door te klikken op '+ Select type'. Kies in de lijst die verschijnt op 'Product' en vervolgens 'List of products'. Sla je nieuwe meta-veld op.

Stap 2: Voeg een vervangend product of meerdere producten toe bij het bewerken van een product

Na het toevoegen van het nieuwe meta-veld kunnen we producten toewijzen aan andere producten. Ga hiervoor naar een bepaald product toe in het Shopify dashboard en begin deze te bewerken. Je zult nu onderaan de pagina het aangemaakte meta-veld zien genaamd 'Replacement'

Stap 3: Een 'Custom liquid' blok toevoegen op de productpagina

Ga naar een productpagina in Shopify en klik op 'Customize', de Customizer van Shopify zal zich openen. Aan de linkerkant, onder 'Product information' kun je klikken op 'Add block'. Klik vervolgens op 'Custom Liquid' om een nieuw blok toe te voegen, deze wordt onderaan de rest van de blokken geplaatst. Dit blok zal nu nog niets toevoegen aan je product template, dus we gaan het opvullen met wat code.

Stap 4: Voeg Liquid code toe aan het blok

De volgende code laat een vervangend product zien als het oorspronkelijke product niet beschikbaar is:

{% assign replacement_products = product.metafields.custom.replacement.value %}
{% assign available_products = replacement_products | where: 'available', true %}
 
{% if available_products.size > 0 %}
{% if available_products.size < 2 %}
This product is a great alternative:
{% else %}
These products are great alternatives:
{% endif %}
 
<ul class="list-unstyled" role="list">
{%- for product in available_products -%}
    <li>
        {% render 'card-product',
        card_product: product,
        media_aspect_ratio: square,
        show_secondary_image: false,
        lazy_load: true,
        show_quick_add: true,
        section_id: section.id,
        horizontal_class: true,
        horizontal_quick_add: true
        %}
    </li>
{%- endfor -%}
</ul>
 
{% endif %}

Eerst wordt de lijst met vervangende producten opgeslagen in de variabele "replacement_products" met behulp van het zojuist aangemaakte meta-veld. Vervolgens worden de beschikbare vervangende producten opgeslagen in de variabele "available_products" met behulp van de "where" filter. Dit zorgt er voor dat alleen vervangende producten worden getoond die daadwerkelijk op voorraad zijn.

Als er maar één beschikbaar product is, wordt er een zin weergegeven met de tekst "Dit product is een geweldig alternatief:". Als er meerdere beschikbare producten zijn, wordt er een zin weergegeven met de tekst "Deze producten zijn geweldige alternatieven:".

Vervolgens wordt er een ongeordende lijst gemaakt met de beschikbare vervangende producten door middel van een 'for loop'. Voor elk vervangend product wordt een 'card-product' sectie weergegeven met behulp van de 'render' tag. Hierbij worden verschillende parameters meegegeven zoals de afbeelding ratio, of de 'Toevoegen aan winkelwagen' knop zichtbaar moet zijn en of de sectie horizontaal moet worden weergegeven.

Als er geen beschikbare vervangende producten zijn, wordt er niets weergegeven.

Conclusie

En dat is het! Je hebt nu met succes een Custom-liquid blok toegevoegd aan je productpagina waarmee een vervangend product kan worden getoond zodra een bepaald product uitverkocht is. Dit is niet alleen handig voor je klanten, maar het kan ook bijdragen aan de verkoop van de producten op je webshop die wél op voorraad zijn.

Heb je vragen of suggesties? Aarzel dan niet om mij een mail te sturen!