Data source and variable in Website Builder

In this article

A. Data source and variable in website builder
B. Types of variables
C. Types of blocks
D. Common issues

A. Data source and variable in Website Builders

About Data source

Data source is Product, Collection, Blog, Blog Post and Pages (Please visit this article for more information). In Website Builder, once you set up the data source for a section, container or tab, the inside block can be linked to the variable of the data source.


About Variable in Website Builder

Variables are made to link Settings or Content of a block in a Website with a field in Product, Collection, Blog, Blog Post and a Web Page. In other words, you can create a dynamic content that is dependent with static content.
For example: If you link a Text with a Product name, you can view/edit the Product name and the Text will change correspondingly.

B. Types of variables.

Global variables: These include in all blocks: Shop Logo, Shop Name and Shop Domain.
Section variables: These variable can only be put in if the section/container/tab is connected with the data source (including: Product, Collection, Blog, Blog Post, Web Pages that you create).

C. Setting up data source

Data source can be linked in a Section, Container or Tab.

Click a section / container or tab > Content tab > Data source.


From Data source, choose the desired Data source.


If the section is in the Page that has already had data source you can choose the data source is Current Page's data source. These pages include: Product detail, Collection detail, Blog, Blog post detail, Pages.


You can change Data source by clicking Back button to select another type.


Currently, section can contain Container and Tab. If the container/tab has the data source then the block linked with variable will import data from Container. Otherwise, the block will take data from Section.

D. Using variables for a block

Specific-source blocks

These are blocks that you just need to drag into the section, container, tab with the appropriate data source, it will automatically display the correct result, you don't need to link variable with these blocks.

List of the blocks



Flexible-source blocks

Blocks with settings can fill in static content or link to variables of different data sources. For example: Image has an image setting where the user can upload an image, choose from a gallery or link an image with image distortions such as shop logo, collection thumbnail,...

There are currently 3 types of block settings that support choosing variables: Image, Text input & Custom HTML. These settings can only take 1 value at a time. For example, images can only be uploaded or linked to the collection thumbnail, not both.


Text editor blocks

You can put in content directly and insert variables from different sources at the same time. for example, the block Heading, Paragraph, Bullet. These blocks are different from Flexible-source blocks that you can put in content or insert variables from different sources at the same time.

For example: In the same Text, you can add Product title and Shop Name at the same time.




You can add variables into Text editor blocks by following these steps:

Choose the block you would like to add variables.
Double click to edit the text > Get text from.
Choose the variable you would like to add.

If your section, container and tab haven't connected to any data source, you can only add the Shop variable.



If your section, container and tab have connected to a data source, you can add text variables from the corresponding data source.

D. Common issues

Missing data source alert.

If the section, container or tab that contains the block which has the unsuitable data source, the Missing data source alert will show up. For example, you connect News to Product price, the alert will show up.

To fix this, please do the following steps:

Hover to the Missing data source alert > Please connect your section to a product / Please connect your container to a product / Please connect your tab to a product.


Click Data source > Back action.


Click on the suitable block's data source. For example: If your block is Product gallery, the suitable data source will be Product or Current page product. Once selected, the Product gallery block will show product images.


The block shows empty data even if suitable variables and data sources are connected correctly

This case happens when the data source does not have any data. For example: The block Product gallery has been linked to Products, however, the product does not have any images then the block will show empty. You should add more images to the product, by then the image will show up.

Related articles

Overview of Website Builder
Get started with Website Builder

Updated on: 18/05/2023