Met de Productgrid-widget plaats je een raster van producten op je eigen website, zodat bezoekers rechtstreeks door je assortiment kunnen bladeren. Onder het tabblad Ontwerp bepaal je hoe dit raster eruitziet en zich gedraagt. Het scherm is verdeeld in twee uitklapbare onderdelen: Weergave en Styling.
Bovenaan het paneel staat een melding die eraan herinnert dat het grid pas op je site verschijnt nadat je de code ophaalt onder het tabblad Installatie. De schakelaar Actief rechtsboven bepaalt of de widget in gebruik is.
Functies en mogelijkheden:
Weergave:
In het onderdeel Weergave stel je de indeling en functionaliteit van het productraster in.
- Kolommen bepaalt het aantal producten dat per rij op desktop wordt getoond; in dit voorbeeld staat de instelling op 4 kolommen. Zoals de toelichting aangeeft, passen kleinere schermen zich automatisch aan, zodat de weergave op tablet en mobiel altijd goed blijft.
- Producten per pagina bepaalt hoeveel producten er in totaal op één pagina van het grid verschijnen, hier ingesteld op 8 producten.
- Zoekbalk tonen is een schakelaar waarmee je bezoekers de mogelijkheid geeft om het grid te filteren door te typen. Staat deze aan, dan verschijnt er een zoekveld boven het raster.
- Categoriefilter tonen is eveneens een schakelaar. Wanneer ingeschakeld, worden er categorie-knoppen boven het grid getoond, zodat bezoekers snel tussen productgroepen kunnen wisselen.
Styling:
In het onderdeel Styling pas je de visuele uitstraling van het grid aan je huisstijl aan.
- Accentkleur bepaalt de kleur die wordt gebruikt voor prijzen, knoppen en de actieve categorie. In dit voorbeeld staat de kleur op #FECC00. Laat je dit veld leeg, dan wordt automatisch je themakleur gebruikt.
- Hoekafronding bepaalt hoe rond de hoeken van de elementen in het grid worden weergegeven, hier ingesteld op "Groot". Via deze keuzelijst kies je de mate van afronding die het beste bij je website past.
Hoe voeg je een productgrid toe aan je webpagina:
Als je productgrid eenmaal is geconfigureerd, kan je deze toevoegen aan je webpagina door een shortcode te kopiëren en deze in de back-end van je webpagina te plakken op de positie waar het productgrid getoond moet worden. In de video hieronder tref je een korte uitleg.