Show details for Generate Boilerplate HTML for Custom Content Templates

Generate Boilerplate HTML for Custom Content Templates

Build a layout with the Content Template Editor, copy the HTML it generates, and use it as the starting point for your own custom content template.

Generate Boilerplate HTML for Custom Content Templates

Build a layout with the Content TemplateFunctionality provided by Infigo allowing you to create and format site content without directly interacting with HTML. Editor, copy the HTML it generates, and use it as the starting point for your own custom content template.

Guide4 min readVideo9-step guideUpdated 15 Oct 2026

Overview

Writing a custom content template from scratch means getting every wrapper and class right. Instead, let the platform write it for you: build the layout with the standard Content Template Editor, switch the page to the Code Mirror EditorOften found alongside the option for Content Templates., and copy the HTML it generated. Paste it into a new content template and replace the sample text with placeholders.

What it does

  • A head start on custom templates - correct structure, classes and spacing from the first line.
  • Consistent styling - your template uses the same classes as the standard templates, so it matches the rest of your storefront.
  • Simple forms for editors - each placeholder becomes a field your editors fill in.

How it works

  • The editor generates HTML when you save - switching the page to Code Mirror Editor shows that HTML.
  • Placeholders - a name written between two percent signs is replaced by what an editor types into the matching field.
  • Fields - created on the template with Add new field; the field name is the placeholder name.
  • Infigo area - on the template's Settings tab, decides where editors can pick the template.

Good to know

  • Always save before switching the editor type - unsaved changes are lost, and the HTML is only generated on save.
  • Don't edit in Code Mirror and then switch back to the Content Template Editor: saving there rebuilds the HTML from the form and overwrites code changes.
  • Keep the generated classes. Remove placeholders left over from the original template's settings (such as Columns_Custom_Classes) unless you add matching fields, but keep the platform token on the first line (Resource.Template.TopicPageFix).
  • A field is only kept once the template is saved.

Before you begin

  • You should already be comfortable editing HTML and creating custom content templates.
  • Use a spare content pageAdditional pages on your Storefront containing supplementary information. to build the layout - not a live page.

Step-by-step

  1. Build the layout with the Content Template Editor

    Create or open a content page (Content Management > Content Pages) with Body editor type set to Content Template Editor. Build the layout you want your template to produce - sections, columns, headings, paragraphs - and style it with the settings, using sample text. Click Save and Continue Edit: the HTML is generated when you save. Use a spare page for this, not a live one.

    A section built with the Content Template Editor

    A section built with the Content Template Editor
  2. Switch the editor type to Code Mirror Editor

    Change Body editor type to Code Mirror Editor and confirm with Yes. The page keeps the HTML generated at the last save. Unsaved changes are lost, so always save first.

    Switching text editor - confirm with Yes

    Switching text editor - confirm with Yes
  3. Copy the generated HTML

    The code editor now shows the full HTML of your layout, with all the classes the platform uses. Select it all and copy it. Do not keep editing the page in Code Mirror and then switch back: saving in the Content Template Editor rebuilds the HTML from the form and overwrites code edits.

    The generated HTML in the Code Mirror Editor

    The generated HTML in the Code Mirror Editor
  4. Add a new content template

    Go to Content Management > Content Templates and click Add new. Enter a Name, tick Enabled and click Save and Continue Edit - the HTML Markup and Fields areas appear after the first save.

    Content Templates > Add new

    Content Templates > Add new
  5. Paste the HTML and swap the text for placeholders

    Paste the HTML into HTML Markup. Replace each piece of sample text with a placeholder in percent signs, for example %Heading% and %Text%. Keep the generated classes as they are - removing them can change how the text is coloured or spaced. Remove any placeholders left over from the original template's settings (such as ) unless you add matching fields; keep platform tokens such as .

    HTML Markup with Heading and Text

    HTML Markup with Heading and Text
  6. Add a field for each placeholder

    Click Add new field, enter the Name (the placeholder name without the percent signs) and pick a Field type - Textbox for a heading, TextArea or Wysiwyg for longer text - then Create. The Placeholder column shows the code to use in the markup. Click Save and Continue Edit to keep the fields.

    Fields: Heading and Text with their placeholders

    Fields: Heading and Text with their placeholders
  7. Choose where the template can be used

    Open the Settings tab and tick the Infigo area where editors should be able to pick this template - here Content Page. Save.

    Settings > Infigo area: Content Page

    Settings > Infigo area: Content Page
  8. Use your template on a page

    On a content page using the Content Template Editor, choose your template under Select your Content Template. Its fields appear as a simple form: fill them in and save.

    Select your Content Template: Promo Banner

    Select your Content Template: Promo Banner
  9. Check the result on your storefront

    The page renders your template with the values entered in the form - the same look as the layout you built in step 1, now reusable on any page.

    The page built from the custom template

    The page built from the custom template

Video transcript

Overview video

0:00 Boilerplate HTML for custom content templates

0:04 Here's a shortcut for writing custom content templates. Instead of starting from a blank page, you let the content template editor write the HTML for you.

0:15 First, the layout is built with the standard content template editor, using sample text.

0:21 Switching the page to the code editor shows the HTML that was generated, with all the right classes.

0:29 That HTML is pasted into a new content template, and the sample text is swapped for placeholders.

0:36 Editors fill in a simple form, and the page looks just like the layout you built.

0:42 The step-by-step guide on this page walks through each stage.

Step-by-step video

0:00 Generate boilerplate for a custom content template

0:04 In this tutorial we'll use the content template editor to write the HTML for a custom content template. You'll need to be comfortable with HTML, and you should use a spare content page.

0:16 On a spare content page, use the Content Template Editor to build the layout you want, with sample text, and style it with the settings. Then click Save and Continue Edit. The HTML is generated when you save.

0:30 Change the Body editor type to Code Mirror Editor, and confirm with Yes.

0:36 The code editor now shows the HTML for your layout. Select it all and copy it.

0:42 Go to Content Management, then Content Templates, and click Add new. Give it a name, tick Enabled, and click Save and Continue Edit.

0:51 Paste the HTML into HTML Markup. Replace the sample text with placeholders in percent signs, such as Heading and Text. Keep the generated classes as they are.

1:03 Click Add new field for each placeholder. Use the same name, and pick a field type, such as Textbox for a heading or TextArea for longer text. Then save the template.

1:14 On the Settings tab, tick where the template can be used. Here, Content Page. Save again.

1:20 Now, on any content page, choose your template under Select your Content Template, fill in the fields, and save.

1:28 The page looks just like the layout you built, and editors only had to fill in a form.

1:34 That's it. Remember to save before switching editors, and to save the template after adding fields.

Search terms

Alternate Search Phrases
custom content templateboilerplatecontent template htmlcode mirror editorgenerate htmltemplate placeholdersadd new content template
Guide | Generate Boilerplate HTML for Custom Content TemplatesLast updated: 15 Oct 2026
Incomplete
Start the conversation! Have a question? Tutorial out of date? Let us know HERE!