Help Center
    Help Center
  1. Creating your site
  2. Advanced features
  3. CMS
  4. Using CMS with other Wix products
    5. CMS: Displaying Collection Content on Your Wix Stores Product Page

CMS: Displaying Collection Content on Your Wix Stores Product Page

10 min read
Your Stores Product page has different versions for each of your products that share the same layout. Using the CMS (Content Management System), you can now customize this page to include additional product details that are saved in a separate CMS collection. You can also hide default Product page contents and instead display them in supported elements for more control over the page layout. This gives you the ability to personalize your Product page and enhance your product listings, creating a richer experience for your customers.

First, you create a 'Details' CMS collection that references your Stores Wix app collection. This 'Details' collection is where you'll save the additional info you want to integrate into your Product page. Then, set up datasets on your page, connecting them to your Stores Wix app collection and your 'Details' CMS collection. Finally, connect supported elements, like the Rich Content element, to your 'Details' collection to display the additional information. 

If necessary, you can hide the default content on your Product page widget and display it elsewhere by linking elements to your Stores Wix app collection. For example, you could hide the Product page's built-in gallery, then add a pro gallery and connect it to your Stores Wix app collection's Media Gallery field type. This gives you more control over customizing your gallery and displaying it anywhere on the page. The same goes for any of the Stores widget elements you'd like more control over.  

This can be a game-changer for your online business. Imagine being a boutique owner who wants a uniquely tailored Product page that gives customers a more in-depth look at your products. With this process, you can easily add extra details, such as a product's backstory or specific care instructions, right on your customized Product page.
Screenshot of a details dataset on the Product page.
Before you begin:
  • 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. Your Stores Wix app collection is read-only and automatically includes all the product details you've set up in Wix Stores. 

Step 1 | Create a collection that references your Wix app collection

If you want your Product page to include details about your products that do not already exist in Wix Stores, you need to create a CMS collection with the additional info. For each item in the collection, you'll also need a reference field that connects to the relevant product in your Stores Wix app collection. 
Tip:
If you don't need to show additional product info, and instead, only want to use existing Wix Stores data in connected page elements on the Product page, skip this step. 

To create a CMS collection that references your Stores Wix app collection:

  1. Create a Multiple items (Default) collection where you will keep the additional info you want to integrate into your Product page. 
  2. Click + Add Item to add items for each product you want to save additional details about. 
  3. Click + Add Field to add fields for each type of content you want to save (e.g. Rich Content). 
  4. Click the relevant cells to add your content to each item. 
  5. Add a Reference field type and connect it to the Stores Wix app collection: 
    1. Click Manage Fields then click + Add Field. 
    2. Select Reference and click Choose Field Type.
      Tip: Select the Multi-reference field if you want to use an item's content for more than one product. 
    3. Enter the Field name.
    4. (Velo only) If necessary, update the Field ID, which is used in the site's code. You cannot update this ID later. 
    5. Click the Referenced Collection drop-down and select Products under Stores. 
    6. (Optional) Enter help text to include a tooltip in your collection next to the field name.
    7. Click Save
Screenshot of creating a reference field in a 'Details' CMS collection that references the Products Stores Wix app collection
  1. For each item, click the reference field and select the relevant product. You can select multiple products if you added a multi-reference field in the previous step. 
Screenshot of selecting the corresponding products in the Details collection reference field.

Step 2 | Set up datasets and connect elements to them

Datasets are the tools that link page elements like text, buttons, and images to collection content. They facilitate the connections between the elements and your collection field contents. 

You'll need to add one or two datasets to the Product page, depending on whether you want to show additional details from your CMS collection or not. 

The steps in this section show you how to add the following datasets to your Product page: 
  • Wix app collection dataset: This reads product info that is stored and managed within your Wix Stores app. Add a URL slug filter to this dataset. You can connect supported elements to the dataset to show content from Wix Stores.  
  • Details dataset: This reads the additional content you've stored about your products from your own CMS collection. Add a filter to the dataset that filters your collection's reference or multi-reference field. Connect elements, such as the Rich Content element, to this dataset to display the additional content you've added to your CMS 'Details' collection. 
    Note: You do not need this dataset if you do not need to display additional info from your 'Details' CMS collection, and instead just want to show content from your Stores Wix app collection. 
Screenshot of the datasets needed for this feature.
Wix Editor
Studio Editor
  1. Go to your editor.
  2. Go to your Product page:
    1. Click Pages & Menu  on the left side of the editor.
    2. Click Store Pages and select the Product Page. 
  3. Add a dataset that connects to your 'Details' CMS collection and filters for your reference or multi-reference field:
    Note: Skip this step if you do not need to show additional details from a 'Details' CMS collection.  
    1. Click CMS  on the left. 
    2. Click Add Content Elements. 
    3. Click Dataset. 
    4. Click the Choose a collection drop-down and select your 'Details' collection. 
    5. Edit the Dataset name if needed and click Create. 
    6. Click + Add Filter under Filter in the dataset settings. 
    7. Click the Field drop-down, select your Reference (Products) field or Multi-Reference (Products) field, then click Add Filter. 
Screenshot of adding a reference filter to your 'Details' dataset.
  1. Add a dataset that connects to your Stores Wix app collection:
    1. Click Add a Dataset at the bottom of the panel on the right. 
    2. Click the Choose a collection drop-down and select the Products collection under Stores. 
    3. Edit the Dataset name if needed and click Create.
Screenshot of creating a dataset that connects to the Stores Wix app collection.
  1. Add a URL slug filter to your Stores/Products dataset:
    1. Click the More Actions icon  next to your Stores/Products dataset and select Dataset settings.
    2. Click + Add Filter under Filter. 
    3. Click the Field drop-down and select Slug (Text). 
    4. Leave is selected as the Condition. 
    5. Under Value source, select URL Slug. 
    6. Click Add Filter. 
Screenshot of adding a URL slug filter to the Wix app collection.
  1. Add the supported elements that you want to connect. 
  2. Connect the elements to the relevant fields in the relevant dataset: 
    • Details dataset: Connect to the collection fields in this dataset to use content from your 'Details' CMS collection.  
    • Stores/Products dataset: Connect to the collection fields in this dataset to use content from your Stores Wix app collection.
      Tip: You can add a button or image, then connect its click action to the Add to cart dataset action to create your own 'Add to Cart' button. Similarly, connect to the Open quick view action to create a button that opens the 'Quick View' window.
Screenshot of connecting a Rich Content element to the Rich Content field.
  1. (Optional) Hide default details from your Product Page widget:
    1. Click the Product Page element and select Settings. 
      Note: If you don't see Settings, you're using the new Wix Stores Product Page. Select the Elements icon instead and uncheck the boxes next to each widget element you want to hide. Then skip ahead to step 9. 
    2. Click the Settings tab. 
    3. Uncheck the checkboxes next to each detail you want to hide from the Product page widget. 
    4. Disable the toggle next to the relevant buttons or icons to hide them from the widget. 
    5. If necessary, customize your Product page widget further.
Screenshot of customizing the Product Page widget.
  1. Use the Preview toolbar to test the connections for the relevant products. 
  2. Publish your site when you are ready to make the changes go live. 

Did this help?

|
In this article
  • Step 1 | Create a collection that references your Wix app collection
  • Step 2 | Set up datasets and connect elements to them

Related content

CMS: Adding Filters and Sorts to Datasets to Control Live Site Content
CMS: Displaying Your Wix Stores Products on Any Page
CMS: Displaying Your Wix Stores Products on a Dynamic List Page
CMS: Displaying Your Wix Stores Product Categories on a Dynamic List Page
CMS: Displaying Your Wix Stores Categories on Any Page

Hire a Professional

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