Custom dynamic page to display list of products with add to cart function using Wix Stores checkout

Updated: Apr 19, 2021


 

Follow Along #1

Tutorial Site


https://codequeen.wixsite.com/wix-stores-hybrid-1

 

Follow Along #2

Wix Stores


Make sure to install Wix Stores on your site. Remember that you must have a compatible Wix premium plan in order to accept payments online.



 

Follow Along #3

The Products



Add products to Wix Stores App:


Since we will be creating a custom dynamic page to display a list of products we don't need to add too much information Wix Stores. The main information will be added to a custom database later. For now, we will only add the following information into Wix Stores:


  • Product Name

  • Product Price

  • An Image



 

Follow Along #4

The Database



We will create a database that will act as the 'main source' of information.


For this tutorial we will assume that the database of the products will be called 'Category'. We created the following fields in the database collection:


  • Category Name (Text field)

  • Category Description (Text field)

  • Video Link (URL field)

  • Category Ratings (Number field)

  • Category Stars (Number field)

  • Category Average (Number field)

  • Product Reference (Multi Reference field to Wix Stores Products database)





 

Follow Along #5

The Content



We will adding the Category content and then tagging each Wix Stores Product to the correct category.


For this tutorial we will only be creating 3 category items:


  • The Barbies

  • The Kens

  • The Others



 

Follow Along #6

The Dynamic Page



We need to create a dynamic page connected to the Categories database collection.


You can create a dynamic page manually via the database settings or via the page menu by following the Wix prompts.





For a speedier tutorial, we just followed the Wix Prompts from the Site Menu tab.



Wix automatically created a dynamic page called 'Category All' and a page called 'Category Category Name'. For this tutorial, we will be deleting the Category Name dynamic page to show you how to modify the settings to create one. By doing it this way, you will learn how to modify any existing dynamic page that is not set up for categories.



You can delete the Category name page via the site panel. After you have successfully deleted that dynamic page, select the Category All page and open up the page settings.


To convert this dynamic page into a category page we will modify the URL ending by selecting the field (or column) that we would like our database to categorize by. In this case, we are going to use the Category Name field to categorize by.