Accordion

Featured links

1. Shopify documentation on sections and blocks
2. Company XYZ documentation on dynamic content settings
3. Shopify documentation on customizing sections
4. Company XYZ documentation on the accordion block
5. Company XYZ documentation on headers settings
6. Company XYZ documentation on section padding settings
7. Company XYZ documentation on section backgrounds settings
8. Company XYZ documentation on separators settings
9. Company XYZ documentation on visibility settings
10. 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 group FAQs, policies, product details, or other long answers into stacked expandable rows. You can build the content manually with Row blocks, pull entries from a blog, or combine both when you want a mix of curated and automatically updated content.

For a broader overview of section behavior in the theme editor, see Shopify documentation on sections and blocks

Core settings

The main section controls shape how the accordion sits within the page. Content position changes the layout of the expandable content area, and the sticky options can keep the section header or interface visible while visitors scroll through longer lists.

Left or right positioning usually works best when you want the section to feel structured alongside its intro content. Full width is a better fit when the accordion itself is the main focus and the page needs a simpler, more spacious layout.

Tip

Enable sticky behavior when the section includes many rows or especially long answers. For short accordions, a simpler non-sticky setup often feels cleaner.

Dynamic content

This group lets you populate the accordion automatically from a blog. See the Company XYZ documentation on dynamic content settings.

For general setup in the theme editor, see Shopify documentation on customizing sections

Choose a blog when you want the section to update as content is added over time. You can narrow the results with a tag, control how many items appear, and sort the list by title or publish date to match the way visitors are most likely to browse it.

Use Show excerpt when full entries would make each row too long. Show link to content is helpful when the accordion should act as a preview, with the full article or page available as the next step.

Tag filtering only works when a blog is selected. If no blog is chosen, the section depends on the Row blocks you add manually.

Color settings

These controls override the default text colors for this section. They are most useful when the accordion sits on a custom background or needs stronger contrast than the surrounding page.

Adjust icon, text, and subheading colors together so the section still feels cohesive. If you use a background image, gradient, or video, check readability carefully before publishing.

Supported block types

1. Row

Row

A Row block creates one collapsible accordion item. It can use custom rich text, pull content from a blog post or page, and optionally include a button, image, or video. Learn more in the Company XYZ documentation on the Row block.

If both a blog post and a page are assigned, the page takes priority. Use Show open by default sparingly so the section stays compact and easy to scan.

Show excerpt works well when sourced content is too long for an accordion panel. The optional button is a good fit when a row should preview the content first and link to a fuller resource second.

Imagery settings

Each Row can include an image or video to make expanded content more useful or engaging. This is especially helpful for setup guidance, feature explanations, care instructions, or other answers that benefit from a visual reference.

Top placement gives the media more emphasis, while bottom placement keeps the written answer first. For video, a poster image usually gives the row a more polished look before playback begins.

Caution

Too many media-heavy rows can make the section feel crowded and slower to browse, especially on mobile. Add imagery only where it improves understanding.

Visibility settings

Each Row also has its own visibility control. Use it when certain answers or media treatments should appear only on mobile or only on desktop.

Standard section settings

Header settings

Use the shared header controls to add an intro with a caption, heading, subheading, icon, and optional button. See the Company XYZ documentation on header settings.

A clear heading helps visitors understand what the accordion covers before they open any rows. If you add a button, keep it focused on one logical next action, such as visiting a help page or related resource.

Padding settings

Use the shared padding controls to adjust spacing above and below the section. See the Company XYZ documentation on padding settings.

Smaller padding helps the accordion sit closely with related content. Larger padding works better when it needs to stand out as its own information section.

Section background settings

Use the shared background controls to add a color, gradient, image, or video behind the section. See the Company XYZ documentation on section background settings.

Background treatments can give the accordion more presence, but they also affect readability. When using media backgrounds, review text contrast, overlay strength, and how dense the section feels once rows are expanded.

Separator settings

Use the shared separator controls to add a line above or below the section. See the Company XYZ documentation on separator settings.

Separators are useful when the accordion sits between other content-heavy sections and needs a subtle visual boundary. Keep them simple if the row structure already provides enough separation.

Visibility settings

Use the shared visibility controls to show or hide the entire section by device. See the Company XYZ documentation on visibility settings.

This is useful when you want a different information layout on mobile and desktop. If you hide the section on one device, make sure the same content is still available elsewhere.

Width settings

Use the shared width controls to manage both the section wrapper and the content area inside it. See the Company XYZ documentation on width settings.

Narrower content widths are often easier to read when answers are long. Wider settings can work well for short entries or rows that include more visual content, but it is worth previewing the result on the live storefront.

Usage notes

1. Choose a clear content source. Use blog-driven content for FAQs that change often, and manual Row blocks for evergreen answers or richer custom layouts.
2. Write scannable row titles. Clear question-style or topic-based headings help visitors find the right answer without opening multiple rows.
3. Keep expanded content focused. Use excerpts, buttons, and links when full source content would make the accordion feel too long or dense.
4. Limit default-open rows. Open only the most important item by default so the section keeps its compact accordion behavior.
5. Review mobile readability. Check sticky behavior, media, spacing, and contrast together on smaller screens before publishing.
6. Compare both viewport sizes. Review desktop and mobile layouts separately when you use positioning, visibility, or media options, because the accordion can present differently on each screen size.
7. Use overrides deliberately. Leave colors and media at their default or blank values when you want the section to inherit surrounding styling; add explicit colors, gradients, or separate media only when you want the accordion to stand apart.