Build your own custom drag & drop elements with Liquid, CSS, and JavaScript.

Shogun Custom Elements let you create reusable elements with custom variables using HTML/Liquid, CSS and Javascript.

How to create a Custom Element

Custom Elements give developers the opportunity to code their own Shogun elements. Simply navigate to the 'Custom Elements' section of your Shogun dashboard to get started.

How to add Liquid code to your Custom Elements

Liquid code can be used in the HTML section of the Custom Element to create content templates.

Note: This is the Liquid templating language, which is similar but not identical to the Liquid commonly used in themes. Please review the documentation for details on the supported tags and filters:

Setting User Input as a Data Source for a Custom Element

The Data Source option allows you to determine where the data for the Custom Element. Setting this to 'User Input' allows for you to configure this Custom Element within the Editor.

Setting Collection as a Data Source for a Custom Element

A Data Collection may be used to populate data within a Custom Element. This can be used to create Custom Elements that can be updated with ease.

Setting value type for a Custom Element

There are nine value types that you can assign to a tag within a Custom Element. These help determine what kind of information can be inserted into these tags.

  • Plain text
  • Dropzone
  • Rich text
  • Image (HTML)
  • Image (URL)
  • Markdown
  • HTML
  • Integer
  • Boolean / checkbox

Setting an input type for a Custom Element

Input types vary depending on if the Data Source is set to User Input or Collection.

Inline means that the content will get edited inline with the content. Similar to the Text Element.

Multiple allows for you to add a list into your Custom Element. This will need to be used with a Liquid for loop in your Custom Element.

Sidebar gives you the ability to edit this content via the sidebar in your editor.

You can find more information though Shopify's Liquid References

Custom Elements Documentation:

Did this answer your question?