All Collections
Custom Elements & Data Collections
Creating Custom Elements with Liquid, CSS and JS
Creating Custom Elements with Liquid, CSS and JS
Custom Elements allow developers to create their own Shogun elements and content templates.
Jill Nahajewski avatar
Written by Jill Nahajewski
Updated over a week ago

Shogun's developer tools allow for the creation of custom reusable elements using HTML/Liquid, CSS and Javascript. Variables can also be included to create editable fields within the element; this allows the end user to modify the content of the custom element in the Shogun editor without affecting its code.

The option to create custom elements is only available on select Page Builder plans. Please check the Plans section of your Shogun settings for availability.

To begin building a custom element, go to the Advanced section of your Shogun dashboard.

Creating a Custom Element in Shogun

In the custom element editor, there are 3 tabs where Liquid/HTML, CSS, and JavaScript can be added.

The CSS and JavaScript for the element can either be placed in their respective editor tabs or in your theme's existing style and script files.

The "Liquid" tab supports HTML and tags from the Liquid templating language ( The Liquid tags used in the custom element act as a template for the element's content. These tags can be used to create editable fields for the element in the Shogun editor, or to pull in & loop through content from the element's selected Data Collection.

To read more about the specifics and best practices for Liquid in Custom Elements, please read our documentation on Custom Elements.

Start building your store with Page Builder

Can I copy Liquid from my theme and paste into a Custom Element?

Not quite. The Liquid in custom elements operates in a separate context than the theme. If your ecommerce platform also utilizes Liquid tags, its code will only render when placed within the store's theme files. It unfortunately will not function when pasted elsewhere.

However, it is possible to model custom elements after theme code by replacing the theme-based Liquid tags with new Liquid variables established in Shogun or with static info.

Using Custom Elements

Once a custom element has been created, it will appear in the Build section of the editor's sidebar under the Custom category.

The custom element can be dragged from the sidebar into the page's content area. If the custom element was created to contain editable fields for the end user, those fields will appear in the editor's sidebar when the element is selected. Those variables can also be defined to be edited inline within the main editor view.

Editing a Custom Element

Custom elements generate static code in the published page's content. When a custom element's code is modified, any pages containing that element will have a status of "Outdated" in the Shogun dashboard.

Because the core code of the element changed, the outdated pages will have to be republished in order to push the latest version to the live pages.

That covers the basics of Custom Elements in Shogun. To learn more specifics, please read the accompanying technical documentation.

Did this answer your question?