Data Binding

What is Data Binding?

Data binding allows you to populate your pages with information from your account and products. For example, you can set a text element inside your page to display the product title or description.

Data Binding Example

You can bind elements by clicking the bind link inside the content tab.

Once you click bind, you can choose what information you want to connect. You can choose from different sources such as the page's product title, description, price etc.  

In the example below, the text element was bound to the current page's product title.

1. Content is bound to Product -> Title
2. Page's product is selected at the top
3. The text element shows the actual product title

The Repeater - Binding List Data

Some of your data is represented in lists of items like product features, testimonials or reviews.

In order to bind data from lists, we need to use the Repeater element. A container that repeats your design multiple times to show the content of your list.

Using the Repeater

To demonstrate the repeater, let's create a Repeater that pulls data from product reviews.

Step 1.

Drag a Repeater from the sidebar.

Step 2.

Choose the data list that you want the Repeater to be bound to by selecting the Repeater and choosing Product Reviews under Repeat for Each.

Step 3.

Now anything you put inside the Repeater will be repeated for every Product Review you have on this product.

In this example, we will add the reviewer's name, the content of the review and the image.

It is preferable to have one parent element inside the Repeater and put everything inside that parent element. We will use a Container element as the parent then drop two text elements and an image inside it.

Once added, each element will be bound to the data that we want from the review.

That's how we use the Repeater to bind list data.