Flipbook insluiten in je Shopify-webshop

Statische productafbeeldingen vertellen maar een deel van het verhaal. Als je een Shopify-webshop runt en productcatalogi, lookbooks, maattabellen of merkmagazines op een aantrekkelijkere manier wilt presenteren, is het insluiten van een interactieve flipbook een van de effectiefste manieren. Bezoekers kunnen door pagina's bladeren alsof het een echt boek is — rechtstreeks in je webshop, zonder de pagina te verlaten.

Deze handleiding loodst je door het insluiten van een FlipLink-flipbook in Shopify, van het genereren van de insluitcode tot het plaatsen op productpagina's en aangepaste landingspagina's.

Waarom flipbooks op Shopify gebruiken

Shopify biedt krachtige tools voor het verkopen van producten, maar de standaard contentopties schieten tekort als het gaat om visuele content met meerdere pagina's. Hier vullen flipbooks de leemte:

• Productcatalogi — Laat klanten door je volledige catalogus bladeren met bladanimaties in plaats van door statische rasters te scrollen
• Lookbooks — Mode-, meubel- en lifestylemerken kunnen seizoenscollecties presenteren als meeslepende digitale lookbooks
• Maattabellen — Vervang onhandige PDF-downloads door een ingebedde, interactieve maattabel waar klanten doorheen kunnen bladeren op de productpagina
• Merkmagazines — Deel merkverhalen, behind-the-scenes-content of redactionele artikelen direct in je webshop
• Groothandelsprijslijsten — Geef B2B-kopers een elegante manier om prijzen te bekijken zonder een apart portaal

Flipbooks houden bezoekers langer betrokken, verlagen het bouncepercentage en presenteren je producten in een formaat dat premium aanvoelt.

Stap 1: Maak je flipbook aan

Voordat je iets kunt insluiten, heb je een flipbook nodig. Als je er nog geen hebt aangemaakt:

1. Meld je aan op go.fliplink.me
2. Upload je PDF — een productcatalogus, lookbook of een ander document met meerdere pagina's
3. FlipLink zet het automatisch om in een interactieve flipbook met realistische 3D-bladanimaties
4. Pas het uiterlijk aan, voeg CTA-knoppen toe die naar je Shopify-producten linken en configureer de instellingen voor delen en distributie

Zodra je flipbook gepubliceerd is, kun je de insluitcode ophalen.

Stap 2: Haal de insluitcode op

FlipLink biedt een standaard iframe-insluitcode voor elke gepubliceerde flipbook:

1. Open je flipbook in het FlipLink-dashboard
2. Klik op de knop Delen
3. Selecteer het tabblad Insluiten
4. Kopieer de iframe-code

De insluitcode ziet er ongeveer zo uit:

<iframe
  src="https://go.fliplink.me/view/your-flipbook-id"
  width="100%"
  height="600"
  frameborder="0"
  allowfullscreen
></iframe>

Je kunt de height-waarde aanpassen afhankelijk van je Shopify-themalayout. Voor de meeste thema's werkt een hoogte tussen 500 en 700 pixels goed.

Voor meer informatie over iframe-insluitopties, bekijk onze handleiding over hoe je een flipbook insluit met iframe.

Stap 3: Insluiten op een Shopify-productpagina

Een flipbook toevoegen aan een specifieke productpagina is een uitstekende manier om een statische maattabel of productspecificatieblad te vervangen of aan te vullen.

Via de Shopify-themaeditor

1. Ga naar Online Store → Themes in je Shopify-admin
2. Klik op Customize bij je actieve thema
3. Navigeer naar het productpaginasjabloon
4. Voeg een nieuwe sectie toe — kies Custom Liquid (of Custom HTML afhankelijk van je thema)
5. Plak de iframe-insluitcode in het codeveld
6. Positioneer de sectie waar je de flipbook wilt laten verschijnen (onder de productbeschrijving is een veelgebruikte plek)
7. Klik op Opslaan

Metafields gebruiken voor dynamisch insluiten

Als je verschillende flipbooks op verschillende productpagina's wilt, gebruik dan Shopify-metafields:

1. Maak een productmetafield aan genaamd flipbook_url (type: URL)
2. Plak voor elk product de flipbook-insluit-URL in het metafield
3. Gebruik in je Custom Liquid-sectie:

{% if product.metafields.custom.flipbook_url %}
<div class="flipbook-embed">
  <iframe
    src="{{ product.metafields.custom.flipbook_url }}"
    width="100%"
    height="600"
    frameborder="0"
    allowfullscreen
  ></iframe>
</div>
{% endif %}

Deze aanpak houdt je thema overzichtelijk en stelt je in staat flipbooks per product te beheren zonder telkens themacode te bewerken.

Stap 4: Insluiten op een aangepaste Shopify-pagina

Voor losstaande pagina's zoals een cataloguslandingspagina of een merkmagazinesectie:

1. Ga naar Online Store → Pages in je Shopify-admin
2. Maak een nieuwe pagina aan of bewerk een bestaande
3. Klik in de pagina-editor op de knop Show HTML (het <>-icoon)
4. Plak de iframe-insluitcode direct in de HTML
5. Schakel terug naar de visuele editor om te controleren of het er goed uitziet
6. Sla de pagina op

Je kunt ook de themaeditor gebruiken om een Custom Liquid-sectie aan elk paginasjabloon toe te voegen, waarmee je meer controle hebt over positionering en stijl.

Stap 5: Maak het responsief

Shopify-thema's variëren sterk, en je wilt dat je flipbook er goed uitziet op zowel desktop als mobiel. Wikkel de iframe in een responsieve container:

<div style="position: relative; width: 100%; padding-bottom: 75%; height: 0; overflow: hidden;">
  <iframe
    src="https://go.fliplink.me/view/your-flipbook-id"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
    frameborder="0"
    allowfullscreen
  ></iframe>
</div>

De padding-bottom: 75% creëert een beeldverhouding van 4:3. Pas deze waarde aan op de paginaformaten van je flipbook:

• 4:3-verhouding (liggend): padding-bottom: 75%
• 16:9-verhouding (breed): padding-bottom: 56.25%
• 3:4-verhouding (staand): padding-bottom: 133%

Dit zorgt ervoor dat de flipbook correct schaalt op alle schermformaten zonder onhandige scrollbalken of afgesneden content.

Stap 6: Voeg CTA-knoppen toe die naar producten linken

Een van de krachtigste functies voor Shopify-webshops is het toevoegen van CTA-knoppen in je flipbook die direct naar productpagina's linken. Dit verandert je catalogus van een passieve kijkervaring in een actief shoppinginstrument.

In de FlipLink-editor:

1. Open je flipbook voor bewerking
2. Selecteer een pagina waar je een call-to-action wilt toevoegen
3. Voeg een CTA-knop toe met tekst zoals "Nu kopen" of "Bekijk product"
4. Stel de link in naar je Shopify-product-URL (bijv. https://jouwshop.myshopify.com/products/product-handle)
5. Herhaal dit voor elk product in de catalogus

Wanneer klanten door je ingesloten flipbook bladeren en iets leuks zien, brengt één klik hen direct naar de productpagina om het aan hun winkelwagen toe te voegen. Dit verkort het pad van ontdekking naar aankoop aanzienlijk.

Stap 7: Stel domeinwhitelisting in

Als je wilt beperken waar je flipbook ingesloten kan worden — bijvoorbeeld alleen op je Shopify-webshop en nergens anders — gebruik dan domeinwhitelisting.

1. Open de flipbookinstellingen in je FlipLink-dashboard
2. Navigeer naar de sectie voor domeinwhitelisting
3. Voeg je Shopify-domein toe (bijv. jouwshop.com en jouwshop.myshopify.com)
4. Sla de instellingen op

Dit voorkomt dat concurrenten of ongeautoriseerde sites je flipbookcontent insluiten. Het is vooral belangrijk voor groothandelscatalogi of exclusieve lookbooks die je niet publiek toegankelijk wilt maken buiten je webshop.

Tips voor succes met Shopify-flipbooks

Optimaliseer je PDF voor het uploaden. Comprimeer afbeeldingen in je bron-PDF om bestandsgroottes beheersbaar te houden. Lichtere flipbooks laden sneller, wat belangrijk is voor mobiele shoppers op langzamere verbindingen.

Gebruik beschrijvende paginatitels. De inhoudsopgave van FlipLink haalt gegevens uit je PDF-structuur. Goed georganiseerde hoofdstukken helpen klanten snel naar specifieke productcategorieën te springen.

Test op verschillende apparaten. Bekijk een voorbeeld van je ingesloten flipbook op desktop, tablet en mobiel voordat je publiceert. De responsieve thema's van Shopify dekken de meeste gevallen, maar controleer of de responsieve wrapper werkt met jouw specifieke thema.

Volg de betrokkenheid. FlipLink-analytics tonen je welke pagina's de meeste weergaven krijgen en hoelang bezoekers op elke spread doorbrengen. Gebruik deze data om te begrijpen welke producten of secties aanslaan bij je publiek en pas je catalogusindeling dienovereenkomstig aan.

Houd content actueel. Werk je flipbook bij wanneer je nieuwe producten toevoegt of seizoenspromoties draait. De insluitcode blijft hetzelfde — werk gewoon de flipbook bij in je FlipLink-dashboard en de wijzigingen verschijnen direct in je Shopify-webshop. Je hoeft de themacode niet opnieuw aan te raken.

Link flipbooks vanuit e-mailcampagnes. Deel naast het insluiten in je webshop ook directe links naar je flipbookcatalogi in marketinge-mails en social media-berichten. De opties voor delen en distributie van FlipLink maken het eenvoudig om verkeer vanuit meerdere kanalen naar je Shopify-webshop te leiden.

Voor meer informatie over het insluiten van PDF's en flipbooks op websites in het algemeen, bekijk onze handleiding over hoe je een PDF insluit op een website. Als je een productcatalogus helemaal opnieuw opbouwt, bekijk dan hoe je een digitale productcatalogus maakt.

Begin met het insluiten van flipbooks in je Shopify-webshop

Het insluiten van een flipbook in Shopify kost slechts een paar minuten en transformeert hoe klanten met je productcontent omgaan. Of het nu gaat om een seizoenslookbook, een uitgebreide productcatalogus of een eenvoudige maattabel — interactieve flipbooks creëren een winkelervaring die statische afbeeldingen en PDF's simpelweg niet kunnen evenaren.

Maak je gratis flipbook aan en sluit het vandaag nog in je Shopify-webshop in. Bekijk onze prijzen om te zien hoe FlipLink bij je bedrijf past.