Natuurlijk! Hier is een stapsgewijze handleiding om een op maat gemaakte CMS-gestuurde website in Webflow te ontwerpen en op te zetten, afgestemd op jouw behoeften voor een online winkel met handgemaakte sieraden: 1. Structureren van je collecties - Producten Collectie: - Velden: - Naam product (naam) - Afbeelding (beeld) - Beschrijving (tekst) - Prijs (nummer of tekst) - Categorie (bijvoorbeeld kettingen, armbanden, oorbellen) (referentie of tekst) - Materiaal (tekst) - Publicatiedatum (datum) - Eventuele extra velden zoals voorraadstatus of SKU - Categorieën of Labels (optioneel): - Als je producten in verschillende categorieën wilt organiseren, maak dan een aparte collectie met categorieën. 2. Dynamische pagina's maken - Creëer een 'Product' template pagina: - Koppel deze aan de 'Producten' collectie. - Ontwerp de layout om productafbeeldingen, beschrijving, prijs, en andere details dynamisch te tonen. - Elke nieuw product dat je toevoegt, wordt automatisch op deze pagina weergegeven. 3. Effectief inhoud beheren - Gebruik het CMS-voorbeeld om producten toe te voegen en te bewerken. - Maak gebruik van filters en sorteeropties in de CMS-collectie-lijstpagina’s om gebruikers te helpen bij het vinden van producten. 4. Filterfunctionaliteit voor gebruikers - Webflow heeft standaard geen uitgebreide filtermogelijkheden, maar je kunt dit realiseren via: - **Filterbare CMS-lijsten**: - Voeg een filtermenu toe met dynamische filters gebaseerd op categorieën of prijs. - Gebruik Webflow's 'Filter' optie om de lijst weer te geven op basis van gebruikersselecties. - **Gebruik van third-party tools**: - Voor meer geavanceerde filtermogelijkheden (bijvoorbeeld filteren op prijsinterval), kun je integraties gebruiken zoals Finsweet’s CMS Library of Jetboost. - Jetboost biedt bijvoorbeeld dynamische filters en zoekfuncties zonder codering. 5. Gebruikersinteracties - Voeg knoppen of dropdowns toe voor prijsfiltering: - Bijvoorbeeld: 'Onder €50', '€50 - €100', 'Boven €100' - Koppel deze filters aan je CMS-lijsten via de gekozen tool (bijv. Jetboost). 6. Testen en lancering - Controleer dat alle dynamische pagina’s correct worden weergegeven. - Test de filterfunctionaliteiten op verschillende apparaten. - Publiceer de site en promoot je webshop. **Kort samengevat:** - Maak een 'Producten' collectie met relevante velden. - Ontwerp een dynamische productpagina. - Voeg filtermogelijkheden toe met behulp van Webflow’s filters of third-party tools. - Beheer je inhoud via het CMS-dashboard. Mocht je verdere hulp nodig hebben bij het ontwerpen of instellen, laat het gerust weten!

Absoluut! Hier is een stapsgewijze handleiding in het Nederlands voor het opzetten van jouw Webflow-website voor handgemaakte sieraden, inclusief prijsfiltering. --- ### Stap 1: Projectopzet & Globale Structuur 1. **Start een nieuw Webflow-project.** Kies een lege template of begin helemaal vanaf scratch voor maximale flexibiliteit. 2. **Plan je pagina's:** * **Statische pagina's:** Home, Over ons, Contact, Algemene Voorwaarden, Privacybeleid. * **Dynamische pagina's:** Dit worden je productcategoriepagina's (bijv. "Armbanden", "Kettingen", "Oorbellen") en individuele productdetailpagina's. Deze worden automatisch gegenereerd door Webflow op basis van je Collecties. --- ### Stap 2: Collecties Structureren (Het Hart van je CMS) Je hebt minimaal één **Collection** nodig, maar meerdere kunnen handig zijn. **1. Collection: Producten** Dit is je belangrijkste collectie. Hier definieer je alle velden voor elk sieraad. * **Naam:** `Producten` * **Velden:** * **Naam** (Plain Text): De titel van het product (bijv. "Zilveren Maansteen Ring"). * **Prijs** (Number): De prijs van het product. Zorg dat je het type op "Decimal" zet voor euro's. * **Afbeelding** (Image): De hoofdafbeelding van het product. * **Gallery** (Multi-Image): Optioneel voor extra productfoto's. * **Categorie** (Option): Maak een vooraf gedefinieerde lijst met je categorieën (bijv. `Armbanden`, `Kettingen`, `Ringen`, `Oorbellen`). **Dit is cruciaal voor filteren en sorteren.** * **Beschrijving** (Rich Text): Een gedetailleerde omschrijving van het product, materialen, afmetingen, etc. * **Slug** (Slug): Het URL-vriendelijke deel van de link naar het product. Webflow genereert dit vaak automatisch vanuit de "Naam". * **Uitverkocht** (Boolean): Een vinkje (True/False) om aan te geven of een product niet meer op voorraad is. **2. (Optioneel) Collection: Categorieën** Voor een complexere structuur kun je een aparte Categorie-collectie maken en deze linken aan je Producten-collectie via een **Reference** veld. --- ### Stap 3: Dynamische Pagina's Maken 1. **Collection Template:** * Ga naar de **Pages** tab. * Klik op het "+" icoontje naast "CMS Collection Pages" en kies je `Producten` collectie. * Webflow maakt nu een template pagina aan (bijv. `products-template`). Dit ontwerp wordt gebruikt voor **alle individuele productpagina's**. Ontwerp deze pagina met alle velden uit je collectie (sleep de elementen vanuit het CMS-paneel naar je canvas). 2. **Collection List Pagina (Bijv. "Shop" of "Categorieën"):** * Dit is meestal je homepage of een dedicated "Shop" pagina. * Sleep een **Collection List** element vanuit de add panel (</>) op je canvas. * Koppel het aan je `Producten` collectie. * Sleep binnen de Collection List wrapper de velden die je wilt tonen (Naam, Prijs, Afbeelding). Dit wordt het herhalende patroon voor elk product. * Om op categorie te filteren, maak je aparte pagina's (bijv. `armbanden`) en plaats je daar een Collection List met een **Filter** ingesteld op waar `Categorie` `Gelijk is aan` `Armbanden`. --- ### Stap 4: Prijsfiltering Implementeren (Gevraagde Functionaliteit) Helaas heeft Webflow geen native, klikbare filteroptie voor prijs (zoals een schuifregelaar) zonder custom code. De beste manier om dit te bereiken is met een **zoek- en sorteerfunctie**. 1. **Sorteren op Prijs:** * Dit is de eenvoudigste en meest directe manier voor gebruikers om producten op prijs te ordenen. * Sleep een **Dropdown Form** element of een **Combo Box** element op je pagina, boven de Collection List. * Maak opties aan zoals: * "Sorteer op" * "Prijs: Laag - Hoog" * "Prijs: Hoog - Laag" * Koppel de dropdown aan je Collection List via de **Settings** van de List. Kies "Sort on change" en koppel de waarden (`Ascending` voor Laag-Hoog, `Descending` voor Hoog-Laag) aan het `Prijs` veld. 2. **Filteren op Prijsbereik (Geavanceerder - vereist mogelijk custom code):** * Voor echte filtering (bijv. "toon producten tussen €50 en €100") is de native Webflow-functionaliteit beperkt. * **Mogelijkheid 1 (Binnen Webflow):** Maak meerdere vooraf gefilterde pagina's met Collection Lists, bijvoorbeeld een pagina "Onder €50" met een filter `Prijs` `is minder dan of gelijk aan` `50`. Dit is niet dynamisch maar wel haalbaar. * **Mogelijkheid 2 (Aanbevolen - met Custom Code):** Gebruik een third-party tool zoals **Finsweet's Attributes** (gratis) of **Jetboost** (betaald). Deze tools pluggen direct in Webflow en stellen je in staat om geavanceerde, UI-filtering (inclusief prijsschuivers) toe te voegen zonder diepgaande programmeerkennis. Zoek in de Webflow Marketplace naar "filter" voor beschikbare opties. --- ### Stap 5: Inhoud Beheren (Het CMS) 1. Ga naar het **CMS** tabblad in je Webflow dashboard. 2. Klik op je `Producten` collectie. 3. Klik op **Nieuwe toevoegen** om producten te beginnen invoeren. 4. Vul alle velden in die je hebt gedefinieerd. Het is cruciaal om consistent te zijn, vooral bij het selecteren van **Categorieën**. 5. Publiceer je site (of stel een staging domain in) om de wijzigingen live te zien. ### Samenvatting van de Werkstroom: 1. **Bouw** je statische pagina's (Home, Contact). 2. **Maak** je CMS Collectie (`Producten`) aan met de juiste velden. 3. **Ontwerp** je dynamische template pagina voor individuele producten. 4. **Plaats** een Collection List op je shop-pagina en configureer **sortering** op prijs via een dropdown. 5. **Overweeg** een tool als Finsweet Attributes voor geavanceerde prijsfiltering. 6. **Vul** het CMS met je producten. 7. **Publiceer** en test alle functionaliteit grondig! Succes met het opzetten van je prachtige webshop voor handgemaakte sieraden