How to Customize Template HTML: Edit Page Layouts & Add Custom Code Snippets

The Customize Template HTML page lets you customize your website's page layout by editing the underlying HTML source code. You can insert custom code snippets into the head, body, and footer sections of a layout, add jQuery scripts, and build brand-new page layouts from scratch. Every website theme uses one of two default templates on each page – the Standard template or the simpler Logo Only template – and any layout changes you save here are retained by the system and applied wherever that layout is used, so your customizations keep appearing as visitors browse your site. Custom layouts can be applied to individual pages through the Advanced Settings in the Website Pages Editor.

In This Article

• Prerequisites
• Why use this feature?
• Step 1: Edit the Standard or Logo Only page layout
• Step 2: Add custom code snippets to the HTML code
• Step 3: Create a new page layout
• Best Practices
• Troubleshooting
• FAQs
• Additional Resources

Prerequisites

Why use this feature?

The Customize Template HTML page gives you direct control over the HTML behind your website pages, so you can go beyond built-in theme options when you need specific branding, tracking, or functionality. Because the system retains whatever you save here, layout changes and code snippets continue to apply automatically to every page that uses that layout, including pages you create later.

• Apply consistent branding and custom styling across every page that shares a layout
• Add tracking pixels, analytics, or third-party scripts to the head, body, or footer without editing each page individually
• Build page layouts that aren't available in your current theme
• Keep unpublished changes separate from your live site until you're ready to publish

Step 1: Edit the Standard or Logo Only page layout

1. On the Admin menu for your website, click Edit Website, then click Customize Template HTML.

   The Customize Template HTML page opens, showing the Page Layouts list with the Standard layout, the Logo Only layout, and any custom layouts you've already created. The Custom Layout column shows whether a layout's HTML has been customized, and the Custom Code Snippets column shows whether any snippet fields have content added.

   

   The Page Layouts list, with Custom Layout and Custom Code Snippets status columns

2. Click Edit beside the Standard or Logo Only layout.

   The Custom Code Snippets page opens for that layout.

   

   The Custom Code Snippets fields for a page layout

3. Click the Advanced Custom Layout tab in the left-hand menu.

   The Advanced Custom Layout page opens, containing an HTML Code Editor. The editor is disabled by default.

4. Tick Enable custom HTML layout.

   The HTML Code Editor becomes enabled and ready to edit.

5. Edit the code as required.

   

   The HTML Code Editor after ticking Enable custom HTML layout

To save your progress without publishing, and keep editing later:

1. Click Save & Continue.

2. Click Preview to view your edits without making them visible to visitors.

   Your website opens in a new tab with the saved layout changes applied, so you can preview them before publishing. Go back to the HTML Code Editor tab to keep editing.

To save your finished changes without publishing them yet:

1. Click Save.

2. Click Continue.

   The layout is saved as an unpublished version and won't appear on your live site until you publish it. Click Preview at any time to check the saved changes before publishing.

To apply the layout and publish the changes live immediately:

1. Hover over the Save button and click Save and Publish.

2. Click Continue.

   The layout changes go live immediately, visible to visitors on every page that uses that layout.

Step 2: Add custom code snippets to the HTML code

1. On the Admin menu for your website, click Edit Website, then click Customize Template HTML.

   The Customize Template HTML page opens, showing the Page Layouts list with the Standard layout, the Logo Only layout, and any custom layouts you've already created.

   

2. Click Edit beside the layout you want to add snippets to.

   The Edit Template – Custom Code Snippets page opens.

   

3. Add custom snippets to the head, body, and footer fields as required, and add jQuery scripts to the jQuery Snippet field.
4. Click Save.

5. Click Continue.

   The layout is saved as an unpublished version until you publish it.

Step 3: Create a new page layout

1. On the Admin menu for your website, click Edit Website, then click Customize Template HTML.

   The Customize Template HTML page opens, showing the Page Layouts list with the Standard layout, the Logo Only layout, and any custom layouts you've already created.

   

2. Click Add Custom Layout.

   The Edit Template – Custom Code Snippets page opens.

   

   The Custom Code Snippets page

3. Add custom snippets to the head, body, and footer fields as required, and add jQuery scripts to the jQuery Snippet field.

4. Click the Advanced Custom Layout tab in the left-hand menu.

   The Edit Template – Create Custom Layout page opens, containing an HTML Code Editor.

5. Enter a Template Name for the new layout.

6. Edit the code as required.

   

   Naming a new custom layout before editing its code

Save your new layout the same way as an existing one: use Save & Continue to keep editing, Preview to check it in a new tab, Save and Continue to store it as an unpublished version, or hover over Save and click Save and Publish to make it available immediately.

Best Practices

• Preview your changes before publishing, so visitors never see an incomplete edit.
• Use Save & Continue while you're still working, and save Save and Publish for once you've confirmed everything looks right in Preview.
• Keep a copy of your custom code snippets outside the platform so you can reapply them quickly if a layout needs to be rebuilt.
• Use View Default Layout to compare against your changes if something looks off after editing.
• Give custom layouts clear, descriptive names so your team can tell them apart when applying them to pages.

Troubleshooting

Problem: The HTML Code Editor is greyed out and I can't edit it.
Cause: The Enable custom HTML layout checkbox hasn't been ticked.
Solution: Tick Enable custom HTML layout above the editor to activate it.

Problem: My changes aren't showing on my live website.
Cause: The layout was saved but not published.
Solution: Reopen the layout and hover over Save, then click Save and Publish (or click Publish if it was already saved), and confirm with Continue.

Problem: I can't find my new custom layout when editing a page.
Cause: The layout hasn't been published yet, or the page's Advanced Settings haven't been updated to use it.
Solution: Publish the layout, then open the page in the Website Pages Editor and select the layout under Advanced Settings.

FAQs

What are the snippet tags (for example, <[{"snippet":"..."}]>) I see in the template code?
These reference standalone, reusable pieces of code used to build elements and add functionality to your website. Existing snippets can't be edited directly, but you can add your own custom snippets through the Custom Code Snippets fields.

What's the difference between Save, Save & Continue, and Save and Publish?
Save and Save & Continue both store your changes as an unpublished version, so you can keep working or preview before going live. Save and Publish stores the changes and makes them live to visitors immediately.

Does editing the Standard or Logo Only layout affect pages that are already live?
Yes. The Standard and Logo Only layouts are shared across every page that uses them, so once you publish a change to one of these layouts, it updates all of those pages.

Can I apply a new custom layout to more than one page?
Yes. Once a custom layout is published, you can apply it to any page through the Advanced Settings in the Website Pages Editor.

Additional Resources

• Website Pages WYSIWYG Editor
• Backing Up Unpublished Changes to Your Website Theme
• How to Add and Edit CSS & HTML Code to a Website
• Embed External Websites
• Embed DecoNetwork With iFrames
• Custom website domain DNS Records
• How Do I... Remove items from the navigation bar on my website?