Set up Splash on a new store

Last checked against Splash 1.0.0 / 2026-08-15

Splash installs already populated. The home page, the announcement bar, the mega menu panels, the footer wording and three sets of FAQs all arrive filled in with the demo store's copy, so setting up the theme is an editing job rather than a building job.

Work through the steps in order. Each one ends with something you can see on the storefront. Where a step needs more than a few paragraphs, it links to the page that covers it in full.

Note The demo content ships inside the theme, not alongside it. Until you edit it, the certification reference numbers, the customer quotes and the shipping figures on your storefront are the demo store's. Step 9 lists every one of them.

1. Open the theme and get your bearings#

In Shopify admin, go to Online Store > Themes, find Splash, and choose Customize. Three parts of that screen matter.

Your home page arrives with six sections in this order: Masthead, Collection index, Featured products, Testimonials, Quote request, Certifications. You can reorder or hide any of them, and hiding is the eye icon rather than a checkbox.

The Header group holds two sections: Announcement bar and Header. The Announcement bar cannot be added or deleted from the Add section list, because it only works inside the Header group. Hide it with the eye icon if you do not want it.

2. Upload your logo and favicon#

This is the fastest visible change. Open Theme settings > Brand.

Colours and fonts also live in Theme settings, and the defaults are the ones the design was measured against. Logo, colours and type covers what is safe to change and what the contrast depends on.

3. Replace the three hero photographs#

Open the Home page template and select the Masthead section. It carries a heading, a tagline, two buttons and three image slots.

The heading is set in white directly on the photograph from 1024px up. There is no tint, no scrim and no overlay, so readability comes from the picture. A photograph with a bright left half produces an unreadable heading and no setting fixes it: the fix is a different photograph.

Upload the files in Content > Files first, or upload from the image picker in the section. Three separate compositions are needed rather than one file at three sizes, because a phone frame and a tablet frame crop a portrait file on opposite axes, so the composition changes and not only the sharpness.

Leave Phone image blank and phones show no photograph at all, only type on a dark band. Set a small-screen image and no desktop one, and the small-screen file stands in on wide screens rather than leaving a placeholder there.

Note Empty image slots in Splash are not blank grey boxes. They draw a dashed panel naming the subject and the exact pixel size wanted, and shoppers see it, not only the editor. An unfilled hero reads "Outdoor pool, luxury imagery panel 2560 x 1440px" on your live home page.

Then edit the words: Heading (blank uses your store name), Tagline, and the two buttons, each of which needs both a label and a link before it draws. Under the picture sit up to four Highlight blocks, one claim each, with a heading, optional text and an icon. That row of claims is hidden on every phone, whether or not you set a phone photograph. It is hidden on tablets held upright as well once a phone or tablet photograph is set, where the photograph and the heading take the whole first screen.

The home page covers every section on it.

4. Build your navigation menus#

This happens in Shopify admin > Content > Menus, not in the theme editor. Five menus matter.

The main menu#

The header points at the menu with the handle main-menu by default. Depth is what makes a mega menu by default.

• A top-level item with no children draws a flat link.
• Two levels draw a simple dropdown.
• Three levels draw a multi-column panel: the second level becomes the column headings, the third becomes the links inside them.

That is what the Layout setting calls Automatic, and it is how every top-level item behaves until you attach a Mega menu block to it. A block's Layout setting overrides depth in both directions: Columns opens a two-level item as a multi-column panel, and Simple list keeps a three-level one as a plain dropdown.

Point third-level items at collections rather than pages or typed URLs if you want product counts beside them. Counts are read live from the collection, and a link to anything else shows no count. They are drawn in the multi-column panel only, so an item you have forced to Simple list carries none.

The footer menu#

The footer points at the menu with the handle footer. Each top-level item becomes a column heading and its children become the links in that column. A top-level item with no children draws as a lone unlabelled link, which is what a column that appears to have lost its heading actually is.

Popular searches#

The header ships pointing at a menu with the handle popular-searches. Its items appear under the search field until a shopper types two characters. Point them at search results such as /search?q=pool+pumps, or at collections. Without the menu the search panel opens with only the field.

The customer account menu#

The header's Customer account menu setting defaults to the handle customer-account-main-menu. It is what a signed-in customer sees under the account icon.

Requires The account icon is not drawn at all while customer accounts are off. Turn them on in Shopify admin > Settings > Customer accounts, choosing any option other than "Don't use accounts". Below 1040px the icon moves rather than disappears: it becomes a labelled Account row at the foot of the navigation drawer.

The desktop navigation row appears at 1040px and wider. Below that the hamburger drawer takes over, which is a wider threshold than most themes use, so a small laptop window can show the drawer.

Navigation and mega menus covers featured panels, layout overrides and counts.

5. Give your collections images, and point the product row somewhere#

The Collection index section on the home page ships as photo tiles, six of them, each pointing at a collection handle from the demo store. On your store those handles resolve to nothing, and the section removes itself from the storefront until at least one block points at a collection you actually have. It stays visible in the theme editor so you can fix it.

Open the section, and for each Collection block pick one of your own collections. Then give that collection an image in Shopify admin > Products > Collections > (the collection) > Image.

Note The tiles read the collection's own image, or the Image field on the Collection block if you want to front a category with different art without touching the collection. They never fall back to the first product's photograph, because a studio shot on white is unreadable under the white category name. A collection with neither keeps its tile but draws the dashed empty-slot panel.

Upload 1200 x 1500px (4:5 portrait), with the subject centred. The category name is set over the bottom of the frame, so keep anything that identifies the category out of the top tenth and the bottom tenth.

Each tile can also carry one specification in place of the product count, in its Hint value field. Keep it to about 13 characters and write it so it stands alone: a value that needs its label to make sense loses that label on the narrowest phones.

Then select the Featured products section and point its Collection setting at a real collection. Left empty it falls back to every product in the store, in no meaningful order. The row is a horizontal swipe track at every screen width, so raising Products to show makes the row longer rather than the page taller.

6. Define your specification metafields#

Splash is built to publish measurements, and it reads them from product metafields. Nothing is invented: a specification you have not defined and filled in is not drawn at all.

Go to Shopify admin > Settings > Custom data > Products > Add definition. Leave the definition readable by your storefront so the theme can read it. The theme ships pointing at three definitions that exist on the demo store and will not exist on yours:

Either create definitions with exactly those namespaces and keys, or open Theme settings > Product specs and change the three settings to namespace and key pairs you already use. Then fill values in on your products, and turn on Show specifications on product cards in the same group if you want the rows on cards. It is off by default.

The product template's Specification table and Spec bars blocks ship pointing at the same three keys, but they hold their own copies of them. Changing Theme settings > Product specs leaves both blocks pointing where they were, so repoint them separately on the Products template or they will draw nothing. A spec bar needs a value that begins with a number: 80 GPM fills the bar to 80, Variable drops it.

Four more definitions are worth creating now rather than discovering later:

If you use a review app, put the metafields it writes into Theme settings > SEO and structured data > Ratings. Both the rating value and the rating count must be filled before either is used, and the scale must be out of 5. The theme will not display a rating typed in by hand.

Specifications covers the tables, the bars and the card rows in full.

7. Set up the quote request flow#

High-ticket work in Splash is quoted, not carted. Four things have to line up.

1. Create the page. Online Store > Pages > Add page. Set its URL handle to quote-request under Search engine listing > Edit.
2. Assign the template. In the page's Theme template dropdown choose quote. That template is what puts the branching request form on the page. A page left on the Default template shows its body text and no form at all.
3. Confirm the setting. Theme settings > Quote requests > Quote request page should now resolve to that page. The theme ships pointing at a page with the handle quote-request, so until it exists every quote button in the store lands on the home page instead, silently, with no broken link and no error.
4. Tag a product. Add the tag quote-only to one product in Shopify admin > Products > (the product) > Tags, then load its page. The price is replaced by "Price on request" and the add-to-cart button by a quote button.

The tag is matched whole and case-insensitively, so Quote-Only works and quote-only-legacy does not. You can change which tag is used, plus the button label and the small print under it, in Theme settings > Quote requests.

Requires Send a test request and confirm where it arrives. There is no theme setting for the destination: the form posts through Shopify's own contact form and goes to your store's contact address in Shopify admin. A perfectly built form sends its answers nowhere useful if that address is wrong or unmonitored.

Limit The request does not know which product the shopper came from. Every quote button in the store is a plain link to one page, with no product name attached. If you need to know which service was being viewed, add a dropdown to the form and ask.

See Why quote requests exist, Make a product quote only and Build the quote form.

8. Install Search & Discovery and add filters#

Requires Storefront filters come from Shopify's free Search & Discovery app, not from the theme. Install it, then open Apps > Search & Discovery > Filters and add filters such as Availability, Price or Product type.

Until you do, collection and search pages have no filter rail at all, and phones get no Filter cell in the bar at the foot of the screen. Sort still works either way. The theme draws whatever filters the store has configured, in the order the app sets.

The same app is where complementary product relationships are set. The product template ships with a Complementary recommendations section, and it shows nothing at all until pairings exist for that product. Related recommendations need no setup: Shopify chooses them.

Collection and search pages covers the rail, the phone bar and the grid.

9. Replace the demo values before you launch#

These are real, published, customer-facing values that arrived with the theme. Each one is either a claim about your business or a link to a page you do not have.

Replace the demo content is the full checklist, item by item.

10. Set up the store-level things the theme depends on#

Several parts of the footer and cart draw from Shopify settings rather than theme settings, and they correctly show nothing until those are in place.

While you are in Theme settings, decide whether the cart opens as a drawer or as a page (Theme settings > Cart). Drawer is the default. Announcement bar, footer and cart covers the rest.

11. Finishing touches#

Blog and content pages covers articles, pages and the 404.

You now have#

• Your own logo, favicon and colours.
• A home page hero that reads on desktop, tablet and phone.
• Working navigation, including at least one mega menu.
• Category tiles pointing at your collections, with your photographs on them.
• Specifications defined, filled in and visible on product pages.
• A quote request page that receives requests you have tested.
• Filters on collection and search pages.
• No invented claims left on your storefront.

From here: Theme settings reference lists every store-wide setting, and Section and block reference lists every section and what it can hold. If a value you expected is missing from the page rather than wrong, Why Splash shows nothing rather than a guess explains the rule behind it. For anything else, get in touch.

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.