How to set up the home page

Last checked against Splash 1.0.0 / 2026-08-15

The Splash home page is six sections, each one built entirely from merchant settings. This page works through them in the order they ship, with the settings each one carries and the photograph each one needs.

Open the theme editor from Shopify admin, then Online Store, then Themes, then Customize. The home page is the template that loads first. Every section below can be reordered, hidden or removed.

The home page you inherit arrives populated with the demo store's words, including six invented customer quotes and four invented certification numbers. Those become your live storefront until you edit them. Replace the demo content covers what to clear first.

Masthead#

One photograph fills the screen under the header. From 1024px up the heading, tagline and buttons sit in white directly on the left of that photograph, with no tint, no scrim and no overlay panel. Below 1024px the type moves onto a dark band above the picture. On phones and upright tablets the photograph fills the first screen with the type set in the middle of it.

The words#

A button with a label and no link, or a link and no label, does not render at all. If a button is missing from the storefront, that pair is the first thing to check.

The three photographs#

The masthead takes three separate image slots. This is not one file served at three sizes. A phone frame and a tablet frame crop a portrait file on opposite axes, so the same file changes its composition, not only its sharpness, between the two.

Requires Upload all three to Shopify admin, then Content, then Files before you open the section. The image pickers read from Files.

What happens when a slot is empty:

• Phone image blank. Phones show no photograph. The heading, tagline and buttons sit on a dark band on their own. This is a supported arrangement, not a fault.
• Tablet image blank. Upright tablets use the phone file, with a more conservative crop that keeps more of the frame in view.
• Desktop image blank but a phone or tablet image set. That portrait file stands in on wide screens rather than leaving a placeholder next to a real photograph. It will be cropped hard.
• All three blank. Wide screens draw the dashed empty slot reading Outdoor pool, luxury imagery panel with the pixel size beneath it. Phones show the type on the band.
• Tablet image set but Phone image blank. Upright phones fall back to the tablet file, which is composed for a shorter frame. Set the phone image whenever you set the tablet one.

Limit There is no overlay, scrim or text shadow, and no setting adds one. If your photograph is bright where the type sits, the heading becomes unreadable and the only fix is a different photograph. The failure is visible in the editor, so check the hero at a wide window and on a phone preview before you publish.

The claims row#

Add Highlight blocks to the masthead, up to four. They form the row along the foot of the photograph.

From 1024px up the row sits transparent on the dark foot of the photograph. Between 750px and 1023px it sits on a solid band under the picture. Below 750px it is hidden entirely, and it is hidden on tablets held upright as well, where the photograph fills the screen with the type on it. It is a wide-screen element, so do not put anything essential there alone. The announcement bar is the place for a claim that has to reach a phone.

A block with an icon but no heading is skipped on the storefront. In the theme editor it still shows a cell reading No heading yet, so you can see which block is unfinished.

Collection index#

The category directory. It has two forms, and one checkbox decides which.

Photographs for the tiles#

A tile reads the collection's own image, set in Shopify admin under Products, then Collections, then the collection, then Image. It never falls back to the first product's photograph, because a studio shot on white cannot carry white type.

Upload at 1200 x 1500px, 4:5 portrait, with the subject centred left to right. Wide screens crop a tenth off the top and a tenth off the foot; phones show the file whole. Keep anything that identifies the category out of the top tenth and the bottom tenth.

A collection with no image still draws a tile at the same size, with the dashed empty slot inside it reading Category photograph and the pixel size. The row keeps one shape.

Collection blocks#

Add a Collection block per category, up to eight. Each block carries:

A block with a Title but no Collection still renders. A block with neither is skipped on the storefront and shown as an unfinished cell in the editor.

The data hint#

The hint is what makes this a comparison rather than a directory: one specification that separates a category from the ones beside it. Filling in Hint value replaces the product count on that tile.

Limit On tiles narrower than 176px the Hint label is dropped and only the value remains. That happens when Mobile layout is Stacked and Columns on mobile is 2, which gives a phone a tile of roughly 130 to 165px. The default swipe row keeps every tile well clear of the threshold and shows the label. Write a value that stands on its own either way: 26-160 GPM reads alone; 4-6 does not. On those narrow tiles the line holds about 13 characters, rising to about 18 at 390px, so 13 is the length that never wraps.

The demo tiles carry no labels at all for exactly this reason. Their values are Shell or kit, 4-6 seats, 26-160 GPM, Up to 60 ft, 12 V supply and Teak, alloy. Each states its own unit.

The rest of the section#

Note With no Collection blocks, the section lists your collections automatically and alphabetically, and it does not skip collections that hold no products. Shopify's automatic "Home page" collection can appear there. Add explicit blocks to control the row.

Layout#

Where the desktop count takes effect depends on the form. With images on, the tiles are a swipe row up to 1200px and the column count applies from 1200px up. With images off, the ruled directory uses the desktop count from 750px, and from 600px on any window wider than three fifths of its height. It never becomes a swipe row.

Featured products#

A row of product cards. The cards are the same ones the collection pages draw, so anything you change under Theme settings for product cards shows here too. See collection and search pages for the card itself and show your specifications for the spec rows.

Note This row is a horizontal swipe track at every screen width, desktop included. It never wraps to a second row, so raising Products to show makes the row longer, not the page taller. At 1200px and above, four full cards and a slice of a fifth are visible.

If the chosen collection holds fewer products than four, the cards stretch to fill the width rather than leaving a gap at the end. The slider itself will not go below 4.

Testimonials#

A ruled ledger of customer quotes on a dark band. Add a Quote block per testimonial, up to six.

The Details line is what the section is for. It turns a soft claim into something with a referent, in the same face the specification tables and certification references use. A quote with a name but no Quote text is invisible on the storefront; the editor marks it Add the quote to complete this row.

The column count follows the number of quotes, so a row is never left short. One quote reads as a paragraph. Two and four take two columns. Three and six take three. Five leaves one deliberately empty cell so the ruled table still closes. Below 750px the quotes become a swipe row, one at a time.

Limit There are no star ratings and no field to enter one, and the section emits no review structured data. A rating you type in is not something a search engine should be told is a verified customer rating. What Splash never invents explains the rule this follows.

Quote request#

A photograph beside a tinted panel, for work you scope rather than sell from a cart. This is the section that points shoppers at the quote flow. Why quote requests covers the flow itself.

The section renders as soon as it has a heading, an image or a complete button, and it has a heading by default. On a fresh install you will see the panel with its default copy beside a dashed empty image slot. The button is the part that stays hidden until both its label and its link are filled in.

Note This button's link is a separate setting from Theme settings, then Quote requests, then Quote request page, which is what quote-only products use. The two can point at different pages. Set both, and set them to the same page unless you mean them to differ. See the theme settings reference.

Requires A page in Shopify admin, under Content, then Pages, with the theme template set to quote. The demo uses the handle quote-request. Without it the button points nowhere. Build the quote request form covers the page.

Certifications#

A strip of credentials, each a flat card carrying a mark, what it covers, and a number a visitor can look up. Add a Mark block per credential, up to eight. The cards sit one across on a phone, two from 600px and four from 990px.

Note A card needs a Name, a Caption or a Reference number to appear. An uploaded logo on its own is treated as an unfinished block and skipped on the storefront. If a mark is missing from your live page, that is why.

Caption and Reference number are different fields doing different jobs. The Caption says what the credential covers; the number goes in Reference number. Putting the number in both prints it twice, once in the wrong face.

Only turn Show verified badge on for a credential you hold and can evidence, and pair it with a Link where you can. The word Verified beside an unlinked number asks a visitor to take your word for it.

Reordering and hiding sections#

All six sections carry a preset, so any of them can be added, moved or removed from the home page's section list in the theme editor. Drag to reorder. Use the eye icon to hide a section without losing its content, which is the safer move while you are still writing.

Two things are fixed and worth knowing before you go looking for a control:

• The FAQ set renders below every section on the page. It lives in its own group, so it does not appear in the home page's section list and cannot be dragged above the certifications. See add FAQs.
• The wording of "All categories" and "View all N items" is not a section setting. Change it in Shopify admin under Content, then Themes, then Edit default theme content.

Empty image slots are not blank grey boxes. Each one draws a dashed panel naming its subject and the exact pixel size wanted, and those panels are visible to shoppers, not only in the theme editor. Fill every slot before you publish, or hide the section that carries it.

For the full definition of every setting on these sections, see the section and block reference. For the settings that apply store-wide, see the theme settings reference.

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.