Settings every section shares
Almost every section in Sublime has the same Spacing group and a Color scheme picker, and many also share settings for full width, heading size and buttons. They work the same everywhere, so they're explained once here instead of in every article.
Spacing
Spacing is the empty space above and below a section's content, inside the section's own background. Use it to give a section more room or to bring two sections closer together. Every section with a Spacing group has these five settings:
| Desktop top spacing | The space above the section's content on desktop, from 0 to 200 px in steps of 4 px. |
| Desktop bottom spacing | The space below the section's content on desktop, from 0 to 200 px in steps of 4 px. |
| Enable mobile spacing controls | Off by default: phones and small tablets reuse the desktop values. Switch it on to set separate spacing for mobile. |
| Mobile top spacing | The space above the section's content on mobile, from 0 to 200 px in steps of 4 px. Only appears when Enable mobile spacing controls is on. |
| Mobile bottom spacing | The space below the section's content on mobile, from 0 to 200 px in steps of 4 px. Only appears when Enable mobile spacing controls is on. |
Desktop values apply at 768 px wide and above. Below that, the mobile values apply if mobile controls are on, and the desktop values if they're off. Switching mobile controls off again keeps the mobile values you entered, so you can switch back without losing them.
Tip: A gap that looks generous on desktop can feel empty on a phone. Turn on Enable mobile spacing controls and use roughly two-thirds of the desktop value. The mobile sliders start at 40 px for that reason.
Two sections with the same color scheme: When two sections next to each other use the same scheme, the space between them is the first section's bottom spacing plus the second section's top spacing. Lower one of them to tighten the gap.
Color scheme
Sections don't have their own color pickers for background, text and buttons. Instead, each one picks a Color scheme: a named set of colors defined once in Theme settings → Colors. Change a scheme there and every section using it updates. Some sections also have a separate scheme for their cards (for example Card color scheme), so cards can stand out from the section background.
Tip: Alternate between two schemes (say, white and a light tint) as you go down the homepage. It separates sections without needing extra spacing or dividers.
Enable full width
By default, section content stops at the maximum page width set in Theme settings → Layout and stays centered on wide screens. Sections with Enable full width, such as media banners and media with text, can stretch edge to edge instead. When it's off, the media is usually boxed, with rounded corners from Theme settings → Border radius.
Heading size
Heading size changes how big a heading looks, using the sizes set in Theme settings → Typography, so headings stay consistent across your store. Default keeps the size the section was designed with (or the heading level you picked in the text editor). H1 to H6 make it look like that heading level. It only changes the visual size, not the heading's structure, so it doesn't affect SEO. Some sections also have an Item heading size for the headings on their cards or items.
Heading, description and caption
Many sections open with an optional Caption (a small line above the heading), a Heading and a Description. Leave any of them empty and it's left out, with no gap left behind. Text alignment sets whether they sit on the left, center or right.
Buttons
Sections and blocks with a button share the same settings:
| Button label | The text on the button. Leave it empty to hide the button. |
| Button link | Where the button goes: a product, collection, page or any web address. |
| Button style | Primary, Secondary or Tertiary. Each style's colors, shape and borders are set once in Theme settings → Buttons and the section's color scheme, so every button of that style matches. |
| Button icon | An optional arrow or chevron shown next to the label. Choose None for text only. |
| Open link in new tab | Opens the link in a new browser tab. Keep it off for links inside your store, and use it for external sites so shoppers don't lose their place. |
Tip: Use Primary for the one action you most want shoppers to take in each section, and Secondary or Tertiary for everything else.
Custom CSS for one section
Shopify adds a Custom CSS field at the bottom of every section's settings. Styles you add there only affect that one section. For changes across the whole store, use Theme settings → Custom CSS. Both are saved with your theme settings, so they're kept when you update Sublime.
Heads up: Custom CSS relies on the theme's class names, which can change between versions. After an update, check that your custom styles still look right.
Sections without these settings
The Custom section has no spacing or color scheme of its own, because its layout comes entirely from the blocks you add. The Announcement bar and the pop-ups and drawers in the overlay group don't have a Spacing group either.
My mobile spacing changes aren't doing anything
The mobile sliders only take effect when Enable mobile spacing controls is on. Also check that you're previewing in the mobile view (or on a screen narrower than 768 px). Desktop values apply above that width.
There's still a gap between two sections set to 0 spacing
Some sections have spacing built into their layout, such as the gap between a heading and a product grid, or rounded boxed media. Try Enable full width where it's offered, or check whether the next section has its own top spacing.
Changing a color scheme changed other sections too
That's expected. A scheme is shared by every section that uses it. To change one section on its own, create or edit a different scheme in Theme settings → Colors and pick that one for the section.