Help Center
    Help Center
  1. Creating your site
  2. Advanced features
  3. CMS
  4. Connecting CMS collection content to your site
    5. CMS (Formerly Content Manager): Displaying Collection Content on a Regular Page

CMS (Formerly Content Manager): Displaying Collection Content on a Regular Page

6 min read
In this tutorial, you’ll learn how to build a custom page to display content from a collection. We’ll show you how to lay out page elements, create a collection, and connect it to these elements using a dataset. Finally, we’ll test the page in Preview mode and publish the site so that visitors to your site can see your data.
Note:
In this tutorial, we are creating a static page to display content from a collection. You can also set up dynamic item pages that automatically create pages for each item in your collection. 

Step 1 | Create a collection

A collection is where you store the content you need for your site, or where you collect information submitted by your visitors. When you create a collection, you also need to define its permissions. These let you control what your visitors can do with the content in your collection. Here, we’re adding an empty collection that will store content that you want to display to visitors.

To create a collection:

  1. Go to CMS in your site's dashboard.
  2. Click Create Collection.
  3. Enter a name for your collection. 
  4. Choose how many items you want in your collection:
    • A single item: A collection can have a single item containing many fields, such as text, images, video, and URLs. This type is best suited for non-repeatable content, such as an 'about' page.
    • Multiple items (Default): A collection with multiple items stores much more content, and it can appear in an element such as a repeater or a table. This type is suited for property listings, portfolios, recipes, and so on. You can read more about the difference between Collections with a Single Item and Multiple Items.
  5. Click Create.

Step 2 | Set up your collection

Add a field for each piece of information you want your visitors to see, and then enter the content.

To set up your collection:

  1. Go to CMS in your site's dashboard.
  2. Click the relevant collection.
  3. Click Manage Fields, then click + Add Field to add a field to your collection. 
  4. Set up the field to match the information you want your visitors to see. Make sure to select the correct field type to match your field’s content.
  5. Define the field for each of your planned page elements.
  6. Enter content into your collection.

Step 3 | Design your page

Your page must include elements that allow visitors to see the information you want to display. 

To get started:

  1. Go to the Add Elements menu and select the group that contains an element type that matches a field type from your collection.
  2. Drag elements onto your page to design and lay out your page. You can select from elements like text and image.

Step 4 | Set up your elements

Once you add page elements, you can configure how each element looks in its Settings panel.

To set up your elements:

  1. Select a page element, click the Settings icon, and use the options to configure it.
  2. Repeat this for each of the elements on your page.
Now you’ll need to connect your elements to your collection. We'll use a dataset to do this, which we’ll cover in the next few steps.

Step 5 | Add and configure a dataset

A dataset connects your elements to your collection. When you add a dataset, you'll need to decide which collection you want to connect to, whether you want your visitors to be able to read and/or write to your collection, and more.

To add a dataset to your page:

  1. Go to CMS in your Editor:
    • Wix Editor: Click CMS  on the left side of the Editor.
    • Editor X: Click CMS  at the top of Editor X.
  2. Click Add Content Elements.
  3. Click Dataset. A dataset is added to your page.
  4. Select the dataset and click Settings. The Dataset Settings panel opens.
  5. Under Connect a Collection, select your collection.
  6. Select Read-only for the Mode.
  7. Optionally, you can set filtering and sorting for the dataset.
  8. Close the panel.

Step 6 | Connect your page elements

Once you have your dataset configured, you can connect your elements to it. You need to go to each of the elements on your page and connect it to the same dataset. Each time you connect an element, you also define which field in your collection its value should connect to. Some elements contain more than one property that can be connected to different fields.

To connect your elements:

  1. Select an element and click its Connect to Data button .
  2. Select the field in your collection where the information is stored.
  3. Repeat this for each of the elements on your page.
In the next step, we'll create Previous and Next buttons to browse through the elements in the dataset.

Step 7 | Create Previous and Next buttons

Now that all your elements are connected to the same collection through the same dataset, you need to allow your visitors to browse through the information. To do this, add two buttons to your page, connect them to the same dataset as the other elements, and define their click actions.

To create Previous and Next buttons:

  1. Add two buttons to your page and change their texts to Previous and Next.
  2. Click their Connect to Data buttons .
  3. In the Connect Button panel, select your dataset.
  4. Under Click action connects to, select Previous item for the first button and Next item for the second button.

Step 8 | Test your page

Now you can test your page in Preview mode. The content you view will be from your Sandbox Database, which is only visible only in Preview mode. Learn more about the Sandbox.

To test your page:

  1. Click Preview.
  2. Click the Next and Previous buttons.
  3. Click Back to Editor.

Step 9 | Publish your site

Note:
This step only applies when you have the Sandbox enabled. Learn more about the Sandbox.
Now it’s time to publish your site so that your visitors can view your content.

Publishing your site creates an empty version of your collection with all the fields from your Sandbox collection. The content your visitors will see in the published version of your site is saved in your Live collection, which you can access through the Content Manger. 

Once you publish your site to create a Live collection, you can add the data to the Live collection manually or sync the content from your Sandbox collection.

To set up a live collection:

  1. In the Editor, click Publish to publish your site.
  2. Go to CMS in your Editor:
    • Wix Editor: Click CMS  on the left side of the Editor.
    • Editor X: Click CMS  at the top of Editor X.
  3. Click Collections.
  4. Select the required collection.
  5. Choose how to populate your Live Collection:
    • To manually add data to your Live collection:
      • Click Live Collection and enter your content.
    • To sync the content from your Sandbox collection:
      • Click Sandbox Collection.
      • Click Sync Content. 
      • Select the desired Sync Option.
      • Click Sync.
      • Click Sync again to confirm.

Step 10 | View your live content

Once you publish your site, your content is available to your visitors. When they come to your page, they see the content from your Live Collection.

Next Steps

You can add more functionality to your page.

Did this help?

|
In this article
  • Step 1 | Create a collection
  • Step 2 | Set up your collection
  • Step 3 | Design your page
  • Step 4 | Set up your elements
  • Step 5 | Add and configure a dataset
  • Step 6 | Connect your page elements
  • Step 7 | Create Previous and Next buttons
  • Step 8 | Test your page
  • Step 9 | Publish your site
  • Step 10 | View your live content
  • Next Steps

Related content

CMS (Content Management System): An Overview
CMS: Adding and Setting Up a Dataset
CMS: Creating a Collection
CMS: Managing Your Collection Content

Hire a Professional

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