Zeno comes with many elements which you can use to build up any kind of page design. In some cases, if an element does not offer an option that you need, you can edit the element code for extra customization.
Notice: This article requires basic web development knowledge, and is written for developers.
Step 1: Right-click on the element and choose Edit code
Step 2: You will see the code editor shows up, which has 2 tabs for editing HTML and CSS
In the HTML tab, you can change the HTML structure of the element. Notice Zeno does not use just plain HTML, it also uses Liquid syntax in the HTML template. Liquid is a template language, which is also used by Shopify theme templates, you can learn the syntax here.
In the CSS tab, you can change the CSS code of the element, to change how it looks and feels.
You can use the element settings in HTML and CSS by wrapping them inside a double-square-brackets pair [[ and ]], Zeno will automatically inject the setting value into it.
For example, you can use the border settings in the CSS like this
A setting can be prepended with input: prefix to enable the text editor.
Zeno also has some special settings which are automatically generated and can be used in HTML and CSS code
Setting | Description |
id | ID of the element generated by Zeno |
screen | The screen size, possible values: lg, md, sm |
child-loop | The child elements which are inserted inside the current element. Zeno will show a placeholder if there is no children. |
That is how you can edit an element code. If you need any help, feel free to contact us at the live chat!