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 are in Settings → General or Settings → Custom Content in Storefront Manager. None require any code.

For advanced appearance customization — 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. Navigate to Settings → General.
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. Log in to Storefront Manager.
2. Navigate to Settings → General.
3. Under Brand colour, enter a hex colour code (e.g. #1a56db) or use the colour picker to select a colour.
4. 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.

Custom content (homepage)

The Custom 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 custom content:

1. Log in to Storefront Manager.
2. Navigate to Settings → Custom Content.
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 same Custom Content page, you can also 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. Log in to Storefront Manager.
2. Navigate to Settings → General.
3. 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–32px for display — 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 — 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.

Was this article helpful? If not please submit a request here