Shogun’s template editor lets you create re-usable custom elements using HTML/Liquid, CSS and JavaScript. Liquid is a templating language that makes it possible to create re-usable custom elements in Shogun with dynamic content. You can read more about liquid here: http://liquidmarkup.org

Custom Elements Tutorial Video:

https://help.getshogun.com/tutorial-videos/advanced/creating-custom-elements-with-liquid-css-and-js

Template Guidelines

  • Avoid using ids as templates can be reused multiple times on the same page.
  • Template css is rendered as a style tag on the page. Make any styles specific to the template using classes if possible.
  • Javascript is rendered inside a script tag. Any javascript should handle multiple instances of the template - the script will only be rendered once.
  • Javascript is not included inside of the editor.

Template Editor

When you stop typing into the liquid editor, Shogun will parse the variables and configuration options (explained below) will appear.

Template Configuration

Every liquid variable in your template should appear in the right sidebar allowing additional configuration. There are 3 things to configure for each variable, and they control how users will interact with your templates inside of the editor.

Data Source

Should this variable be controlled by user input, or from a Data Collection?

When controlled by User Input, users will get to fill in values for the variables when they drag the template into the editor. For Data Collection, users will either get to pick a single Entry from your chosen Data Collection, or in the case of a multi variable (more below) all of the collection entries will be used in place of the variable. For more on Data Collections, see the Data Collections Tutorial.

Value Type

What type of value should the user provide for each variable?

Plain Text: plain text with no formatting controls
Dropzone: a variable that allows nesting other elements by dragging and dropping inside of this element in the editor
Rich Text: text with formatting controls (output as html)
Image: an image (note that the <img> tag will be generated for you)
Markdown: a variable that receives markdown and outputs html
HTML: a variable that receives and outputs html
Integer: a number only variable

Input Type

How should the user enter a value for this variable?

Inline: the variable can be edited inline in the editor, e.g., with a contenteditable region for text
Multi: the user should provide multiple values for this variable in the sidebar
Sidebar: the user should provide a single value for this variable in the sidebar

You should avoid using Inline variables for anything that the user cannot see on the page. For example, a variable that sets some attributes on an HTML element should never be Inline:

<h2 class="##{{never_inline}}">##{{inline_optional}}</h2>

Template Examples

The first 3 examples below illustrate the description of configuration above.

Inline Heading

Sidebar Heading

Multi Heading

Template Versioning

Each time you save a template in Shogun, a new version is created. New versions of pages that are using the template are also created.

Did this answer your question?