Product

De productpagina is de belangrijkste pagina van je webshop; dit is de plek waar bezoekers de beslissing maken om iets te kopen. In Inspire kun je deze pagina volledig modulair opbouwen met behulp van verschillende 'blokken' en 'secties'.

Productpagina Templates

Inspire wordt geleverd met twee verschillende productpagina templates, zodat je de lay-out kunt kiezen die het beste bij jouw merk en de hoeveelheid informatie past:

1. Standaard lay-out (product): In deze traditionele lay-out staat de belangrijkste productinformatie (titel, prijs, varianten, bestelknop) naast de afbeeldingen. Uitgebreide informatie zoals de volledige beschrijving, technische specificaties en extra tekstblokken worden als aparte Secties over de breedte van de pagina onder het hoofdgedeelte van het product geplaatst.
2. Zijbalk lay-out (product.sidebar): In deze compacte lay-out wordt vrijwel alle productinformatie naast de productafbeeldingen in een scrollbare rechterkolom (de zijbalk of sidebar) gehouden. Gedetailleerde informatie zoals de beschrijving, specificaties en extra tekst worden als uitklapbare Blokken (Accordeons) direct onder de bestelknop geplaatst, in plaats van als aparte secties onder het product.

Algemene Instellingen

Wanneer je op de hoofdsectie van de productpagina klikt, kun je de algemene lay-out en de weergave van de productafbeeldingen (media) beheren:

• Kleurenschema: Kies de achtergrond- en tekstkleuren voor de gehele productsectie.
• Ruimte tussen blokken (Space between sections): Bepaal de standaard afstand in pixels tussen de verschillende informatieblokken (zoals de titel, prijs en bestelknop).
• Afstanden (Layout): Pas de marge (onder) en padding (boven/onder) van de sectie aan voor de perfecte witruimte op de pagina.
• Media (Afbeeldingen) Instellingen:
  • Navigatie: Kies of je pijltjes en/of paginatie-bolletjes (bullets) wilt tonen bij meerdere productafbeeldingen.
  • Vormgeving: Voeg optioneel een rand (border) toe rondom de afbeeldingen.
  • Verhouding & Pasvorm (Ratio & Fit): Bepaal het formaat van de afbeeldingen (bijv. 1:1 vierkant of 3:4 portret) en of deze moeten worden bijgesneden (crop) of volledig passend worden gemaakt (pad).
• Sticky Bestelbalk (Sticky bar): Toon een vaste bestelbalk onderaan het scherm wanneer de bezoeker voorbij de normale bestelknop scrollt. Je kunt deze altijd aanzetten, uitzetten, of uitsluitend op mobiele apparaten tonen.

Product Blokken toevoegen

De informatie aan de rechterkant van de productafbeeldingen is opgebouwd uit losse blokken. Je kunt de volgorde van deze blokken zelf bepalen door ze te verslepen.

Tip: Bij vrijwel elk blok kun je de Marge onderzijde (MB) instellen op 'Standaard', 'Klein' of 'Geen'. Hiermee beheer je perfect de ruimte tussen specifieke elementen.

Basis Blokken (Beschikbaar in beide templates)

• Titel (Product title): Toont de naam van het product. Kies de lettergrootte, uitlijning en toon optioneel het merk (vendor) of de geselecteerde variant.
• Prijs (Product price): Toont de huidige prijs (en eventuele 'van'-prijs). Je kunt ook labels voor BTW en het verzendbeleid tonen.
• Korte Omschrijving (Short Description): Toont een korte introductie van het product. Je kunt de tekst afkappen en een 'Lees meer'-link toevoegen, of een Shopify Metafield gebruiken voor een unieke tekst.
• Varianten (Variants): Toont de keuzemogelijkheden voor de klant (maten, kleuren). Kies tussen klikbare 'knoppen' (buttons) of een uitklapmenu (dropdown).
• Bestelknop (Add-to-cart): Pas de tekst en het icoon van de knop aan en schakel dynamische betaalknoppen in (zoals Apple Pay of Google Pay).
• Voorraad (Stock): Creëer urgentie. Stel een drempelwaarde in om een waarschuwing te tonen zoals "Nog maar X op voorraad!".
• USP: Voeg een specifiek voordeel toe met een gekleurd FontAwesome icoon (bijv. 'Voor 23:00 besteld, morgen in huis').
• Informatiebalk (Info-bar): Een opvallend, ingekleurd balkje met een icoon en tekst voor belangrijke mededelingen (zoals verzendinformatie).
• Ophalen in de winkel (Pickup availability): Toont of de klant het geselecteerde product lokaal kan ophalen (vereist instellingen voor fysieke winkels).
• Tekst (Text): Een simpel blok om een regel platte tekst toe te voegen.
• App Blokken (@app): Voeg functionaliteiten toe vanuit externe Shopify apps (zoals product reviews).

Specifieke Zijbalk Blokken (Alleen in product sidebar template)

Als je de Zijbalk (Sidebar) template gebruikt, heb je toegang tot extra blokken om je lay-out compact te houden:

• Aankoop USP's (Purchase USPs): Een specifiek blok om je belangrijkste verkoopargumenten direct naast de koopknop uit te lichten.
• Accordeon Omschrijving (Accordion Description): Plaatst je volledige productbeschrijving in een uitklapbare accordeon binnen de zijbalk. Je kunt instellen of deze standaard open of dicht is.
• Accordeon Specificaties (Accordion Specifications): Plaatst je productspecificaties (via metafields) in een uitklapbare zijbalk-accordeon.
• Accordeon Tekst (Accordion Text): Perfect voor het toevoegen van extra uitklapbare tabbladen zoals "Over dit merk" of "Wasvoorschriften" direct in de rechterkolom.

Extra Productsecties

Naast de hoofdsectie met de afbeeldingen en de bestelknop, kun je de productpagina verder uitbreiden met specifieke secties.

Let op: Als je de Standaard (product) template gebruikt, gebruik je deze secties om je beschrijvingen en specificaties onder het product weer te geven. Als je de Zijbalk (product.sidebar) template gebruikt, zul je waarschijnlijk eerder de hierboven genoemde accordeon-blokken gebruiken.

Productomschrijving (Product Description)

Dit is de plek voor een uitgebreid verhaal over je product dat doorloopt onder de hoofdafbeeldingen.

• Algemene layout: Kies een kleurenschema, pas marges/padding aan en kies de tekstuitlijning.
• Accordeon: Vink 'Standaard geopend' aan als deze sectie direct leesbaar moet zijn, of zet dit uit om er een klikbaar uitklapmenu van te maken.
• Blokken toevoegen: Bouw de omschrijving op met Titel-blokken, Icoon & Tekst-blokken (voor het uitlichten van kenmerken en USP's) en App-blokken.

Productspecificaties (Product Specifications)

Een handige sectie om technische details, afmetingen of materialen overzichtelijk te tonen onder het product.

• Metafield koppeling: Vul de sleutel in van het metafield waarin je de specificaties hebt opgeslagen (standaard is dit specs).
• Accordeon & Afbeelding: Kies of dit blok standaard open moet zijn en of je een bijbehorende specificatie-afbeelding wilt tonen.

Producttekst (Product Text)

Een eenvoudige, schone sectie voor extra platte tekst (bijv. verzendinformatie of een verhaal over het merk) onder het hoofdproduct.

• Gebruik de teksteditor (richtext) om je tekst op te maken en verberg deze optioneel in een accordeon om ruimte te besparen.

Productaanbevelingen (Product Recommendations)

Laat bezoekers andere producten zien om cross-selling en up-selling te stimuleren. Je kunt maximaal 2 van deze secties per productpagina toevoegen.

• Aanbevelingstype (Intent): Kies Gerelateerd (vergelijkbare producten) of Aanvullend (bijpassende producten, instelbaar via de gratis Shopify Search & Discovery app).
• Slider instellingen: Bepaal hoeveel producten er tegelijk zichtbaar zijn (3 tot 6 op desktop), schakel paginatie in en stel in of de producten buiten het kader mogen vallen (carousel overflow).

Algemene Themasecties gebruiken

Je bent absoluut niet beperkt tot alleen de hierboven genoemde productspecifieke secties! Inspire biedt de flexibiliteit om vrijwel alle algemene thema-secties ook op de productpagina te gebruiken.

Dit betekent dat je de pagina zo uitgebreid kunt maken als je zelf wilt. Probeer bijvoorbeeld eens de volgende secties toe te voegen om je productpagina om te toveren tot een echte landingspagina:

• Banners & Hero-afbeeldingen: Om de sfeer van het product visueel te versterken.
• Nieuwsbrief (Newsletter): Voeg een snel inschrijfformulier toe (wordt vaak onderaan in de sidebar template gebruikt).
• Contactformulieren: Voor producten die maatwerk vereisen of waarbij klanten vaak vragen hebben.
• Product-, Collectie- en Mediakaarten: Om bezoekers direct door te sturen naar gerelateerde collecties of merken.
• Aangepaste Liquid of HTML: Voor geavanceerde elementen, video's of externe widgets.