Templates is where you add the base libraries (javascript), css, views and snippets that will be used throughout the site. Once you have a template created, you can use it in any site within your platform account.

In this article:

• Templates
• Shortcuts with the Code Editor
• Views, Snippets, Assets
• Theme Gallery
• Difference & Preview
• Review and Publish

Templates

The template builder is where a code editor helps you easily modify the base template. Go to Builder > Templates.

The platform uses CodeMirror as the code editor. Developers edit Views, Snippets and Assets using the code editor. You can work on multiple snippets, views and assets in the code editor. If a change is unsaved in one of your tabs an *asterisk will appear before the name. You can save your changes using Cmd/Ctrl + S. 

In the top right corner of the editor you'll see 3 actions:

•  Local Versions: Shows the versions of your changes to the specific view, snippet or asset. To return to a previous version simply select the version to restore and select save.  
  
  
•  Reset: Resets the view, snippet or asset to the default. By selecting reset, you'll receive a notification alerting that you'll lose all previous changes. 
  
  
• Snippet Selector: The snippet selector allows you to access any custom snippet you've added to the site and insert into any other view or snippet using Liquid Markup.

Shortcuts with the Code Editor

The code editor has several short cuts. Try writing "h1" then select tab.

Other relevant short cuts include:

Cmd/Ctrl + F: Activates a keyword search and support regular expressions.

Cmd/Ctrl + Alt + F: Allows you to find and replace keywords, regular expressions and selective or complete replacement of a word. 

Cmd/Ctrl + Click: Enables you to add multiple cursors to add code in several spots at the same time.

Cmd/Ctrl + D: Selects a word, phrase or set of tags.

Use of Emmet

The code editor also supports Emmet.

For example try adding:

ul#nav>li.item$*4>a{Item $} [Tab]

The result will be:

<ul id="nav">
  <li class="item1"><a href="">Item 1</a></li>
  <li class="item2"><a href="">Item 2</a></li>
  <li class="item3"><a href="">Item 3</a></li>
  <li class="item4"><a href="">Item 4</a></li>
</ul>

Views, Snippets, Assets

The right hand side next to the code editor you'll see Views, Snippets and Assets as mentioned above. Below we'll explain each concept. 

Views

The template used for the site contains Views that are the front end code that creates pages, and presents functionality in the site. A view is comprised of front end code primarily from Liquid Objects (see Liquid Markup). Views may have index views and show views. For example an index view will show a list of content items from the CMS (Content, Promotions, Places). A show view will present the individual content item. In one view you can add different logic, styles, snippets to build a view any way necessary. 

Views are used for all kinds of base purposes such as modifying error pages, unsubscribing from an email campaign, and modifying in one place front end code that spans every page in your site (Eg. Views such as: footer, header, head, base, home)

Organization

Views are quite explanatory in their default naming convention. The content application has views for Posts. Post Index and Post Show. The Post Index will display a list of all the posts with the logic you apply using Liquid Markup. The Post Show will display the individual post. 

Layouts

There are 3 primary views that are important to single out which define the main views of the entire site. These are the base views for an entire site impacting all site resources. 

site home: The primary layout for the site - Home Page.

site clean: The view that displays in the event of an error (404).

site base: The view that shows for every other page except the home and error view.

Snippets

Snippets are used as building blocks of code for different purposes or functionality. Snippets give Developers the flexibility to easily manage code across the entire site. Snippets help Developers manage their code in a virtual environment with version control within every snippet. 

Through Liquid Markup, snippets can be injected conditionally using a control flow. For example you can embed snippets within snippets within snippets. 

Snippets are a key building block for Front End Developers and are the heart of view and widget functionality. Many views and widgets are comprised of snippets.

Sample Snippet for Header: 

Snippet

<header>   <div class="header-inner">
  <div class="navbar">
    <div class="navbar-inner">
      <h1>{{ site.logo | asset_url : 'R360x50' | image_tag | link_to: site.url }}</h1>
    
...
 
</header>

Reference to a snippet within a view:

{% snippet 'shared/general/header' %}

At the bottom of the base Snippets you'll find a button +Add a Snippet as shown below. Add any functionality required to the base template using Snippets.

Assets

Assets contains the base CSS and Javascript for the site. Additionally your images are stored here. All images or files uploaded goes into the Modyo CDN, generating a URL reference to the image or file.

Stylesheets style

Stylesheets style is the CSS that makes reference to all other CSS used in the site. For example you can reference any other CSS Library you've uploaded or currently exists using Liquid Markup as shown below:

{% snippet "shared/libs/bootstrap" %}
{% snippet "shared/libs/bootstrap_theme" %}
{% snippet "shared/libs/file_upload" %}
{% snippet "shared/libs/select2" %}
{% snippet "shared/libs/share" %}

Within the Snippets section under Libs you'll find the actual snippet of code used in the base CSS. Every Layout in the platform supports Bootstrap.

Javascript theme

The Javascript theme is where you can reference all the .js related snippets. For example you can create a Snippet copying a Javascript Library and reference the snippet within the Javascript theme available throughout the site.

For example, after creating your Snippet for Vue.js as a Snippet you can reference within the Javascript theme.

{% snippet "vuejs" %}
{% snippet "vuex" %}
{% snippet "vue_router" %} 

Files

You can upload one or many files at the same time generating their reference URL for use within the platform. 

Click on  to copy the URL and see a small visualization (in the case of images). Click on  to erase the file. 

Theme Gallery

In the top right of the Template Builder click on the 3 dots  for 2 actions. 

1. Access the theme gallery
2. Reset your current theme to the original default theme   

When accessing the theme gallery you can install different templates that you've created for the site. When installing a theme, all snippets are brought over for the theme.

When installing a new Theme, you're current work will be saved in the previous Theme. When selecting a Theme, there are 2 additional actions:

 Copy: You can clone a theme and make modifications for use in another site.   

 Reset: You can reset that current theme to the default base platform theme.

Difference & Preview

In the top right corner there are 2 primary actions when you're ready to publish a change to your template. 

 Preview: Enables you to preview how you're theme is looking before making public. 

 Differences: Enables you to view all code differences between the current public version and the new version to be published.

 

By selecting Differences you'll see the Actual Published Version and the Version in Editing "Editable Version" on the right. 

All versions are organized by date and time. You can do the following with versions:

Reset to this version: Will reset the version erasing the editable version not yet published.

Rollback to this version: Will temporarily rollback to the version selected but will not erase your editable version.

All changes or deletes are shown in red. All modified or added code or content is shown in green.

Review and Publish

When you're ready select Review and Publish. 

Note: If you have workflows activated you'll need to add a message with the changes that are then sent to your reviewer and approver before going public. To know more about Workflows click here.