Comments

Featured links

1. Company XYZ documentation on the comments section
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 visibility settings
7. Company XYZ documentation on layout widths settings

Helpful videos

Shopify Academy video: Customizing your store

Shopify Academy video: Customizing your store

Use this section to show comments below an article and style the discussion area so it fits the rest of the page. It works best when comments are already enabled for the blog; the setup steps are included in the theme’s Comments reference. For a broader overview of how section content is organized in the theme editor, see Shopify documentation on sections and blocks

Core settings

The main section-specific settings control the comment action button. Choose a style that matches how prominent you want the form action to feel, from quieter plain treatments to stronger primary or secondary styles.

On mobile, the full-width button option can make the form easier to tap and easier to spot at the end of a long article. This is especially helpful when the comments area uses a narrower content width or when smaller button styles are used elsewhere on the page.

If comments are not enabled for the blog, this section will not create an active comments area by itself.

Standard section settings

Padding settings

Padding settings control the space above and below the comments area. Increase padding when comments need a clearer break from the article body, and reduce it when separators or background styling already provide enough separation.

Section background settings

Section background settings let you place comments on a color, gradient, image, or video background. This can help separate discussion from the article content, but it is usually best to keep the treatment subtle so longer comment threads remain easy to read.

Blank or transparent values usually preserve the theme’s fallback styling, while explicit colors, gradients, and media choices make the comments area feel more independent. If you use background images or video, review both desktop and mobile because separate media choices can change cropping, loading, and readability.

Gradient settings override solid color settings, and overlay gradients override overlay colors. If you use background images or video, check both desktop and mobile because mobile can inherit the main media unless you assign a separate mobile version.

Caution

Strong or busy backgrounds can make comment text, names, and form fields harder to read. Use overlays and contrast carefully.

Separator settings

Separator settings add a line at the top or bottom of the section. They are a simple way to divide the comments area from the article without adding more padding or a full background treatment.

If you leave the separator color transparent, the section uses the theme’s border color. That is often the easiest way to keep the divider consistent with the rest of the page.

Visibility settings

Visibility settings control whether the section appears on desktop, mobile, or both. This is useful when you want a simpler mobile article layout or a different page structure across devices.

Hide the section carefully, since removing comments on one device can make the article experience feel inconsistent. If you choose device-specific visibility, preview the full article page on both screen sizes.

Width settings

Width settings control both the maximum width of the comments content and the width of the section wrapper. For discussion-heavy pages, a moderate content width is usually easier to read than a very wide layout.

Section width matters most when you use a background, since it changes how far that background extends around the comments area. The editor can make width changes look different from the live page, so it is worth previewing the final result on the storefront.

Usage notes

1. Enable comments first. Confirm the blog allows comments before you spend time styling this section.
2. Review both device layouts. Desktop and mobile controls can produce different alignment, visibility, and media behavior, so check the comments area on both screen sizes.
3. Make mobile actions easy to tap. Use the full-width mobile button when the form feels cramped or easy to miss on smaller screens.
4. Protect readability. Keep backgrounds, overlays, and separator choices subtle enough that long comment threads stay easy to scan.
5. Use width for comfort. A moderate content width usually improves readability for replies and longer comment text.
6. Preview the full article flow. After changing spacing, visibility, or backgrounds, check how naturally the comments area connects to the article above it.