Build your own custom drag and 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

Creating Custom Elements is super easy within Shogun. This gives you the ability to create elements how you would like to use them and ensure that they fit your needs. Simple 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.

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

https://shopify.github.io/liquid/

Custom Elements Documentation:

https://getshogun.com/help/docs/templates-custom-elements

Did this answer your question?