Where to change your logo, favicon, colours and fonts

Some parts of your store's look can be changed from more than one place in Orbit. This guide says where each one lives, which place to use, and which wins when two places set the same thing.

Considerations

• Your logo and favicon are one image each. Both places that let you upload them save to the same spot, so the last upload wins.
• Colours and fonts for everything built in the page builder live in the builder's Settings tab. Changes there go live as soon as you save.
• Your theme carries its own colour and font settings. They reset to the theme's defaults when you activate or update it, and you do not edit them by hand.

Your logo

Upload it in either place and both show the same image.

From Store Settings

1. From your Orbit dashboard, go to Settings, then Store Settings.
2. Click the Store Information tab.
3. Under Store Logo, click Upload Logo and choose your image. The recommended size is 512x512px in PNG, JPG or SVG.
4. Click Save Changes.

From the page builder

1. In the page builder, click Settings in the toolbox on the far left, then click Branding.
2. Under Store Logo, click Upload Store Logo. The Select Store Logo window opens.
3. Pick an image from your media library or upload one. It saves at once, and the Logo element on the canvas updates.

Once a logo is set, both places offer Change and Remove. Your logo shows in:

• The Logo element in your header. Until you upload one, it shows your store name as text.
• The top of your checkout.
• Customer emails, unless you set a separate email logo on the Branding tab under Settings, then Notifications.
• Link previews, when you have no social sharing image.

Your favicon

The favicon is the small icon in the browser tab. It is stored once, but the page builder asks you to crop it square first.

1. From your Orbit dashboard, go to Settings, then Store Settings, then click the Store Information tab.
2. Under Store Favicon, click Upload Favicon and choose your image. The recommended size is 32x32px or 64x64px in PNG, ICO or SVG.
3. Click Save Changes.

In the page builder, the Favicon field sits under Settings, then Branding. Click Upload Favicon and pick an image. In the Crop Favicon window, drag the image inside the circle, set the Zoom, and click Apply.

Note: A store with no favicon shows a blank tab icon. Orbit does not fall back to its own logo.

Colours and fonts

For everything built in the page builder, including header and footer templates and every element left on Global, change colours and fonts in the builder's Settings tab: the Colours, Typography, Links and Buttons groups. See Changing your store's colours and fonts. An element set to Customize ignores the global styles until you switch it back to Global.

A few parts of your store have their own colour settings:

• Checkout: Settings, then Checkout, on the Enterprise plan. If no brand colour is saved there, checkout uses the builder's Primary colour. See Customising your checkout.
• Customer emails: Primary Colour on the Branding tab under Settings, then Notifications. See Setting up email and SMS notifications.
• Cookie banner: Storefront, then Cookie Consent. See Setting up your cookie consent banner.
• Header bar: the Background Colour on your header template's Design tab. See Building a custom header and footer.

Your theme's own colour and font settings cover the parts of the store that are not built in the page builder, such as the built-in header and footer that show until you have a header or footer template.

Homepage title, description and sharing image

Your homepage's search listing and sharing image are set in two places that hold the same values:

• Storefront, then Preferences: the Homepage SEO and Social sharing image cards. You pick the image from your media library.
• Settings, then SEO: the Homepage SEO card, where the image is a web address you paste in. See Setting up SEO for your store.

Whichever you save last wins. The homepage listing comes from these two places, not from the SEO group in the page builder. Every other page sets its own listing in its editor under Search engine listing.

Custom code

There are three places for your own code. Pick by how far it should reach:

• Whole storefront, CSS: the Custom CSS box in the Custom Code group of the builder's Settings tab.
• Whole storefront, scripts: Custom Scripts under Settings, then Customer Tracking. You choose the placement and can switch a script off without deleting it. See Customising checkout and adding tracking.
• One page: a Code element on that page, for an embed or a widget. See Adding custom code.

Warning: Code in any of these places runs on your live store. A broken script can stop pages loading, so only add code you trust.

Related guides

• Changing your store's colours and fonts
• Setting up your store details
• Setting your storefront preferences
• Choosing and activating a theme