Building a dynamic and data-driven website is a great way to engage users, providing them with up-to-date, relevant content. Wix makes this easier than ever by letting you create and manage collections of data and display that data seamlessly across your site.
Whether you’re building an online store, a blog, or a portfolio, Wix collections and datasets allow you to link structured data directly to your site elements, giving you the flexibility to manage and update content without diving into complex coding.
In this tutorial, we will guide you through creating and utilizing Wix collections and datasets to bring your website to life. We’ll cover everything from setting up your collections to linking data with elements like repeaters, buttons, and more, helping you transform your site into a dynamic, data-driven experience for your visitors.
Let’s get started with these terms: “collection” and “dataset.”
Want to learn more? Ready to dive deeper into Wix and Velo? Take your skills to the next level with our comprehensive 'Velo for Beginners' course on Udemy. Enroll today to uncover the intricacies of Wix and Velo.
Need help with your site? The Wix Wiz team is at your side. Schedule a one on one consultation or have the entire team onboard with our development and support plans.
Introduction to Wix Collections and Datasets
Wix makes it easy to build dynamic websites by letting you store and manage content without coding. Two key features that help with this are CMS Collections and Datasets.
These tools allow you to organize and display your data on your site automatically, making it great for blogs, product listings, directories, and more.
What is a CMS Collection?
A CMS Collection is like a database where you store information for your website. Think of it as a spreadsheet where each row represents an item (like a blog post or product), and each column holds details about it, such as the title, image, price, or description.
By using collections, you can keep your website content organized and easily update it without changing each page manually.
What is a Dataset?
A Dataset connects the information in your collection to your website’s design. It acts as a middleman, allowing text, images, or lists on your site to pull data from the collection without needing code.
Datasets also let you control how content appears on your site. For example, you can set them to:
Read: Show information from your collection on your website.
Write: Let visitors add or update content, such as submitting a form.
Read & Write: Allow both displaying and collecting data, making interactive features possible.
By using CMS Collections and Datasets, you can build a website that updates itself whenever you change the stored data, keeping your content fresh and easy to manage.
Creating a Collection
The first step in adding a dataset to your Wix website is to create a collection. You can skip this step if you already have a collection of data. On the left side of the screen, you’ll see a spreadsheet icon labeled ‘CMS’.
Click the content manager (CMS) icon to reveal the CMS pop-up modal window. This will prompt you to create a collection.
You can create a collection by using AI, importing an existing file, or starting from scratch by inputting the content manually.
Pro tip: If you are creating a collection with an import, it’s better to “Start from Scratch” and then import the CSV after the collection is named. Otherwise, your collection will be named something like “Import346” arbitrarily.
Creating a Dataset
After creating your collection, the next step is to create a dataset. To create a dataset, go back to the CMS pop-up to click on “Add Content Element.” Here, you see several options. Connect the webpage’s element to your collection by tapping the “Dataset” option.
A pop-up to choose your collection appears. Choose which collection you want this dataset to connect to by clicking the dropdown beneath “Choose a Collection.” The drop-down reveals the collection you just created. If you have more collections, they will also appear here.
After choosing the collection you would like to use, you may edit or completely change the name of the dataset under the “dataset name” option. However, this is optional as you can also leave the default name generated by WIX. Once you create your dataset, the dataset setting appears.
Dataset Settings: Mode
Once the dataset setting appears, scroll down to ‘dataset mode.’ The mode has three options:
• Read only
• Write only
• Read and Write.
“Read Only” means you are only displaying the data from the collection without adding or changing anything. An example is a list of information you merely want to present on the website.
“Write only” means you are going to be adding new content to the dataset in the collection. For instance, a contact form to be filled out on the website.
“Read and Write” means you want the data in the collection to be visible on the website and at the same time, users can edit data directly on the website in real-time, not just see it. An example is a profile display on the website where you can both see the profile and also edit it.
Decide on your preferred mode before moving on to the next item on the dataset settings: items per load.
Dataset Settings: Items per Load
‘Items per load’ helps in determining the number of items to be linked to this dataset from the collection you have created. If you choose “10” for instance, then that means the dataset will be linked to only ten items from your collection.
It is advisable to decide to display a limited number of items on a page to avoid performance issues. Limiting the number of items per load can improve your site's load time, especially if your collection includes images or other media.
On the other hand, displaying too many items at once may worsen your site’s load time, leading to a very bad user experience.
You can connect just one item as well. By default, the item will be the most recently input item at the top of the collection. If you would like to change the way your data is presented on the website, you can add a “filter.”
Dataset Settings: Filter
Filter allows you to decide how you want to present the data on your website. By clicking “filter”, you can choose the “field” you want to use as a reference for your dataset, the “condition” and “Value source.”
For example, if you're working with a car collection and you only want to display cars that start with ‘M’, you can filter by make, set the condition to start with,' and choose the value source as ‘m’ as seen below.
Dataset Settings: Sort
Next in the settings, we have “Sort.” “Sort” is the order in which you want items to be displayed. In the ‘Sort’ settings, you can choose the field by which you want the data to be arranged (e.g., by date, name, etc.), and the order (ascending or descending).
This ensures that the data appears in the way that makes the most sense for your users. Now, your dataset settings are optimized.
Connecting Your Dataset to Your Website Elements
Once your dataset settings are optimized, you want to display the information in your collection on the website. One of the typical ways to do this is by using a Repeater.
Using Repeaters to Display Data
Just as the name implies, a repeater is an element that repeats data. Add a text element to your repeater. If you are not connected to data, each text element will be the same in terms of what it contains.
But as soon as a repeater is connected to data, you can populate your repeater so that each item in the repeater is populated by an item in your collection. A repeater can be connected to data by clicking the squiggly ‘s’ line with two dots at its ends.
Clicking the squiggly icon(connected to CMS) will allow you to connect the repeater to your dataset. You also need to connect the text to a field. As soon as you do that, the items in your repeater will change to reflect the information from your dataset.
If you want to add more fields to your repeater, you can add another text element by clicking the ‘+’ icon, usually located at the top right corner of your screen. Then add another text element by clicking one of the available text options.
As soon as you drag the new text box and attach it to one of the items in the repeater, it automatically appears in all the items. After adding a new text element, you need to connect it to a field in your dataset. Simply click the “connect to repeater” squiggly icon again.
In the pop-up, click the drop-down option beneath “text connects to” and select the field you wish to display. Immediately, your repeater will reflect the data in that field in your collection.
Connecting Other Elements like Buttons
Another Wix element you can connect to your collection is a button. Simply click the ‘+’ icon at the right corner of your screen to select a button element.
Just like with the repeater, you want to connect your button element to your dataset by clicking the squiggly ‘s’ line. Choose the dataset to connect to and pick what the click action connects to as demonstrated below.
Preview the website to test-run your button element and go over your data accordingly.
Conclusion
And that’s it! After creating your dataset and linking your Wix elements to it, you are now ready to display a dynamic array of data on your WIX website. Feel free to explore more options in the content manager to make your website even more interactive!
Want to learn more? Ready to dive deeper into Wix and Velo? Take your skills to the next level with our comprehensive 'Velo for Beginners' course on Udemy. Enroll today to uncover the intricacies of Wix and Velo.
Need help with your site? The Wix Wiz team is at your side. Schedule a one on one consultation or have the entire team onboard with our development and support plans.
Comments