Section styles

Sections are the basic components of templates. You can add, rearrange, and customize sections to create the layout and content of your pages.

Content area

Corner radius

Use the Corner radius settings to change the roundness of elements across your site — including images, inputs, buttons, drawers, and popups.

Corner radius settings apply to elements across your theme. Some sections and blocks have an option to toggle on or off the image corner radius.

Section styles

---

All sections include general style options for Colors and Spacing. In the editor side panel, click the section to find settings for Color scheme, Section width, and Section padding.

Color schemes

---

You can change the section or block colors by assigning a color scheme using the color scheme picker.

Click the section or block to find the Color scheme option.

A color scheme consists of a set of colors that you can use for sections throughout your store. Color schemes help you create consistent palettes.

Color scheme options

Overlay colors

---

When text appears over images or videos, an overlay color is used to provide contrast between the text and background, keeping it readable and accessible for everyone.

1

In the section or block settings, select a color scheme.

The overlay uses the color scheme's background color. If the color scheme has a background gradient, it will be used instead. Background gradients fade across a range of hues. Learn more in Shopify's color gradient guide.

2

Use the overlay opacity slider to make the tint more or less transparent.

Set the opacity to 0% to turn off the tint overlay.

Set the opacity to 100% to create solid color blocks or banners in sections

Click the section or block to find settings

Setting	Description	Options
Overlay opacity	Use the slider to change the transparency of the overlay. Set the opacity to 0% to turn off the overlay.	0 - 100 %

Section width

---

Change the Section width to adjust how far the section spans across the page. In the section settings, find Width options under Section.

• The page width has a fixed width of 1600px

• Other width options adapt to the visitor's browser width

Page width

Section background and content span the page width (1600px).

Full width (padded)

Section background spans the screen's full width with some padding, and content spans the width of the background.

Full width

Both section background and content span the screen's full width.

Section padding

---

Use the sliders to add space at the top and bottom of the section. Set to 0 to remove spacing.