How to set up the announcement bar, footer and cart
Last checked against Splash 1.0.0 / 2026-08-15
Three pieces of furniture appear on every page of the store: the announcement ribbon above the header, the footer below the content, and the cart. This page covers all three, including the settings that are not where you would expect them.
The announcement bar#
The bar is the dark ribbon across the very top of the window, above the header. It carries short factual claims, and optionally a couple of links pinned to the right.
Open the theme editor. The Header group sits at the top of the section list on every template, and Announcement bar is the first section inside it. Its settings and its messages are all in that one place.
Write a message#
Each message is a block. Click Add block, choose Announcement, and fill it in. Drag blocks to reorder them. You can have up to 12.
| Setting | What it does |
|---|---|
Message |
The words of the claim, for example Free delivery over. This is the only required field. |
Figure |
A short measured value printed after the message in the monospace register and at full strength, so it separates from the wording: $500, 10 yr, 2 days. |
Icon |
A small line mark in front of the message. Twelve to choose from: None, Verified, Shipping, Returns, Warranty, Clock, Secure payment, Box, Wrench, Phone, Email, Location. |
Link |
Turns the whole message into a link. Leave it empty and the message is plain text. |
Placement |
Scrolling messages, left, or Pinned links, right. See below. |
Show on |
All devices, Desktop only, or Mobile only. Mobile means a window narrower than 750px. |
A block with an empty Message is skipped entirely. It does not matter that you filled in a figure, an icon and a link: with no message, nothing is drawn. If a claim you have written will not appear, check the Message field first.
If you remove every block, the bar renders nothing at all and the header moves to the top of the window.
Placement: scrolling left, pinned right#
The bar has two runs, and Placement decides which one a block joins.
Scrolling messages, left
Your claims. They are separated by a middle dot, and they are the ones that travel when they run out of room.
Pinned links, right
A short run at the end of the bar. No dots between them, and they never move. Use them for things like a trade program page or an order tracking link.
Limit Pinned right-hand items are hidden below 1040px, which is where the navigation becomes a drawer. A block set to Pinned links, right and Mobile only at the same time is never visible on any screen.
A pinned link that points at a page you have deleted, or never created, does not disappear. It renders as plain non-clickable text. The shipped demo content includes a Trade program link pointing at a page with the handle trade-program, so either create that page or change the link. See replacing the demo content.
Make it scroll, or stop it#
Under Scrolling:
Scroll the messages
Three choices. Only when they do not fit is the default: the theme measures your actual wording against the space it has, so the same bar usually stands still on a desktop and travels on a phone. Always keeps it moving at every width. Never stops it everywhere.
Scrolling speed
How far the run travels each second, 15 to 150px/s. The default is 45, which is a comfortable reading pace. Higher is faster.
Because the decision is measured rather than tied to a screen width, editing your messages changes the answer. Shorten them and the bar may stop moving on a phone; lengthen them and it may start moving on a laptop.
Three things about the movement are worth knowing before you turn it on:
- There is no pause button and no close button for the shopper. Once it starts, it runs. Keep the messages short.
- A visitor whose device asks for reduced motion never sees the bar move, whatever this setting says.
- Moving keyboard focus into the run pauses it, so a link inside it can be read and followed. A mouse passing over the bar does not pause it.
Colors, type and spacing#
| Setting | Range | Default |
|---|---|---|
Bar background |
Color | Empty |
Message text |
Color | Empty |
Icons |
Color | Empty |
Text size |
10 to 18px | 12px |
Uppercase |
On or off | Off |
Bar height |
28 to 72px | 34px |
Space between messages |
8 to 64px | 18px |
An empty color is not black. The three color fields are overrides. Left empty, the bar follows the band colors in Theme settings, so recoloring the band moves the bar with it. Bar background follows Band background, Message text follows Band text, and Icons follow the theme's accent color, adjusted so it reads against the band. Clearing a field you have set puts the theme's own color back. See applying your brand.
Uppercase restyles the letters only. The wording you typed is unchanged, and a screen reader still announces it as written.
Bar height moves the whole page down. The header is pinned below the bar, so raising the height pushes the header and everything under it down with it.
Space between messages also sets the space either side of the separator dot, so the two stay in proportion.
Hide the bar#
There is no show or hide checkbox. Use the eye icon on the Announcement bar section in the theme editor's section list. That leaves the section and all your messages in place, ready to switch back on.
Limit Do not remove the section. The announcement bar has no preset, so it does not appear in the theme editor's Add section list and cannot be added back once it is gone. Hiding it with the eye icon is the safe way to take it off the store.
What a narrow screen drops#
When the messages are standing still and there is not enough room for them, the bar quietly shows fewer. This applies when scrolling is set to Never, when the visitor's device asks for reduced motion, and when JavaScript is unavailable.
- Below 600px, the third message and everything after it is hidden.
- Below 480px, the second message and everything after it is hidden.
A travelling run is not affected: it states every message you wrote. Put the claim you care most about first.
The footer#
The Footer group sits at the bottom of the section list on every template. It has one section, Footer, with all of its settings in one panel. Some of what appears in the footer is controlled from elsewhere, which is covered below.
The brand column#
The first column carries your logo, or your store name set as a wordmark if no logo is uploaded, followed by an optional line of text and then the social icons.
The logo comes from Theme settings, then Brand, and is shared with the header. The footer setting is only the text under it: Footer, then Brand, then Text. One or two sentences, about 25 words at most. Leave it empty and nothing is drawn there.
Social icons#
The icons in the brand column come from Theme settings, then Structured data, then Social profiles. There are seven fields: Instagram, Facebook, X, YouTube, TikTok, LinkedIn and Pinterest.
There are no checkboxes. An icon appears because its URL field is filled and disappears because it is empty. Fill three fields and you get three icons. Empty them all and the row is not drawn at all.
The same URLs are also declared to search engines as your store's official profiles, which is why they live in the Structured data group rather than in the footer's own settings.
A bare domain works
Typing instagram.com/yourstore is accepted. The theme adds https:// so it resolves off-site rather than as a path inside your store.
A single # is a legitimate placeholder
Type # to see an icon in place while the account is still being set up. It is drawn in the footer but withheld from what the theme tells search engines, so you are never claiming to own a profile that does not exist.
The order is fixed
Instagram, Facebook, X, YouTube, TikTok, LinkedIn, Pinterest, always in that sequence. It cannot be rearranged.
Note The icons wrap onto a second line when the brand column is too narrow to hold them all, which a full set of seven can do on smaller screens. A shorter set stays on one line.
The link columns#
The columns between the brand block and the newsletter come from a navigation menu. Set it in Footer, then Menu. The default is the menu with the handle footer.
Each top-level item in that menu becomes one column:
- A top-level item with child items draws its name as the column heading and its children as the list beneath.
- A top-level item with no children draws a single bare link in its own column, with no heading above it.
If a column looks like it has lost its heading, that item has no child links under it in Shopify admin. Go to Content, then Menus, and nest the links.
Requires A menu built in Shopify admin under Content, then Menus. Without one, the footer shows only the brand column and the newsletter column.
The newsletter#
Under Footer, then Newsletter:
Heading
The line above the email field. Blanking it does not remove it: the word Newsletter prints instead.
Text
An optional sentence between the heading and the field. Leave it empty and the field sits directly under the heading.
Where the signups go. Every submission is saved in Shopify as a customer carrying the tag newsletter. Find them in Shopify admin under Customers, filtered by that tag. That tag is the only place they land, so any welcome email, discount or list sync has to be built on it.
The theme sends nothing. It collects the address and applies the tag. It does not create a discount code, and it does not send an email. The shipped demo heading reads Get 10% off your first order, which promises something the theme cannot deliver on its own. Either create the discount and the automation behind it, or change the heading.
Limit The newsletter column always renders. There is no setting that removes it.
The bottom row#
Under Footer, then Regional settings, three checkboxes, all on by default.
| Setting | What it draws | What it needs |
|---|---|---|
Show country and language selectors |
A country and currency picker, a language picker, and an Apply button, above the copyright line. | More than one country in Settings, then Markets, or more than one published language in Settings, then Languages. |
Show store address |
Your store address under the copyright line. | An address saved in your Shopify store settings. The theme reads it from there and has no field of its own. |
Show payment icons |
The card and wallet marks for the methods your store accepts, at the right of the copyright row. | A live payment provider in Settings, then Payments. |
The country and language checkbox can be on and still draw nothing. That is correct behavior on a store selling into one market in one language. The row that holds the selectors also holds Shopify's Follow on Shop button, and when neither has anything to show the whole row is removed rather than left as an empty band with a rule across it. This is why the footer normally ends on a single line above the copyright rather than two.
Empty payment icons are usually correct, not broken. The row lists what your store genuinely accepts. A store still on a test gateway, or with no provider enabled yet, correctly shows nothing. Enable a real provider and the marks appear.
The cart#
Drawer or page#
Open Theme settings, then Cart, then Cart type. Two options, and the default is Drawer.
Drawer
The header cart icon opens a side panel. Add to cart on a product page, in the quick view, and on an accessory row all add without leaving the page and then open the panel. Quantities can be changed and lines removed inside it. The panel carries a subtotal, a Checkout button and a View cart link.
Page
The drawer is removed from the store entirely. The cart icon goes to /cart, and every Add to cart submits and lands on the cart page.
A shopper with JavaScript unavailable gets the cart page either way. The cart icon is a real link to /cart underneath, and the product form posts normally.
Note The theme editor lists a Cart drawer entry. It has no settings of its own, and it renders nothing while Cart type is set to Page. Cart type in Theme settings is the only control over the drawer.
The cart page#
Open the theme editor, switch the template selector at the top to Cart, and select the Cart section. Two settings, both on by default.
Show dynamic checkout buttons
The accelerated checkout buttons under the main Checkout button: Shop Pay, PayPal, Google Pay and whatever else your store accepts. Turning it off leaves the standard Checkout button on its own. Nothing is drawn if your store has no accelerated methods enabled.
Show cart note field
An Order note box in the order summary, which the shopper can use to pass instructions with the order. The note reaches you on the order in Shopify admin.
Both settings apply to the cart page only. The empty cart draws a line and a Continue shopping button, with neither control.
Why the drawer has no accelerated checkout buttons#
This is deliberate. The drawer is present on every page of the store, including /cart. If it carried the accelerated buttons, a shopper standing on the cart page with the drawer open would be looking at two sets of the same Shop Pay and PayPal buttons in one document, which Shopify's own theme rules do not allow.
The buttons appear where they do the work: on the product page and on the cart page. The drawer's Checkout button goes to the same checkout.
Where the rest of the header lives#
The logo, the main navigation, the mega menus, the search panel and the account icon are all covered separately.
- Navigation and mega menus for the header row, the drawer, the search panel's popular searches list, and the menus you need to build in Shopify admin.
- Apply your brand for the logo, the favicon and the color tokens the announcement bar falls back to.
- Theme settings reference for the full definition of every setting named on this page.
- Section and block reference for what each section can hold and where it can be placed.
- Replace the demo content for the announcement claims, the footer brand line and the newsletter heading that ship with the theme already filled in.
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.