CMS: Wix Stores-producten weergeven op een dynamische lijstpagina
Leestijd 11 minuten
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
Editor X
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 weergeven in een Pro Gallery of tabel (alleen Wix Editor) in plaats van in 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 vervolgens 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
Editor X
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.
Wix Editor
Editor X
Studio Editor
- Klik in je Editor op de repeater, Pro Gallery of tabel.
- Klik op het Aan CMS koppelen-pictogram.
- Klik op Dataset-instellingen.
- Bewerk het Maximum aantal weergegeven items-veld om het maximum aantal producten in te stellen dat tegelijk op de pagina kan worden geladen. Dit is ook het maximum aantal producten dat per pagina kan worden geladen in een gekoppelde pagineringsbalk of per klik in 'Meer laden'- of 'Volgende/vorige'-pagina-knoppen.
Let op: Dit veld is niet van toepassing op tabellen. Als je een tabel gebruikt om je items weer te geven, beperk je het aantal weergegeven items door op het Indeling-pictogram
van de tabel te klikken en vervolgens een aangepaste tabelhoogte in te stellen en paginering in te schakelen. - (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 shoppers kunnen klikken om de weergegeven volgende/vorige items 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.
Vond je dit artikel nuttig?
|