How to apply your brand: logo, colours and type
Last checked against Splash 1.0.0 / 2026-08-15
Splash carries your brand through four small groups of global settings: a logo and favicon, two typefaces, one page width, and eight colours. The eight colours are the part worth reading twice, because every hairline, grey and link in the store is mixed from them.
All of it lives in one place. Open Online Store, then Themes, then Customize, then click Theme settings at the foot of the sidebar. The groups below are Brand, Typography, Layout and Colors. Every setting on this page is global: it applies to every template at once, and there is no per-page override.
The logo#
Theme settings, then Brand, then Logo. Any aspect ratio is accepted. Around 300px wide is the recommended shape.
Upload a file at least twice as wide as you intend to display it. The header asks Shopify for the logo at up to 600px wide so it stays sharp on a high-density screen, and Shopify cannot invent detail that is not in the file you uploaded.
Logo width is a slider from 60 to 300px, default 140px. It sets the logo in the header and in the footer's brand column at the same time. There is no separate footer control.
The header caps the width
The logo never draws wider than 40% of the window, and never wider than 32% below 750px. On a phone a 300px setting will not draw at 300px. This is what keeps the logo, the search mark and the cart mark on one row at 320px.
Only the width is set
Height follows your file's own proportions. A square or tall logo at 140px wide makes the header row 140px tall and pushes the whole page down. A wide logo keeps the row at its natural height.
Alt text is automatic
The theme names the logo with your store name. You do not need to set alt text on the file.
With no logo uploaded#
The header and the footer both print your store name as a wordmark: bold, uppercase, widely letterspaced, in your primary typeface. It is a finished state rather than a broken one, and a store can open this way. On very narrow phones the header wordmark scales down so the row still fits.
Note The uppercase is a visual treatment only. Screen readers still announce your store name with its own capitalisation.
The favicon#
Theme settings, then Brand, then Favicon. The theme requests it at 32 x 32, so upload a square image. A mark with fine detail will not survive 32 pixels; the shipped demo icon is four strokes for that reason.
It appears on every storefront page, the password page included. That matters for a store that has not opened yet, because the password page is the only page anyone can see.
Left empty, the theme emits no icon tag at all. The browser then asks for /favicon.ico, which Shopify does not serve, so the tab shows a blank sheet and your browser console logs a 404. If you are chasing that 404 in a speed report, this setting is the cause.
Note Splash ships the favicon empty on purpose, so a new store does not inherit the demo store's mark. Shopify's image resizer preserves a transparent background, so a transparent PNG works and will sit correctly on both light and dark browser themes.
The two typefaces#
Theme settings, then Typography. Two pickers, both drawing on Shopify's own font library.
Primary, default Nunito Sans
Everything readable: headings, body copy, buttons, labels, navigation, form fields.
Secondary, default IBM Plex Mono
Data only. It is a signal that a value could have been printed by a machine, and it never reaches a heading or a sentence.
What the secondary font actually sets#
Changing it changes the look of nearly every figure in the store. It is not a decorative slot. The theme sets it on:
- prices, everywhere, including compare-at prices and unit prices
- SKUs on product cards, on the product page, in the cart and in search results
- specification values, and the figures beside the spec bars
- stock counts, including the figure inside the stock badge on a product card, and the count on the header cart mark
- product counts beside collections, filters and mega menu links
- certification reference numbers in the certifications band
- the job detail line under each testimonial
- opening hours on the contact page
- page numbers in pagination, and the numbers on FAQ items and numbered process steps
- the chosen variant on a cart line
- the footer copyright line and the store address
- the code on the 404 page
NumberandDateform fields, as the customer types into them
A monospaced face is what this slot is designed for. The theme asks for tabular figures wherever it prints data, so a column of prices does not shift width as the digits change, and most monospaced families provide them.
Note Splash draws headings at weights 600 and 700, and buttons and labels at 500. If the primary family you pick does not carry those weights, the browser falls back to the nearest weight it has and the difference between a heading and a paragraph flattens. Check a product page after changing the primary font, not only the home page.
How wide the store runs#
Theme settings, then Layout.
| Page width | Content and margins fit inside |
|---|---|
| Standard (default) | 1200px |
| Wide | 1440px |
| Extra wide | 1760px |
Page margin is a slider from 10 to 100px, default 24px. It is the smallest gap the theme leaves between your content and the edge of the window, and it sits inside the page width above. At the Standard width with the default margin, the content column is 1152px and the two 24px margins make up the rest.
Both settings do a second job that is easy to miss. Two sections work out how wide a picture will really be drawn, in pixels, from Page width and Page margin, and then ask Shopify for a file that size: the category tiles and the quote band picture. Widen the store and both start requesting larger files on their own. You do not need to re-upload anything, and you do not end up serving a 1200px file into a 615px box.
Product card images are the exception, and they are the pictures you see most. Every card asks for a share of the window rather than a share of your page width, so the collection grid and the featured products row request the same file whatever you set here. Widening the page does widen a featured products card, since the card box is worked out from Page width, but the picture inside it does not change what it asks for.
Limit Seven bands run the full width of the window by design and ignore the page width: the announcement bar, the header ground, the home page hero with its claims row, the featured products band, the testimonials band, the certifications band and the footer ground. Their contents still line up inside the page width.
The colours#
Theme settings, then Colors. Eight colours and one corner radius.
| Setting | Default | Where it lands |
|---|---|---|
| Background | #F5F7F8 |
The page ground behind every section, and the ground that every mixed grey is blended into. |
| Foreground | #0F151A |
Body text on the page ground, and the ink that every hairline, rule, muted grey and field border is mixed from. |
| Card background | #FFFFFF |
Product cards, panels, dialogs, the sticky header bar and the footer. |
| Card text | #0F151A |
Text on those raised surfaces. |
| Accent | #0E7C76 |
Filled buttons, the focus ring on every control, the first stroke of the ruler mark that opens each section heading, and the colour body links are mixed from. |
| Accent text | #FFFFFF |
The label printed on a filled accent button. |
| Band background | #0F151A |
The announcement bar, the home page hero band and its claims row, the hero's secondary button, and the testimonials section. |
| Band text | #F5F7F8 |
Text and rules on those dark grounds. |
These eight are not the only colours in the store#
Splash does not store a hairline colour, a grey text colour or a link colour anywhere. It mixes them from the eight above, every time the page is drawn, so a recolour stays coherent instead of leaving stray teal behind. Mixed from your settings:
- every hairline and rule, including the grid rules on the category tiles and the specification table
- muted secondary text: SKU lines, captions, counts, help text under form fields
- form field borders, which are a separate and darker mix than a decorative hairline
- the sunken fill behind product photography, and the deeper fill a ghost button takes when pressed
- the faint accent tint behind quote panels, and the hairline that bounds them
- the focus ring, which is your Accent
- body link colour, and the deepened accent a button takes on hover and on press
- the band's own rules and muted text, mixed from Band text into Band background
Three consequences follow from that, and each of them surprises somebody.
Foreground is more than your body text
Set it to a mid-grey and every rule in the store lightens with it, every muted line goes paler, and your body copy moves too. It is the single setting most likely to push text under a contrast requirement. Change it in small steps and look at a product page after each one.
A light Band background inverts three places at once
The announcement bar, the home page hero band and the testimonials section all take the band pair. Change one and you have changed all three, so Band text has to move with it. The footer is not one of them: it sits on Card background.
The link colour is not the Accent colour
Body links are mixed one step deeper, toward your Foreground, so they stay readable on a light ground after a recolour. The accent as it appears on the dark band is a further, lighter mix, carried toward Band text. There is no link colour setting, and picking one by eye off the Accent swatch will not match what renders.
What you cannot recolour#
Two things are deliberately fixed. Stock status colours (in stock, low stock, sold out) are set by the theme and are not merchant settings, so a shopper reads the same green and the same red on every Splash store. Card corners are fixed at 4px.
Input corner radius is a slider from 0 to 4px, default 2px. It rounds form fields and buttons together. It stops at 4px because Splash has no pills anywhere, and the ceiling cannot be raised from the theme editor.
Check a recolour on four surfaces#
The shipped palette is measured against contrast requirements before it ships. Your own palette is yours to check, and four screens will find nearly everything.
- A product card in a collection grid. Card background against the page ground, the hairline that separates them, the muted SKU line, and the stock badge.
- The dark band. Open the home page and look at the announcement bar and the testimonials section. Band text on Band background, and the lifted accent on the announcement icons.
- A form field. The quote page or the contact page. A field border is held to a stricter standard than a decorative rule, so this is where a pale Foreground shows up first.
- A filled button. Accent text on Accent. Nothing else in the theme mixes that pair, so nothing else will warn you if it is illegible.
Requires A contrast checker, outside the theme editor. Any browser developer tool or accessibility extension will do. The bar is 4.5:1 for body text and 3:1 for the boundary of a control. If you plan to publish the store's accessibility score, measure before you publish, not after.
What is next#
- Theme settings reference gives the full definition of every global setting, including the groups this page does not cover.
- Replace the demo content lists the pool-industry copy and figures that ship with the theme and need your own values.
- Announcement bar, footer and cart covers the bar's own colour overrides, which fall back to your band colours when left empty.
- Set up the home page covers the hero photograph and the testimonials section, which are where the band colours are most visible.
Something wrong here If a step does not match what you see, say so and it gets fixed. Documentation goes stale, which is why the line under the title carries a date.