Success
Accordion
Organize FAQs and extra details in expandable panels with optional media and buttons.
Use this block to organize longer information into collapsible panels that are easier to scan. It is a practical choice for FAQs, shipping details, care instructions, policies, or any supporting content that should stay available without taking over the page. For a broader overview of theme content structure, see Shopify documentation on sections and blocks
You can write content directly in the block or connect it to an existing page or blog post. See the Accordion guide.
Core settings
Section titled “Core settings”Start with the heading and content. The heading is the clickable label customers see first, so keep it short and specific, while the content area is best for the answer, explanation, or supporting details.
You can choose to show the accordion open by default. This works well when one item is especially important, but using it too often makes the block feel less compact.
The block can also pull content from a blog post or page. This is useful when you want to reuse longer content elsewhere, and you can optionally show the excerpt instead of the full body when a shorter preview is enough. For help with excerpts, see Excerpts.
If both a page and a blog post are assigned, the page takes priority.
Heading and actions
Section titled “Heading and actions”You can add an inline icon beside the heading to give the accordion item more visual character or to help differentiate topics. Keep icon choices consistent across related items so the block feels intentional rather than decorative. For icon setup, see Icons.
If the accordion is connected to external content, you can automatically show a link to that content. You can also add your own button text, link, icon, and style when you want a more deliberate call to action.
Choose a button style that matches the importance of the action. More prominent styles work best when the link is a real next step, while smaller or plainer styles suit secondary reading paths. Full-width mobile buttons can help when tapping ease matters more than visual subtlety.
Imagery settings
Section titled “Imagery settings”You can add optional media to change the look and feel of the accordion content. Media can appear above or below the text, depending on whether it should lead the message or support it afterward.
Use an image when you want a simple visual enhancement, or use video when motion helps explain the content better. If you add a video service link, use the video URL rather than embed code.
A poster image is especially helpful for hosted video because it gives the block a cleaner first frame before playback starts. Aspect ratio settings help you control how media fits the layout, and the separate mobile ratio is useful when a crop that works on desktop feels too tall, too narrow, or too tight on smaller screens.
Autoplay and looping are usually best for short, ambient clips rather than essential spoken content. If customers need to hear or control the video, keep controls available and test the expanded state on smaller screens. For more guidance, see Using video.
Standard block settings
Section titled “Standard block settings”Visibility settings
Section titled “Visibility settings”Use visibility controls to show the block on all devices or hide it on desktop or mobile. This is helpful when you want different accordion content, wording, or media choices for smaller screens. See Visibility settings.
Usage notes
Section titled “Usage notes”- Keep headings clear. Write headings as specific questions or topics so customers can quickly choose the right item to open.
- Use one content source. Enter text directly for short custom content, or connect a page or blog post for reusable content, but avoid relying on both at once.
- Open sparingly. Use the open-by-default option for a priority item only, especially when several accordion blocks appear together.
- Add media with purpose. Choose images or video only when they improve understanding, and review the expanded layout on both desktop and mobile before publishing.
- Make actions meaningful. Show a button or content link only when customers genuinely benefit from going to a fuller destination.
- Expect fallback styling. Leaving colors or other visual values at their default can preserve the surrounding look, while explicit overrides make the accordion feel more independent from the rest of the page.