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>

Add to the HTML tab
Pull the Variables
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.

Type	Description	Options
Text Box	Simple text-area	N/A
Widget Helper Text	Helper text that can be used to explain anything. This is only shown within the values tab as plain text.	N/A
Rich Text Editor	Full text editor	N/A
Image	Media manager button with text field to enter manually. Includes an image preview.	N/A
HTML	Code mirror HTML editor block	N/A
Colour Picker	Simple visual colour picker.	N/A
Dropdown	HTML select drop-down.	Drop-down options contained within a comma separated value string e.g:"option1, option2, option3"
Advanced	For advanced users. Uses javascript library jsonform/jsonform	See documentation: https://github.com/jsonform/jsonform/wiki

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.