Section background settings

Featured links

1. Shopify documentation on sections and blocks
2. Company XYZ documentation on using video

Helpful videos

Shopify Academy video: Customizing your store

Shopify Academy video: Customizing your store

Use this settings group to control the background treatment behind a section’s content. For broader setup context, see Shopify documentation on sections and blocks. You can keep it simple with color, add depth with gradients, or use image and video backgrounds with overlays to create more visual impact while protecting readability.

Background style

Choose the lightest treatment that fits the role of the section.

1. Use a background color for clean, low-distraction sections.
2. Use a background gradient when you want more depth or brand styling.
3. Use a background image for photography, texture, or illustration.
4. Use a background video when motion clearly supports the message.

If a gradient is applied, it takes priority over the matching solid color setting.

If a background color or overlay color does not seem to update, check whether a gradient is set. Gradients override the equivalent solid color.

Overlay controls

Overlay settings help keep text, buttons, and other content readable over image or video backgrounds. You can use a solid overlay or a gradient overlay, then adjust opacity to balance clarity against how much of the media remains visible.

Lower opacity keeps more of the background visible. Higher opacity is usually better for sections with longer text, smaller type, or multiple actions.

Background media

Images are usually the safest way to add visual richness without making the page feel too busy. Video works best when the motion is subtle and supports the content rather than competing with it.

For video backgrounds, use short clips that still make sense without sound and do not rely on fine detail. For practical guidance, see Company XYZ documentation on best practices for video files.

Caution

Large or busy background media can make a section harder to scan, especially on mobile. If readability becomes inconsistent, simplify the media or strengthen the overlay.

Mobile-specific media

You can set separate mobile background images or videos when the desktop asset crops poorly or loses its focal point on smaller screens. If you leave the mobile-specific setting empty, the main background image or video is used instead.

Use a mobile-specific asset when the subject needs a different crop, when portrait composition works better, or when the desktop video feels too wide or visually dense on phones.

Practical setup choices

The best results usually come from pairing the background style with the content density of the section.

1. Choose color or gradient only for content-heavy sections where clarity matters most.
2. Choose image plus overlay for promotional or editorial sections that need more atmosphere.
3. Choose video plus overlay only when motion adds clear value and the section has enough space to show it well.
4. Add mobile-specific media only when the main asset creates a real cropping or readability problem.

Usage notes

1. Start simple. Begin with color or gradient before adding media, and only increase visual complexity when it improves the section’s message.
2. Check contrast early. Adjust the overlay before changing text styles so headings, body text, and buttons stay easy to read.
3. Review both viewports. Desktop and mobile controls can produce different cropping, alignment, visibility, and media behavior, so test both before publishing.
4. Expect fallback styling. Blank, transparent, or default-style values usually preserve the existing look, while explicit colors, gradients, or media overrides make the section more independent.
5. Use video selectively. Reserve motion backgrounds for high-impact areas instead of repeating them across many sections.
6. Preserve hierarchy. Strong background treatments attract attention, so use them where you want the section to stand out most.