Collapsible Content Section Documentation

Row Content vs. Page: Each row supports two content sources — the Row content rich text field and a linked Shopify Page. Using a Page is recommended for long or frequently updated content (e.g. a full return policy) since it can be edited from the Pages section of Shopify Admin without opening the theme editor. If both are filled in, both will display inside the expanded row, one after the other.

Layout — Row vs. Section: The Row layout gives each accordion item its own visible card, which works well when rows contain varied content and you want clear visual separation. The Section layout wraps all rows in one large card, which looks cleaner when rows are closely related (like a standard FAQ list). No container is the most minimal option and works best when the section color scheme already provides enough visual context.

Container Color Scheme Visibility: The Container color scheme setting only has a visible effect when Layout is set to Row or Section. When Layout is set to No container, this setting is ignored entirely — changing it will have no effect on the storefront.

Open First Row by Default: This is useful for FAQ sections where you want the most common question pre-answered without any interaction, reducing friction for customers. Use it sparingly — if multiple rows are relevant to most visitors, keeping them all collapsed encourages exploration.

Image Layout on Mobile: When an image is added, the two-column layout collapses to a single column on mobile. The image stacks above the accordion list regardless of the Desktop image position setting.

Narrow Column Without Image: When no image is set, the accordion list renders in a narrow centered column. This is intentional design — it keeps the accordion readable and well-proportioned on wide screens. Adding an image expands the section to full page width.

Icon Usage Tips: Icons work best when they are semantically meaningful for the row content. For example, use the Truck icon for shipping rows, Return for returns policy, Ruler for sizing guides, and Check mark for general FAQ rows. Avoid using different icons that look similar in small sizes — clarity matters more than variety.

Page Content Formatting: When linking a Page as the row content, the page's full HTML content is rendered inside the accordion. Format the page content carefully in the Shopify Pages editor since all headings, lists, and links will appear inside the narrow accordion panel.