De collectie beschrijving opsplitsen in twee delen

Als webshop wil je graag zoveel mogelijk informatie met je klanten delen over je producten en collecties. Meer tekst is niet alleen gunstiger voor bezoekers, maar ook voor je SEO. Helaas moeten bezoekers door lange collectie beschrijvingen scrollen om uiteindelijk bij je producten uit te komen. Een handige manier om dit op te lossen is door de collectiebeschrijving op te splitsen in twee delen. Dit kun je doen door een Custom Liquid section toe te voegen en de themecode aan te passen. In dit artikel leg ik je uit hoe je dit doet.

Liever een video bekijken? 👇

Stap 1: Voeg een seperator toe

De eerste stap is het toevoegen van een zogeheten 'seperator'. Dit zijn een paar karakters die de onderscheid aangeven tussen het bovenste gedeelte en het onderste gedeelte van je beschrijving. Bewerk de collectie beschrijving zoals je dit normaal ook doet, en voeg op de plek waar je de tekst wil scheiden drie streepjes toe: ---. Vervolgens sla je de beschrijving op.

Stap 2: Voeg een Custom Liquid section toe

Het toevoegen van een Custom Liquid sectie is de tweede stap voor het splitsen van de collectiebeschrijving. Dit kun je doen door de volgende stappen te volgen:

1. Ga naar de thema-customizer vanuit je Shopify dashboard.

2. Ga naar de 'Default collection' pagina

3. Klik op 'Add a new section' en kies voor 'Custom Liquid'.

4. Voeg in het tekstveld de volgende code toe

{% if collection.description contains '---' %}
     <section class="page-width rte">
        {{ collection.description | split: '---' | last }}
    </section>
{% endif %}

Klik vervolgens op 'Save' op de code op te slaan.

Stap 3: Bewerk de themecode

Nu je de Custom Liquid section hebt toegevoegd aan je Shopify store, moet je de themecode aanpassen om de functie van de originele (bovenste) collectie beschrijving te wijzigen. Dit kun je doen door de volgende stappen te volgen:

1. Ga naar de code-editor in je Shopify dashboard.

2. Zoek de code voor de collectiepagina, dit zit in het bestand 'main-collection-banner.liquid'.

3. Zoek de code voor de collectiebeschrijving en kopieer deze naar een nieuw bestand, dit is de code: {{ collection.description }}.

4. Voeg de volgende code toe aan deze regel {{ collection.description | split: '---' | first }}

5. Sla de zojuist gewijzigde code op.

Het resultaat

Als je deze stappen hebt gevolgd, dan zou je nu de collectiebeschrijving moeten zien opgedeeld in twee delen op je webshop. De eerste helft van de collectiebeschrijving wordt getoond op de normale plek en de tweede helft wordt getoond in de Custom Liquid section die je hebt toegevoegd onderaan de pagina.