Help Center
We're almost there, loading your answer...
    Help Center
  1. Creating your site
  2. Advanced features
  3. CMS
  4. Using CMS with other Wix products
    5. CMS: Displaying Your Wix Stores Products on Any Page

CMS: Displaying Your Wix Stores Products on Any Page

12 min read
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:

Step 1 | Add a Pro Gallery, repeater, or table to a page

Go 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 Editor
Editor X
Studio Editor
  1. Go to your Editor.
  2. Go to the page or section where you want to display your Wix Stores products.
  3. Click Add Elements  on the left side of the Editor.
  4. Add a Pro Gallery, repeater, or table:
    • Pro Gallery: Display your products in a gallery: 
      1. Click Gallery. 
      2. Click and drag the Pro Gallery of your choice onto the page. 
      3. Remove the default images from the gallery:
        1. Click the gallery and select Manage Media. 
        2. Click Select All then click Delete. 
        3. Click Done. 
    • Repeater: Display your products using multiple elements attached to a repeater:
      1. Click List. 
      2. Click and drag the repeater of your choice onto the page. 
      3. 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:
      1. Click List. 
      2. Click Tables and drag the table of your choice onto the page. 

Step 2 | Connect your gallery, repeater or table to the CMS

Connect 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 Editor
Editor X
Studio Editor
  1. In your Editor, click the repeater, Pro Gallery, or table.
  2. Click the Connect to CMS icon .
  3. 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.
  4. Click the Choose a collection drop-down and select Products under the Stores Wix app collection.
  1. (Optional) Click the Dataset name field and enter a name for the dataset. 
  2. Click Create. 
  3. (Repeaters only) Under Connections, click the repeater element you want to connect (e.g. Text, Button, Image). 
  4. 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. 
  1. (Repeaters only) Click Repeater connections and repeat steps 7-8 above to connect additional elements in the repeater. 
  2. 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. 
  3. Click Preview to test the functionality. 
  4. Click Publish if you are ready to make the changes go live. 

Step 3 | (Optional) Manage the dataset settings

In 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 Editor
Editor X
Studio Editor
  1. Go to the dataset settings:
    1. Click CMS  on the left. 
    2. Click Manage Page Connections.
    3. Click the More Actions icon  next to the relevant dataset and select Dataset settings. 
  2. 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. 
  3. (Optional) Click + Add Filter to only show specific products in the element. 
  4. (Optional) Click + Add Sort to choose the order in which the products appear in the element.
  1. Click Preview to test the functionality.
  2. Click Publish if you are ready to make the changes go live. 

Step 4 | (Optional) Let customers filter products

Give 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).

Step 5 | (Optional) Add 'Load More' or navigational buttons

Improve 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.

Did this help?

|
In this article
  • Step 1 | Add a Pro Gallery, repeater, or table to a page
  • Step 2 | Connect your gallery, repeater or table to the CMS
  • Step 3 | (Optional) Manage the dataset settings
  • Step 4 | (Optional) Let customers filter products
  • Step 5 | (Optional) Add 'Load More' or navigational buttons

Related content

Wix Stores: Customizing Your Product Page
CMS: Displaying Your Wix Stores Categories on Any Page
CMS: About Datasets
CMS: Displaying Collection Content in a Repeater
CMS: Displaying Collection Content in a Pro Gallery

Hire a Professional

Get matched with a Wix Partner who can help you reach your site goals.
Get Matched