Changing your store's colours and fonts

The page builder's Settings tab holds the styles for your whole storefront: brand colours, fonts, link and button styles, and how wide your pages run. Change a style here and every page and template that follows it updates. You open the tab from the toolbox on the left of the page builder.

Considerations

• Global styles save when you click Save in the builder header, and go live on your store straight away. You do not need to publish the page.
• Elements set to Global follow these styles. An element set to Customize keeps its own, so a change here does not touch it.
• Sizes can differ by device. Click the Desktop, Tablet or Mobile icon in the header first. A desktop value applies to smaller devices until you give them their own.
• Your live store usually shows a change at once. If not, wait a few minutes and refresh.

Open the Settings tab

1. From your Orbit dashboard, go to Storefront, then Themes.
2. Click Customize. The page builder opens on your homepage.
3. In the toolbox on the far left, click Settings.

The tab has Export and Import buttons at the top, then the groups Branding, Layout, Colours, Typography, Links, Buttons, SEO, Motion and Custom Code. Branding holds your logo and favicon; see Where to change your logo, favicon, colours and fonts. SEO belongs to the page you have open, not the whole store.

Change your brand colours

1. Click Colours.
2. Click the swatch next to a colour and pick a new one.
3. Click Save in the header. The new colours are live on your store.

• Brand Colours: Primary, Secondary and Accent. Primary is your main brand colour.
• Text Colours: Text and Muted.
• Background Colours: Background, Alt Background and Border.
• Status Colours: Success, Warning and Error.

Change your fonts

1. Click Typography, then the level you want to change: Heading 1 to Heading 6, Body Text or Small Text.
2. Under Font Family, click the font name. The list shows Custom Fonts, System Fonts, Popular and All Fonts, the Google Fonts library.
3. Click a font. Google fonts load on your store on their own.
4. Set the other fields, then click Save.

Each level has the same fields:

• Text Colour: replaces the global Text colour for this level.
• Font Size: a slider in pixels.
• Font Weight: from Light (300) to Extra Bold (800).
• Line Height, Letter Spacing, Text Align, Text Transform, Font Style and Text Decoration: spacing, alignment, capitals, italics and underlines.

Upload your own font

1. Open the font list and click + Upload Font. The Upload Custom Font window opens.
2. Click the dashed box and choose a .woff2, .woff, .ttf or .otf file.
3. Check the Font Family Name.
4. Pick the Weight, from Thin (100) to Black (900), and the Style: Normal or Italic.
5. Click Upload. The font appears under Custom Fonts. Repeat for each weight and style.

Style your links

Click Links to set Link Color, Hover Color and Decoration: None, Underline or Underline on Hover.

Style your buttons

1. Click Buttons, then Primary Button or Secondary Button.
2. Under Button Size, pick a Size Preset: Small, Medium, Large or Custom. Custom lets you set the padding by hand.
3. Work through Typography for the text colours and font, Colours for Background Colour and Hover Background, Border for the outline and Border Radius, and Spacing for Padding X and Padding Y.
4. Click Save.

A Button element picks one of these two styles under Button Style on its Design tab. See Adding a button.

Set the page width and column gap

Click Layout. Section Default Width is the widest your content runs, 1200px to start. Column Gap is the space between columns in a row, 20px to start.

Turn smooth scrolling on or off

Click Motion. Smooth anchor scrolling glides to a section when a visitor clicks an anchor link, and is on to start. Smooth scrolling gives all scrolling an eased, inertial feel. It is off to start. Test it before you keep it.

Add custom CSS

1. Click Custom Code.
2. Paste your rules into Custom CSS. They apply to every page of your storefront.
3. Click Save.

The group also has JavaScript (Head) and JavaScript (Body) boxes. For tracking tags and scripts, use Custom Scripts under Settings, then Customer Tracking. See Customising checkout and adding tracking.

Copy your styles to another store

1. Click Export at the top of the tab. A file ending page-builder-settings.json downloads and the message Settings exported appears.
2. Open the page builder on the other store, click Settings, then Import, and choose the file. The message Settings imported appears.
3. Check the groups, then click Save.

The file carries your styles and custom code, not your logo, favicon or SEO. A file that did not come from Orbit shows Import failed.

Related guides

• Getting started with the page builder
• Where to change your logo, favicon, colours and fonts
• Choosing and activating a theme
• Adding a heading