All Collections
Advanced Help
HTML widget - custom variables
HTML widget - custom variables

Create your own widget variables that will render as fields within the HTML widget.

Niall Diamond avatar
Written by Niall Diamond
Updated over a week ago

Create a unique design that you can re-use in other areas or pass over to others to add or edit.

Example of a custom element built using the HTML widget

Adding Variables

{**My variable name**}

You are now able to add custom variables inside the HTML widget that will render as simple text fields to your users.

How to add variables

It is very simple to add your variables inside the HTML Widget.

Paragraph of text

<p>{**Description section one**}</p>

  1. Add to the HTML tab

  2. Pull the Variables

  3. Change the text

Notice how the variable name and the label for the field are the same. This allows you to give unique and descriptive names to each field.

Variable Types

There are many types of variables that can set, each with their own display within the values tab.

πŸ‘Important: The output onto the storefront will always be exactly what you see within the value field within the values tab. The type is only to assist with the content.




Text Box

Simple text-area


Widget Helper Text

Helper text that can be used to explain anything.

This is only shown within the values tab as plain text.


Rich Text Editor

Full text editor



Media manager button with text field to enter manually. Includes an image preview.



Code mirror HTML editor block


Colour Picker

Simple visual colour picker.



HTML select drop-down.

Drop-down options contained within a comma separated value string e.g:"option1, option2, option3"


For advanced users. Uses javascript library jsonform/jsonform

Frequently Asked Questions

Can I add more than one variable?

Yes, you can add as many as you like. However, it is more use-able when you keep the variables to a minimum.

Do I have to add all the variables at once?

No, you can add variables whenever you want. You can edit the variable as well.

Can I edit variables?

Yes, but this will change the variable name and thus you will want to pull the new variable through to add the correct text.

Can I copy widgets?

To copy the design and variables, simply drag in another HTML widget and copy & paste the HTML into the new widget. Then pull the variables and fill in the unique values for the new widget.

How do I add variables for CSS?

You can add them inline or with a style element.

For example, use a <style> tag at the top of your HTML. Then you can add your variables into the CSS.

Did this answer your question?