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 Shogun plans. Please check the Plans section of your Shogun settings for availability.
Should you be having trouble creating your Custom Elements, note, that Shogun has introduced an in-app AI helper function: Code with AI; only available on the current Advanced plan.
If you are on a legacy plan which offers the ability to build custom elements, you would need to transition to Advanced, in order to see and use Code with AI.
To begin building a custom element, go to the Advanced section of your Shogun dashboard and select Custom Elements.
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 "Liquid" tab supports HTML and tags from the Liquid templating language (http://liquidmarkup.org). 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 CMS Collection.
To read more about the specifics and best practices for Liquid in Custom Elements, please read our documentation on Custom Elements.
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 Elements library 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.