Building a custom header and footer

Your header and footer appear on every page of your storefront. The header usually holds your logo, menu, search and cart. The footer holds links, contact details and policies. In Orbit each one is a layout template. You manage them under Storefront > Templates, on the Header and Footer tabs, and you design them in the page builder.

Considerations

• Every theme comes with a Header and a Footer template. They are published and set as primary when the theme is installed.
• Only one header and one footer can be primary at a time.
• A template must be both Published and Primary to show on your storefront. Primary alone is not enough.
• Deleting a header or footer template is permanent. There is no trash to restore from.

Note: Layout used to be its own entry in the Storefront menu. Headers and footers now live on the Templates page. Old bookmarks to Layout take you there.

Find your header and footer templates

1. From your Orbit dashboard, go to Storefront > Templates.
2. In the row of type tabs, click Header or Footer. They sit at the end of the row, so scroll it sideways if you cannot see them.

The table shows, for each template:

• Template Name: the name you gave it, with a small preview.
• Visibility: Published means it is finished. Draft means it is still being worked on and is not shown on your storefront.
• Updated: how long ago it last changed.
• Primary: a switch showing whether this is the template your storefront uses.

Hover a row to see Edit design, which opens the builder, and Settings, which opens the name and primary options.

Create a header or footer

1. On the Header or Footer tab, click Create template. The Create Header Template dialog opens (or Create Footer Template).
2. In Template Name, type a name you will recognise later, for example Sale Header.
3. Tick Set as primary header template if you want your storefront to use this template once it is published.
4. Click Create & Edit in Builder. The message Header template created appears and the page builder opens with your new template.

A new header starts with a Header Builder block on the canvas that reads Drop elements into Header Builder. A new footer starts with an empty canvas.

Add your logo, cart and account icon

1. In the builder, click Elements in the left rail. The elements panel opens.
2. Click the Ecommerce chip.
3. Drag Logo into the Header Builder. It shows your store name until you upload a logo in your store settings.
4. Open Elements again and drag in Mini Cart. The panel closes after each drop.
5. Do the same for Account Icon and Search.

Tip: Upload your logo under Settings > Store Settings > Store Information before you build the header. The Logo element picks it up on its own.

Change the header colour

1. Click the header bar on the canvas. The settings panel opens on the right with the title Editing Header Builder.
2. Click the Design tab. You see four groups: Background, Border, Shadow and Spacing.
3. Click Background to open it.
4. Set Background Colour to the colour you want.

The Content tab holds the layout options for the bar itself, including Layout, Layout Order, Overlay and Sticky.

Save and publish

1. Click Save at the top of the builder. The message Template content saved successfully appears. The status still reads Draft.
2. Click Publish. The Publish Template dialog opens.
3. Turn on the Publish switch. The button at the bottom changes from No Changes to Publish.
4. Click Publish. The status changes to Published and the message Template updated successfully appears.
5. Click the back arrow at the top left to return to the Templates page. If you ticked primary when you created the template, shoppers now see your new header.

Make a template primary

1. From your Orbit dashboard, go to Storefront > Templates, then the Header or Footer tab.
2. Switch on Primary on the template's row. The template that was primary before switches off on its own.

Publish the template first. A draft template set as primary does not show on your storefront, and shoppers keep seeing the old one.

Rename or delete a template

1. Hover the template's row and click Settings. The Edit Header Template dialog opens.
2. Change Template Name or the primary tick box, then click Save Changes.

To delete a template, tick its checkbox and click Delete permanently in the bar that appears.

Warning: Header and footer templates skip the trash. Once deleted they cannot be restored. Set a different template as primary before you delete the one your store is using.

Related guides

• Managing page templates
• Building a header with the Header Builder
• Adding your logo with the Logo element
• Adding a Mini Cart element