Adding custom code

The Code element puts your own HTML, CSS and JavaScript on a page. Use it for a third-party widget, an embed code or a script that the other elements do not cover.

Considerations

• The Advance group only shows when the builder is in Pro mode. Use the Basic and Pro toggle in the toolbar.
• Your code runs on your live storefront. Only add code you trust.
• Do not include <html>, <head> or <body> tags. They can clash with other elements on the page.

Add the element

1. From your Orbit dashboard, go to Storefront, then Pages, and open the page you want to edit.
2. In the toolbox on the far left, click Elements.
3. Open the Advance group and find Code, or search for it.
4. Drag it onto the canvas and drop it where you want it.

Add your code

1. Click the Code element on the canvas. The settings panel opens on the right.
2. On the Content tab, under Custom Code, click Edit Code.
3. Paste or type your code in the editor.
4. Click Save Changes. The code runs on the page in place of the element.

Settings

• Custom Code: the HTML, CSS and JavaScript for this element. The panel shows how many lines you have added, or Empty if there is nothing yet.

The Design tab has spacing settings only. Your code controls its own layout.

Related guides

• Using the element settings panel
• Adding and arranging elements
• Adding a plugin widget