Templates

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

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.

Liquid Howto

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

VDsbNsM0SqWQY0ueDvwL_basic.gif

Template Configuration

Variable Types

text: plain text with no formatting controls
richtext: text with formatting controls (output as html)
html: a variable that receives and outputs html
image: an image (note that the <img> tag will be generated for you)
markdown: a variable that receives markdown and outputs html
dropzone: a variable that lets you embed other content inside of templates using the drag/drop page builder

Input Types

inline: for text, richtext, markdown and image variables, these variables can be edited directly inside the drag/drop page builder
multi: for variables with multiple values, e.g., for loops
modal: for variables that are hidden from view, e.g., link urls, the values can be edited in a modal popup

Template Examples

Basic template with variable

<h1>{{text}}</h1>

Template with variables

<div class="jumbotron">
  <h1>{{heading}}</h1>
  <p>{{content}}</p>
  <p>
    <a class="btn btn-primary btn-lg" href="{{button_url}}">{{button_text}}</a>
  </p>
</div>

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.


Pages

Shogun’s drag/drop page builder lets anyone create sophisticated web pages without writing any code. Once shogun has been integrated into your website, pages in the page builder will look exactly the same as they will on your site.

Using the drag/drop functionality

When you first open the page builder, you should see your site layout with no content appear:

Unknown-2.png

On the left hand side of the page builder, there is a menu of templates that you can use to build pages. Dragging templates into the page will highlight the area that the template will occupy when you release the mouse.

CAkOYgkQoWeLT4vCbYGQ_drag.gif

Many templates can be changed once they are on the page. Hovering over text and images reveals editable sections.

eW3uitR0RLyvuyO67hXr_edit.gif

Configuring templates on a page

All templates can have advanced styling properties applied to them by clicking on the configure icon.

o5NWK2v2Q2qplswqNl25_config.gif

You can add padding, margin, border, background images, and various other properties to any template.

Moving templates on a page

You can move an existing template around by dragging its move icon.

i53fqygDR9ujlngXG3oS_move.gif

Deleting templates on a page

You can delete templates by clicking on the trash icon that appears when you hover over them.

femBO0AvTYykahwWK9JY_delete.gif

Saving changes

When you are happy with your changes, Save the page. Pages must have unique names and paths. You will see an error message if you try and save a page with a path that has already been used.

g4cwPLbCRe0Qku6Ygiwp_saving.gif

Page builder activities

Previewing Pages

The Preview button opens a new tab showing a preview of the page in your own website. This is a useful way of testing out the design of pages without the page builder controls being in your way.

Publishing Pages

When you are happy with your pages, it’s time to publish them. Publishing pages will make them live on your website. After you hit the Publish button, a loading indicator will display while the changes are made.

bxT4hK6xRQyFWenDSgjB_Screenshot 2015-06-27 11.49.02.png

It can take up to 10 seconds for the page to be live on your website after this loader disappears.

Unpublishing pages

When a page is published, you can unpublish it (remove it from your website) by hitting the Unpublish button. A loading indicator will display while the changes are made. It can take up to 10 seconds for the page to be removed from your website after this loader disappears.

Translating pages

The Languages button lets you enable translations of your pages into numerous languages. Clicking the button opens this dialog box:

bfKRF1dhQXu36JxUNJTK_Screenshot 2015-06-27 11.52.07.png

After confirming your selection, the toolbar at the top of the page shows a loading indicator beside the Languages button while the translation takes place.

3Ax1bSq6TIKjgJABivDL_lang.png

This is usually finished within 30 seconds. Once the translations have been completed, you can preview the page in all of the chosen languages. Please note that you do not have to enable translation into your default language in the Languages dialog.

Duplicating pages

The Duplicate button lets you copy the contents of a page into a new, unsaved page. This page can then be modified independently of the original page. This handy feature can save you a lot of time if you are creating multiple similar pages.

Page Versions

The Versions button opens a dialog showing a history of all the times the page was saved.

wTMkfl4ISyGqI51unzyJ_Screenshot 2015-06-27 11.57.28.png

You can go back to any previous version by clicking “Revert to this version”.


Integration

Shogun integrates with your existing web stack to serve up pages. Your existing styles, layouts, javascript and domain name are used. Pages served by shogun are rendered server-side as pure html, so your users won’t see any difference between shogun pages and your other website pages.

Integration (Ruby on Rails)

Shogun integrates with Rails through a ruby gem. The gem hooks into your application routing layer, serving up shogun pages whenever a matching path is requested by your users.

Add the Shogun gem to your Gemfile:

gem 'shogun', github: 'getshogun/shogun_rails'

Run bundle install

Set these environment variables:

SHOGUN_SITE_ID={your_site_id}
SHOGUN_SECRET_TOKEN={your_secret_token}

See https://github.com/getshogun/shogun_rails for advanced integration options.