Background

The Background section allows merchants to design a custom background layer for specific sections of their store (such as promotional banners, feature blocks, or product showcases).

This layout setting helps to visually separate content areas, emphasize key sections, and maintain consistent design across devices.

Location: Sections -> Templates -> Layout → Background

---

Layout: Background – Options Overview

Option	Description
Width	Defines how wide the section layout should appear on the page. Options include: Default – Uses the theme’s standard content width. Boxed – Restricts content within a narrower, centered layout. Wide – Expands the section to fill larger screen widths (recommended for 1440px and above).
Desktop top padding	Adjusts the space above the content when viewed on desktop. Use the slider or enter a custom percentage to increase or reduce spacing.
Desktop bottom padding	Adjusts the space below the content on desktop devices. Useful for separating sections vertically.
Tablet top padding	Controls the space above the section content specifically for tablet viewports.
Tablet bottom padding	Controls the space below the section content for tablet viewports.
Mobile top padding	Defines the vertical spacing above the section content on mobile devices. Helps maintain visual balance on smaller screens.
Mobile bottom padding	Defines the space below the section content on mobile viewports. Ensures proper breathing room on mobile layouts.
Background	Determines what type of background is applied to the section. Options: • Hide – No background. • Color – Use a solid background color. • Gradient – Apply a color gradient. • Image – Use a custom image as background.
Color	Visible only when Background = Color. Lets you choose or enter a color value for the section background.
Width (Background)	Controls how wide the background element extends: • Fullwidth – Background spans the entire browser width. • Content width – Background is limited to the content container.