You can customize any section on your website to match your style - adjust how it displays, change the background (color, patterns, images, or video), add visual effects, and create smooth transitions between sections using shape dividers.
To edit a section:
- Go to the section you want to change.
- Click the gear icon on the section.
- Choose one of the available tabs: Settings, Background, or Shape Dividers (options vary by layout).
Section Settings
The Settings tab controls how the section looks and behaves.
Note: Available settings depend on the page type and selected layout.
Common settings
- Show/Hide Section Title
Show or hide the section title.
- Number of Items in a Row
Choose how many items appear per row.
Available only on pages with inner items and certain layouts.
- Layout Box Color
Set the background color of the text box.
Available only on layouts that include a text box.
- Mobile Display
Control how the section appears on mobile.
Available only on pages with inner items and certain layouts.
Homepage and Promo page settings
Homepage and Promo pages include additional section-specific options:
- Text Position
Choose where the text appears (direction/alignment).
- Minimum Height
Set the section height (30%–100%).
- Image Width
Control how an image is displayed.
Available only on certain layouts.
- Image Animation (Parallax)
Add a scroll animation to the background image.
Available only on certain layouts.
- Box Style
Add a border to the text box.
Available only on layouts with text boxes.
Section Background
The Background tab lets you style the section background using a color, pattern, image, or video.
Note: Background options are available only on specific layouts.
Background color (brush icon)
Use the brush icon to choose a background color for the section.
Patterns (grid icon)
Use the grid icon to add a pattern, then customize it:
- Layout Background Color
Changes the background color underneath the pattern.
- Color Theme
Sets the pattern color style:- Primary: variations of your website’s primary colors
- Contrast: a contrasting variation of the primary color
- Mono: a single-color pattern
- Shape Opacity
Controls how transparent the pattern elements are.
- Animate + Animation Speed
Turn on pattern animation and adjust its speed.
Background image (image icon)
Use the image icon to add a background image from the library or upload your own, then adjust:
- Opacity
Controls image transparency.
- Effect
Choose how the image appears: Regular, Blurry, or Artistic Black & White.
- Parallax
Adds a scroll animation to the background image.
Available only when using the Cover image style.
- Style
Choose how the image fills the section:- Cover: fills the section
- Duplicate: repeats the image across the background
- Contained: places the image within a specific area
- Position
Sets where the image appears.
Available only for Duplicate and Contained styles.
- Text Color
Sets the text color for that section (useful for readability over images).
Background video (video camera icon)
Use the video camera icon to add a video from the library or upload your own, then adjust:
- Opacity
- Effect: Regular, Blurry, or Artistic Black & White
- Text Color
Shape Dividers Between Sections
Use Shape Dividers to create a smooth, styled transition between sections.
- Open the section’s gear icon menu.
- Go to Shape Dividers.
- Choose a divider style.
- Use the Height slider to adjust its size.
The divider is added to the bottom of the selected section. For a more complete visual flow, you can also add a divider to the section above.
Note
Section settings, background design, and shape dividers are not currently available for the E-commerce Store.
