Colors theme settings
The Colors theme settings set the three color sets of Split, for the header, the body and the sidebars, and the opacity of the grid borders.
Applies to: Split 5.1.0 and later. Added in: Split 1.0.0. Last checked: 2026-10-13 against Split 5.1.0.
Split has three color sets: one for the header, one for the body of the page and one for the drawers (Split calls them sidebars). Each set has a background and a text color. The thin lines that divide the split-screen grid take the text color, at the opacity you set.
Where to find it: Theme settings → Colors
Header colors
- Background and Text paint the Header section: its background, the logo text, the menu links, the icons and the classic menu dropdowns.
- Borders opacity sets the line under the header and around the dropdowns, from 0 (no line) to 100 (solid text color).
- The Announcement bar has its own colors in its section settings. See Announcement bar section.
Body colors
- Background and Text are the colors of every page below the header.
- Borders opacity sets the 1 px lines around every box of the split-screen grid: between sections, between the two halves of a section and between product tiles. The lines take the body Text color. Set it to 0 to hide the lines.
See How Split is built for the boxes the lines divide.
Sidebar colors
Background and Text under Sidebar paint every drawer that slides in from the side:
- the menu drawer (the menu icon in the header),
- the cart drawer (when Theme settings → Cart → Cart type is Drawer),
- the search drawer,
- the filter drawer on collection and search pages,
- the store pickup drawer on the product page.
Buttons, form fields and lines inside the drawers are drawn from the sidebar Text color. See Drawers.
Why do sections have their own colors?
Many sections have their own color settings, for example the Announcement bar, Rich text and the Footer. A custom color replaces the body color in that section only. Leave a custom color transparent (the default) to use the colors from Theme settings → Colors.
Can I set different colors for the footer?
Yes. The Footer section has its own Custom colors (Background and Text); left transparent, it uses the body colors. See Footer group.
All Colors settings
Every setting in this group, with its type and default.
Colors theme settings: Header
Where to find it: Theme settings → Colors → Header
Background (color, default: #ffffff): Sets the background of the Header section and of the classic menu dropdowns. The Announcement bar has its own colors.
Text (color, default: #000000): Sets the color of the header logo text, menu links and icons.
Borders opacity (slider 0 to 100 %, default: 10 %): Sets the opacity of the line under the header and around the menu dropdowns, drawn in the header text color. 0 hides the line.
Colors theme settings: Body
Where to find it: Theme settings → Colors → Body
Background (color, default: #ffffff).
Text (color, default: #000000).
Borders opacity (slider 0 to 100 %, default: 10 %): Sets the opacity of the 1 px lines between sections, between the two halves of a section and between product tiles, drawn in the body text color. 0 hides the lines.
Colors theme settings: Sidebar
Where to find it: Theme settings → Colors → Sidebar
Background (color, default: #ffffff): Sets the background of every drawer: menu, cart, search, filters and store pickup.
Text (color, default: #000000): Sets the text color of every drawer; buttons, fields and lines inside the drawers are drawn from it.
Related pages
- Drawers: the five drawers the Sidebar colors paint.
- How Split is built: the split-screen grid the borders divide.
- Header section: the section the Header colors paint.
- Typography theme settings: fonts and button corners.
Looker preset
The Looker preset of Split: its colors, fonts and the templates it installs, such as the landing page and product pages with a slider.
Typography theme settings
The Typography theme settings choose the heading and body fonts of Split, their base sizes and line heights, and the corner radius of buttons.