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.
