Blog post

Featured links

1. Company XYZ documentation on product sniffer settings
2. Shopify documentation on sections and blocks
3. Company XYZ documentation on section padding settings
4. Company XYZ documentation on section backgrounds settings
5. Company XYZ documentation on separators settings
6. Company XYZ documentation on layout widths settings

Helpful videos

Shopify Academy video: Customizing your store

Shopify Academy video: Customizing your store

This section displays the full article and lets you fine-tune how it reads on the page. For the broader theme-editor workflow, see Shopify documentation on sections and blocks. It also includes an optional product sniffer feature that detects product links in the article, shows matching products in a sidebar, and adds inline product-card hover behavior to those links.

Core settings

Use the main settings to decide whether linked products should appear alongside the article. The sidebar only appears when product detection is enabled and the article contains matching product links.

The sidebar heading is best used as a contextual label rather than a generic title. If your articles follow specific formats like buying guides, tutorials, or gift edits, tailor the heading so the sidebar feels connected to the content.

Tip

If you want the product area to feel helpful instead of promotional, link products naturally inside the article where they support the reader’s next step.

Color settings

This section-specific color control lets you override the text color for the article area. It is most useful when you add a custom background or need different contrast than the rest of the page.

Because this section is built for long-form reading, choose text colors for comfort first. Subtle brand colors can work for accents, but body text should stay easy to read across the full article.

Check text contrast after changing colors, especially if you also use background images, gradients, or overlays.

Standard section settings

Padding settings

Padding settings control the space above and below the article content. Use them to create a quieter reading experience or to tighten the layout when the article sits between other prominent sections.

Desktop and mobile spacing can be adjusted separately. This is useful when generous desktop spacing feels too tall on smaller screens.

Section background settings

Section background settings let you add a color, gradient, image, or video behind the article. These options can give editorial pages more atmosphere, but they should still support comfortable reading.

Overlay controls help preserve legibility when you use image or video backgrounds. Mobile-specific background media is especially useful when desktop artwork crops poorly or feels too busy on smaller screens.

Caution

Strong background media can make articles feel harder to read or visually cramped. Preview both desktop and mobile before using image or video-heavy treatments on content-first pages.

Separator settings

Separator settings add a line at the top or bottom of the section. Use them when the article needs a clearer boundary from surrounding content.

If you do not want a custom separator color, leaving it transparent allows the section to fall back to the theme’s border color. This keeps the separation subtle and consistent.

Width settings

Width settings control both the maximum width of the article content and the width of the section wrapper. For most articles, content width has the biggest impact on readability.

Narrower content widths are usually easier to scan for long-form text, while wider layouts can work better for image-heavy or editorial-style posts. Section width matters most when you are also using a background and want it to extend beyond the content area.

Usage notes

1. Write with product links in mind. The sidebar and inline product behavior depend on product links in the article, so add them where they genuinely support the topic.
2. Expect the layout to shift with blocks. Adding blocks can change how much of the section is driven by the article itself versus the block content, so recheck the balance after you build out the page.
3. Prioritize readable widths. For text-heavy posts, use a content width that keeps line lengths comfortable rather than stretching the article too wide.
4. Use styling to support the article. Custom text color, backgrounds, and separators should frame the content without competing with it.
5. Review mobile presentation. Check spacing, background cropping, and text contrast on smaller screens so the article remains easy to read.
6. Compare editor and live views. Preview behavior can differ from the published page, so confirm layout, alignment, and media choices on the final page before relying on them.