CMS: Wix Stores-producten weergeven op een dynamische lijstpagina
9 min
In dit artikel
- Stap 1 | Voeg een dynamische lijstpagina toe voor je producten
- Stap 2 | Koppel je repeater aan het CMS
- Stap 3 | (Optioneel) Beheer de dataset-instellingen
- Stap 4 | (Optioneel) Laat klanten producten filteren
- Stap 5 | (Optioneel) Voeg 'Meer laden'- of navigatieknoppen toe
Gebruik het CMS (Content Management System) om creatief te zijn met de weergave van je Wix Stores-producten door ze te presenteren in een volledig aanpasbare repeater op een dynamische lijstpagina. Kies alleen de pagina-elementen die je nodig hebt (zoals tekst, knoppen en afbeeldingen) en koppel ze aan de relevante velden die door je producten worden gebruikt (zoals de naam, prijs en hoeveelheid op voorraad).
Je kunt knoppen of afbeeldingen koppelen aan je Productpagina zodat klanten kunnen klikken om meer te lezen voordat ze tot aankoop overgaan. Je kunt ook 'In winkelwagen' en 'Snelle weergave'-knoppen maken voor een naadloze winkelervaring.
Voordat je begint:
- Maak je eigen producten in Wix Stores
- Zorg ervoor dat je het CMS toevoegt aan je website als je dat nog niet hebt gedaan
- Schakel Wix-appverzamelingen in in zodat je Wix Stores kunt gebruiken met het CMS
Stap 1 | Voeg een dynamische lijstpagina toe voor je producten
Ga naar Wix-appverzamelingen in het CMS van je editor en maak een dynamische lijstpagina van de Stores-verzameling. Deze pagina bevat een repeater die al gedeeltelijk is gekoppeld aan je Stores-producten.
Wix Editor
Studio Editor
- Ga naar je Editor
- Klik links in de Editor op CMS.
- Klik links op Wix app-verzamelingen.
- Scrol omlaag naar Stores, wijs Producten aan en klik op het Meer acties-pictogram.
- Klik op Dynamische pagina toevoegen.
.
.
- Klik op Lijstpagina.
- Klik op Toevoegen aan website.
Tip:
Je kunt je producten in een professionele galerij of tabel weergeven in plaats van een repeater. Verwijder hiervoor de repeater en voeg een galerij of tabel toe. Volg daarna de rest van de stappen in dit artikel om je galerij of repeater aan het CMS te koppelen.
Stap 2 | Koppel je repeater aan het CMS
Koppel de repeater aan een dataset die is gekoppeld aan je Wix Stores-productenverzameling. Koppel dan elk repeater-element aan de dynamische waarden van je verzameling die veranderen afhankelijk van het getoonde product. Zorg ervoor dat je een afbeelding of knop in je repeater koppelt aan de productpagina van Wix Stores, zodat klanten aanvullende informatie over producten kunnen bekijken voordat ze tot aankoop overgaan. Je kunt ook 'In winkelwagen'- en 'Snelle weergave'-links maken.
Wix Editor
Studio Editor
- (Optioneel) Voeg elementen toe aan je repeater (bijvoorbeeld knoppen, tekst, afbeeldingen) of verwijder elementen die je niet nodig hebt. Je kunt de grootte van de repeater aanpassen zodat deze alle elementen kan bevatten.
- Klik op het repeater-element en selecteer het Aan CMS koppelen-pictogram.
- Klik op de Kies een dataset-dropdown en selecteer Producten.
- Klik onder Koppelingen op het repeater-element dat je wilt koppelen.
Let op: Als je de standaard repeater gebruikt die bij de dynamische pagina is geleverd, zijn de Afbeelding- en Tekst-elementen al gekoppeld. Je kunt extra tekstelementen verwijderen of loskoppelen en vervangen door statische tekst. - Klik op de relevante dropdowns en selecteer de dynamische verzamelingsvelden die je wilt koppelen of de dataset-linkopties voor knoppen en afbeeldingen:
- Wix Stores-verzamelingsvelden: Selecteer de relevante velden, zoals:
- Naam (tekst): De productnaam die je in Wix Stores hebt gemaakt.
- Opgemaakte kortingsprijs (tekst): De prijs die is opgemaakt met de valuta (bijvoorbeeld € 20,–).
- Hoofdmedia (afbeelding): Het belangrijkste media-item (afbeelding of video) voor het product.
- Opties voor het koppelen van knoppen en afbeeldingen: Klik op de Klikken is gekoppeld aan of Link is gekoppeld aan-dropdown en selecteer de relevante optie:
- Navigeer naar URL productpagina: Ga naar het webadres van de productpagina op je website.
- In winkelwagen: Voeg het product toe aan de winkelwagen.
- Snelle weergave openen: Open een pop-up met details over het product.
- Wix Stores-verzamelingsvelden: Selecteer de relevante velden, zoals:
.
- Klik op Repeater-koppelingen en herhaal stap 4-5 hierboven om extra elementen in de repeater te koppelen.
- Klik om je repeater-elementen naar behoefte aan te passen.
Tip: Je kunt op elk moment elementen toevoegen aan of verwijderen uit je repeater. Ontkoppel elementen als je statische inhoud wilt gebruiken die niet verandert volgens de relevante categorie. - Klik op Voorbeeld om je dynamische productenpagina te testen.
- Klik op Publiceren als je klaar bent om de wijzigingen live te laten gaan.
Stap 3 | (Optioneel) Beheer de dataset-instellingen
In je dataset-instellingen kun je het maximum aantal producten kiezen dat tegelijk kan worden weergegeven. Je kunt ook filters toevoegen om alleen bepaalde producten op te nemen, of sorteringen toevoegen om de volgorde waarin de producten worden weergegeven te bepalen.
Let op:
Het Items per belasting-veld is niet van toepassing op tabellen. Als je een tabel gebruikt om je producten weer te geven, kun je het aantal weergegeven items beperken door op het Indeling-pictogram te klikken 
. Stel daarna een aangepaste tabelhoogte in en schakel paginering in.
. Stel daarna een aangepaste tabelhoogte in en schakel paginering in. Wix Editor
Studio Editor
- Klik in je editor op de repeater of pro gallery.
- Klik op het Aan CMS koppelen-pictogram.
- Klik op Dataset-instellingen.
- (Optioneel) Klik op het type machtiging naast Machtigingen om te bepalen wie de inhoud van de verzameling op je live website kan bekijken, toevoegen, bijwerken of verwijderen.
- Bewerk het Items per laadbeurt-veld om het maximale aantal items dat tegelijk kan worden geladen, in te stellen.
Let op: Dit is ook het maximum aantal items dat kan worden geladen wanneer bezoekers op 'Meer laden'-knoppen, 'Volgende/vorige pagina'-knoppen of pagineringsbalken klikken. - (Optioneel) Klik op + Filter toevoegen om alleen specifieke producten weer te geven in de repeater.
- (Optioneel) Klik op + Sortering toevoegen om de volgorde te kiezen waarin de producten worden weergegeven in de repeater.
- Klik op Voorbeeld om je dynamische productenpagina te testen.
- Klik op Publiceren als je klaar bent om de wijzigingen live te laten gaan.
Stap 4 | (Optioneel) Laat klanten producten filteren
Geef shoppers een manier om alleen producten te bekijken die overeenkomen met de filters die ze toepassen, zoals prijs, voorraad of merk. Kies uit een van de volgende invoerelementen die filteren toestaan: keuzerondjes, selectievakjes, dropdowns, selectietags of schuifregelaars (alleen bereikschuifregelaars).
Stap 5 | (Optioneel) Voeg 'Meer laden'- of navigatieknoppen toe
Je kunt de prestaties van je pagina verbeteren door het aantal producten dat wordt weergegeven te beperken en een 'Meer laden'-knop toe te voegen.
Voeg navigatieknoppen toe zodat klanten kunnen klikken om de volgende/vorige pagina met weergegeven producten te bekijken of voeg een pagineringsbalk toe om een bepaald aantal producten tegelijk te doorlopen.
Tip:
Lees meer over de CMS-dataset-acties die je op knoppen en afbeeldingen kunt toepassen.