CMS: Displaying Your Wix Stores Products on Any Page
Showcase your Wix Stores products in a gallery, repeater, or table on any page such as your Home or Cart page. The CMS (Content Management System) allows you to dynamically link the buttons, images, or table columns to your Product Page. Customers can click to navigate to the Product Page where they can learn more before deciding to purchase. You can also link buttons, images, and columns to the Add to Cart action or the Quick View window. Use the settings in the dataset that binds your products to the page elements to filter, sort, or limit the total products displayed. Before you begin:
Create your own products in Wix Stores. Make sure to add the CMS to your site if you haven't already.  Enable Wix app collections so you can use Wix Stores with the CMS.Step 1 | Add a Pro Gallery, repeater, or table to a pageGo to the page in your Editor where you want to display your Wix Stores products. If needed, you can add a new page. Then add the element you want to display your products in. Wix EditorEditor XStudio Editor
Go to your Editor. Go to the page or section where you want to display your Wix Stores products. Click Add Elements  on the left side of the Editor. Add a Pro Gallery, repeater, or table:
    
Pro Gallery: Display your products in a gallery: 
        
Click Gallery.  Click and drag the Pro Gallery of your choice onto the page.  Remove the default images from the gallery:
            
Click the gallery and select Manage Media.  Click Select All then click Delete.  Click Done.      Repeater: Display your products using multiple elements attached to a repeater:
        
Click List.  Click and drag the repeater of your choice onto the page.  Make sure your repeater has an image or button so you can link it to your Product Page later. You can add or remove elements from your repeater. If necessary, you can resize the repeater so it can fit all the elements you need inside it.   Table: Display your products in a table format:
        
Click List.  Click Tables and drag the table of your choice onto the page.     
Go to your Editor. Go to the page or section where you want to display your Wix Stores products. ﻿Click Add Elements ﻿﻿﻿﻿﻿﻿﻿﻿ at the top of Editor X. Add a Pro Gallery or repeater:
    
Pro Gallery: Display your products in a gallery: 
        
Click Gallery.  Click and drag the Pro Gallery to the location of your choice. Remove the default images from the gallery:
            
Click the gallery and select Manage Media.  Click Select All then click Delete.  Click Done.      Repeater: Display your products using multiple elements attached to a repeater:
        
Click Layout Tools.  Click Repeaters.  Click and drag the repeater of your choice onto the page.  Make sure your repeater has an image or button so you can link it to your Product Page later. You can add or remove elements from your repeater. If necessary, you can resize the repeater so it can fit all the elements you need inside it.    
Go to your Editor. Go to the page or section where you want to display your Wix Stores products. Click Add Elements  on the left side of the Editor. Add a Pro Gallery or repeater:
    
Pro Gallery: Display your products in a gallery: 
        
Click Gallery.  Click and drag the Pro Gallery to the location of your choice. Remove the default images from the gallery:
            
Click the gallery and select Manage Media.  Click Select All then click Delete.  Click Done.      Repeater: Display your products using multiple elements attached to a repeater:
        
Click Layout Tools.  Click Repeaters.  Click and drag the repeater of your choice onto the page.  Add an image, text element, and button to the repeater. You can resize the repeater to fit all the elements in each repeater item.     Step 2 | Connect your gallery, repeater or table to the CMSConnect the collection fields to your repeater, gallery or table. The values from these dynamic fields change on your live site depending on the product retrieved by the dataset. Make sure to link the buttons or images to the Page URL. This link allows visitors to click to go to the relevant Stores Product Page. Wix EditorEditor XStudio Editor
In your Editor, click the repeater, Pro Gallery, or table. Click the Connect to CMS icon  . Click Create Dataset. If you already have a dataset on your page, click the Choose a dataset drop-down and select Create a New Dataset. Click the Choose a collection drop-down and select Products under the Stores Wix app collection.
(Optional) Click the Dataset name field and enter a name for the dataset.  Click Create.  (Repeaters only) Under Connections, click the repeater element you want to connect (e.g. Text, Button, Image).  Click the relevant drop-downs and select the Wix Stores dynamic collection fields you want to connect or the dataset linking options for buttons and images:
    
Wix Stores collection fields: Select the relevant fields, for example:
        
Name (Text): The product name you created in Wix Stores. Formatted Discounted Price (Text): The price formatted with the currency (e.g. $20). Main Media (Image): The main media item (image or video) for the product.   Buttons and images linking options: Click the Click action connects to or Link connects to drop-down and select the relevant option:
        
Navigate to Product Page URL: Go to the web address of the product's page on your site.  Add to cart: Add the product to the cart.  Open quick view: Open a popup with details about the product.     
(Repeaters only) Click Repeater connections and repeat steps 7-8 above to connect additional elements in the repeater.  Click to adjust your repeater elements, Pro Gallery or table as needed.
Tip: You can add or remove elements from your repeater at any time. Disconnect elements if you want to use static content that doesn't change according to the relevant category.  Click Preview to test the functionality.  Click Publish if you are ready to make the changes go live. 
In your Editor, click the repeater or Pro Gallery you want to connect. Click the Connect to CMS icon  . Click Create Dataset. If you already have a dataset on your page, click the Choose a dataset drop-down and select Create a New Dataset. Click the Choose a collection drop-down and select Products under the Stores Wix app collection. (Optional) Click the Dataset name field and enter a name for the dataset.  Click Create.  (Repeaters only) Under Connections, click the repeater element you want to connect (e.g. Text, Button, Image).  Click the relevant drop-downs and select the Wix Stores dynamic collection fields you want to connect or the dataset linking options for buttons and images:
    
Wix Stores collection fields: Select the relevant fields, for example:
        
Name (Text): The product name you created in Wix Stores. Formatted Discounted Price (Text): The price formatted with the currency (e.g. $20). Main Media (Image): The main media item (image or video) for the product.   Buttons and images linking options: Click the Click action connects to or Link connects to drop-down and select the relevant option:
        
Navigate to Product Page URL: Go to the web address of the product's page on your site.  Add to cart: Add the product to the cart.  Open quick view: Open a popup with details about the product.      (Repeaters only) Click Repeater connections to connect additional elements in the repeater.  Click to adjust your repeater elements or Pro Gallery as needed.
Tip: You can add or remove elements from your repeater at any time. Disconnect elements if you want to use static content that doesn't change according to the relevant category.  Click Preview to test the functionality.  Click Publish if you are ready to make the changes go live. 
In your Editor, click the repeater or Pro Gallery you want to connect. Click the Connect to CMS icon  . Add a dataset that connects to your Products Stores collection:
    
Click Add a Dataset.
Tip: If you don't see this option, click the Choose a dataset drop-down and select Add a Dataset.  Click the Choose a collection drop-down and select Products under Stores. 
 (Optional) Click the Dataset name field to edit the name of the new dataset.  Click Create.    (Repeaters only) Under Connections, click the repeater element you want to connect (e.g. Text, Button, Image). 
In the Inspector panel, under Connections, click the relevant drop-downs and select the Wix Stores dynamic collection fields you want to connect or the dataset linking options for buttons and images:
    
Wix Stores collection fields: Select the relevant fields, for example:
        
Name (Text): The product name you created in Wix Stores. Formatted Discounted Price (Text): The price formatted with the currency (e.g. $20). Main Media (Image): The main media item (image or video) for the product.   Buttons and images linking options: Click the Click action connects to or Link connects to drop-down and select the relevant option:
        
Product Page URL: Go to the web address of the product's page on your site.  Add to cart: Add the product to the cart.  Open quick view: Open a popup with details about the product.     
(Repeaters only) Click Repeater connections in the Inspector panel to connect additional elements in the repeater.  Click to adjust your repeater elements or Pro Gallery as needed.
Tip: You can add or remove elements from your repeater at any time. Disconnect elements if you want to use static content that doesn't change according to the relevant product.  Click the Preview icon  at the top right to test the functionality. Click Publish if you are ready to make the changes go live. Step 3 | (Optional) Manage the dataset settingsIn your dataset settings, you can choose the maximum products that can display at a time. You can add filters to include specific products or use sort conditions to control the order.Note:Tables in the Wix Editor are not affected by these dataset settings. Click Manage Table on the table element to manage the fields that appear and their order. Wix EditorEditor XStudio Editor
Go to the dataset settings:
    
Click CMS  on the left.  Click Manage Page Connections. Click the More Actions icon  next to the relevant dataset and select Dataset settings.    Edit the Maximum items displayed field to set the maximum number of products that can load at a time on the page. This is also the maximum products that can load per page in a connected pagination bar or per click in "Load More" and navigational buttons.  (Optional) Click + Add Filter to only show specific products in the element.  (Optional) Click + Add Sort to choose the order in which the products appear in the element.
Click Preview to test the functionality. Click Publish if you are ready to make the changes go live. 
In your Editor, click the dataset you connected and select Settings.  Edit the Maximum items displayed field to set the maximum number of products that can load at a time on the page. This is also the maximum products that can load per click in a "Load More" button.  (Optional) Click + Add Filter to only show specific products in the repeater or gallery.  (Optional) Click + Add Sort to choose the order in which the products appear in the repeater or gallery. Click Preview to test the functionality. Click Publish if you are ready to make the changes go live. 
Go to the connected dataset settings:
    
Click the repeater or Pro Gallery.  Click the Connect to CMS icon  . Click Dataset Settings in the Inspector panel.   Edit the Maximum items displayed field to set the maximum number of products that can load at a time. This is also the maximum products that can load per click in "Load More" and navigational buttons.   (Optional) Click + Add Filter to only show specific products in the repeater or gallery.  (Optional) Click + Add Sort to choose the order in which the products appear in the repeater or gallery.
Click Preview to test the functionality. Click Publish if you are ready to make the changes go live. Step 4 | (Optional) Let customers filter productsGive shoppers a way to view only products that match filters they apply such as price, inventory, or brand. Choose from any of the following input elements that allow filtering: Radio Buttons, Checkboxes, Dropdown, Selection Tags, or Slider (Range Sliders only).Learn how to set up input elements that allow visitors to filter collection content. Step 5 | (Optional) Add 'Load More' or navigational buttonsImprove your page's performance by limiting the number of products that appear and adding a 'Load More' button. You can add navigational buttons to let shoppers click to view the next/previous items displayed or add a pagination bar for cycling through a set number of products at a time. Tip:Learn more about the CMS dataset actions you can apply to buttons and images.