Docs home

Templates, Theme & Header/Footer

Three tools shape how your whole site looks: Templates give a page a complete starting design, the Settings pane sets site-wide colors and fonts, and Header & footer controls what appears on every page.

Apply a page template

  1. Open the page you want to design.
  2. Click Templates in the left sidebar.
  3. Click a template to apply it.

Templates are offered only on the pages they were built for:

Page Templates
Home Education
About Us About Us
Contact Us Contact — Split card, Contact — Form & FAQ, Contact — Panel & map
Product Product Details — Sticky Hero
Store Store

If you see No templates for this page, there's no template for the page you're on.

Applying a template replaces everything on the current page. If you apply one by mistake, click Undo straight away.

Set your site theme

Open Settings (gear icon) to set styles that apply across the whole site:

  • Colors: Primary color (also used for hover states), Content background, Heading text, Sub Top text, Body text, CTA Button color, Button text, Button text hover and Button Outline.
  • Typography: font, weight, size, line height, letter spacing and decoration for your text styles, with separate values for desktop, tablet and mobile.
  • Primary Button and Outline Button: font, weight, size, letter spacing, line height, border width, hover scale, hover shadow and colors.

Changes apply to every block that uses the global theme. Blocks where you set a custom value keep it.

To start over, open the ⋯ menu in the Settings pane and choose Reset theme to defaults. Colors, typography and button styles return to the original theme; block-level overrides are not changed.

The header and footer show on every page. Click Header & footer in the left sidebar, then choose:

  • Header: pick a design under Design → Templates, turn the Announcement bar on or off, and set the Logo height and alt text. The logo, nav menu, search and login buttons are under Header kit in Add Element.
  • Navigation menus: edit the Header menu. Add links, give each a Label, point it to a Page or a Custom URL, drag to reorder, and use Add sub-item for dropdowns.
  • Footer: pick a footer design and add blocks to it.

Click Save at the bottom of the pane. The button shows Saved when there's nothing left to save.

Manage images and files

Click Assets in the left sidebar to open the Asset Library. From here you can:

  • Upload files by dragging them in or clicking Upload (JPG, PNG, SVG or WEBP, up to 5 MB each).
  • Search files by name and sort by Latest first, Oldest first, Smallest first or Largest first.
  • Delete assets you no longer need.

Compress large photos before uploading. Smaller images make your site load faster, especially on mobile.

Code mode (advanced)

Code in the top bar opens the theme files behind your site (Liquid templates, sections, snippets and CSS) in a code editor with Explorer, Search, New File and New Folder.

  • Edits are kept as a draft as you type. You still need to Save or Publish.
  • JSON files are read-only.
  • Switch back to the drag-and-drop editor with Visual.

Use Code mode only if you are comfortable with HTML and Liquid. Mistakes in theme files can break how pages display.

Updated 14 days ago

Share :