Customizing Your Branding

Storefront gives you several built-in tools to make your store look like yours: your logo, your colours, your homepage content, and your favicon. Here's a quick overview of what you can customize and where each element appears, followed by step-by-step instructions for each.

All of these live on the Branding & Content page in Storefront Settings, under Storefront Website. To reach it, open the store menu in the top-right corner and select Storefront Settings, then Branding & Content. None require any code.

For advanced appearance customization, such as custom fonts, overriding specific CSS styles, or matching a detailed existing brand, see Adding Custom Code.

Logo

Your logo appears in the header at the top of every page of your customer-facing storefront, and is also used in automated emails sent to your customers (order confirmations, welcome emails, and so on). It's the primary brand signal for your store.

To upload your logo:

1. Log in to Storefront Manager.
2. Open the store menu in the top-right corner, select Storefront Settings, then Branding & Content.
3. Under Logo, click Upload image, select your file, and click Save.

Logo requirements:

• Formats: PNG or JPEG
• Maximum file size: 2MB
• Recommended: use a PNG with a transparent background so it looks clean on any background colour

If no logo is uploaded, Storefront displays your store name as text in the header.

Brand colour

Your brand colour is applied as the accent colour across your storefront. It controls the colour of primary buttons (like the domain search button and the Add to Cart button), links, and other interactive highlights throughout the customer experience. Choosing a colour that matches your brand makes the store feel cohesive.

To set your brand colour:

1. Go to the Branding & Content page.
2. Under Brand colour, enter a hex colour code (e.g. #1a56db) or use the colour picker to select a colour.
3. Click Save.

The default brand colour is #0264FF (blue). Changes apply immediately to your live storefront.

Use a colour with enough contrast against white backgrounds so buttons and links remain readable. Tools like WebAIM's contrast checker can help you verify your choice meets accessibility standards.

Homepage content

The homepage content section lets you add a hero section to your storefront's homepage: a heading, a short description, and an image that appears above the domain search bar. This is your storefront's front window and a good place to explain what you offer or reinforce your brand.

To add or update homepage content:

1. Go to the Branding & Content page.
2. Open the Homepage Content editor. It opens in its own page.
3. Enter your Heading (e.g. "Find your perfect domain name").
4. Enter a Description (a sentence or two about your store or services).
5. Click Upload image to add a hero image.
6. Click Save.

If you leave these fields empty, the homepage shows the default Storefront content.

Domain transfer section image

On the Branding & Content page, open the Domain Transfer Content editor, which also opens in its own page. There you can upload a separate image that appears on your storefront's domain transfer page. This is optional but lets you maintain consistent branding throughout the transfer flow.

Click Upload image under the domain transfer section and save.

Favicon

A favicon is the small icon that appears in browser tabs, bookmarks, and browser history when someone visits your storefront. It's a small detail that makes your store look polished and helps customers recognize they're in the right place.

To upload a favicon:

1. Go to the Branding & Content page.
2. Under Favicon, click Upload image, select your file, and click Save.

Favicon requirements:

• Formats: PNG or JPEG
• Maximum dimensions: 512 × 512 px
• Recommended: square image, PNG format with transparent background
• Browsers scale favicons down to 16 to 32px for display, so keep the design simple and recognizable at small sizes

If no favicon is uploaded, browsers use a default icon.

Branding across the customer experience

The logged-in customer domain management portal uses your logo and brand colour, but the layout and interface are standard Storefront, so you can't replace the header or footer there through these settings. For deeper integration with an existing website, see Adding Custom Code.

Questions? Contact OpenSRS Support.