Siteoly Docs
  • Siteoly
  • Create Website
    • Getting started
    • Layout basics
  • How To
    • How to create a new project/website?
  • Card Designs
    • Box Horizontal
    • Box Vertical
    • Box Vertical Modern
    • Box Vertical Wave
    • Box Simple
    • Box Square
    • Modern
    • Circles
    • See all designs
  • Sheets - Getting started
    • Basics
    • Site Settings
    • Default Settings
    • NavBar
    • Header
    • Body
    • Body-Cards
    • Filters
    • Body-Text
    • Detailed Pages
    • Footer
    • Other Settings
    • Advanced Settings
    • Playground
    • Dont Edit
  • Integrations
    • Google Analytics
    • Crisp chat
    • Drift chat
    • Intercom
    • Pop up
    • How to add EngageBay form to header in homepage?
  • Sample websites
    • Modern Blog Sample
    • Sample 1
    • Sample 2
    • Job Board
    • Podcast Sample
    • Restaurant Sample
    • Real Estate Best Places
    • Product List
    • Affiliate Sample
    • Blog Sample
    • Pinterest Sample
    • Instagram Gallery Sample
    • Youtube Sample
    • Events List
    • Marketplace
    • App Listing
    • Nomad List
    • Books List
    • Modern List Sample
  • Basics
    • How does search bar work?
    • How to add more than 4 tags for cards?
    • How to turn off the search bar display on home page?
  • Advanced
    • Embed external Javascripts and CSS
    • How to connect to a custom domain?
    • How to add video to Detailed Pages?
    • How to use Google fonts?
    • Setting Pagination Size (cards per page) for cards display
    • List of CSS classes for custom CSS
    • Embed cards on external sites and internal sites
    • How to add Sitemap to submit to Google Search Console
    • How to configure Filter condition
    • Not seeing SSL certificate?
    • How to create and use Templates?
    • Power up search functionality with extra keywords
    • How to create custom '404' page?
    • Markdown support for Cards description
    • How to create Youtube style video listing websites?
    • Embed extra html/css/scripts into detailed page header for specific detailed pages
    • How to generate automated sitemaps for your website?
    • 'Bring Your Own Code' for dynamic content in Detailed Pages
    • Enable Authentication (Login/Logout)
    • Restrict Detailed Pages Access with Access Code
    • How to add video in Home Page under the Header?
    • How to disable Black Overlay for Header Image?
    • How to use Google Maps on the pages?
    • How to use Google Drive images for cards?
  • Billing
    • Plans & Subscriptions
  • FAQ
    • Not able to access the site after creating the site?
  • Legal
    • Privacy Policy
  • Life Time Deal
    • Life Time Deal
  • How to add Mailchimp URL?
Powered by GitBook
On this page

Was this helpful?

  1. Advanced

How to create and use Templates?

PreviousNot seeing SSL certificate?NextPower up search functionality with extra keywords

Last updated 4 years ago

Was this helpful?

This page explains about - "How to create and use Templates in Siteoly?"

This is only available in Enterprise Plans. Enterprise plans supports upto 10K cards/detailed pages. Please contact us to setup Enterprise plan.

The concept of 'Templates' will help users to create html/markdown/css/javascript templates that can be used inside 'DetailedPages' in Siteoly.

Instead of repeating the same content inside DetailedPages and bloating the sheet, now you can create repeatable content that is used across multiple 'DetailedPages' into a template that can be used with simple short codes in Detailed Pages.

Templates usually have html/markdown/css/javascript content with placeholders for certain variables.

For example, if you want to display below content on various pages in Siteoly, you can create a template with below content.

<h3> {{city}} in {{country}} has a population of 
{{population}} in {{area}} square miles </h3>

To embed this template in a DetailedPage, enter below short code in DetailedPage by passing the required data. Note that the short code can be used along with any other existing content in Detailed Pages. Multiple short codes can be also used in same Detailed Page.

[sly-template @template-id="CityTemplate" @city="New York" 
@country="United States of America" 
@population="8,336,817" 
@area="302.6"]

This translates the template automatically into html as below.

New York in United States of America has a population of 8,336,817 in 302.6 square miles

Here is the sample Google sheet to look at. (Make your own copy by copying the sheet to easily expand cell content and see the data in the sheet)

  • Sample from the above Template setup

Follow the below steps if you don't have 'Templates' sheet inside your Google sheet.

  1. Add a new sheet next to 'DetailedPages' sheet (You can add it anywhere as well but adding it next to 'DetailedPages' sheet will make it easy to make changes)

  2. Name the newly created sheet as "Templates"

Once this setup is completed, you can start adding multiple templates and map the variables as needed in the short code.

Here is a short code for above sample setup that can be used in 'DetailedPages'.

[sly-template @template-id="CityTemplate" @city="New York" 
@country="United States of America" 
@population="8,336,817" 
@area="302.6"]

Make sure you append '@' before every parameter as above.

Note that the short code is supported in two columns in 'DetailedPages'

  • Column D (Markdown/HTML) - The content inside Detailed Pages Body

Note that you need to escape @ and = characters inside the short code if used inside parameter value.

  • If you want to use @ inside parameter value, use \@ instead of just @

  • If you want to use = inside parameter value, use \= instead of just =

In the new 'Templates' sheet, name the first row's Column A as 'Template Id' and Column B as 'Template Content'. (It should look like as below image) - You can also see this for reference.

Column G (Javascript/CSS in Head Tag) - The content inside Detailed Pages <head> tag. (See about content inside <head> tags in Detailed pages)

Google Sheet Link
Detailed Page link
Google Sheet Link
here for more information