Multipurpose theme documentation
Multipurpose Fashion Theme
Advanced Accordion
Multipurpose Fashion Theme
Theme: Multipurpose Fashion Theme
Help Center > Sections & Blocks > Info & Trust Sections > Advanced Accordion
Overview
The Advanced accordion section provides flexible expandable content blocks. Unlike the FAQs section (which uses Question blocks), this section supports HTML, Link, and Text blocks for custom content. Use it for product details (materials, care), policy summaries, size guides, or any expandable content that doesn't fit the simple Q&A format.
Where to Add This Section
- Go to Online Store > Themes > Customize.
- Select Product page, Page, or desired template.
- Click Add section.
- Choose Advanced accordion.
- Save.
📷 Image placeholder: Add a screenshot of Advanced accordion section with expanded block.
Quick Setup (3 Steps)
- Add blocks — Add HTML, Link, or Text blocks.
- Add content — Enter heading and content for each block.
- Configure — Set layout, initial open state, and styling.
Section Settings
| Setting | Description |
|---|---|
| Heading | Section title |
| Blocks per row | Desktop columns (1, 2, 3) |
| Two mobile | 2 columns on mobile |
| Initial open | First block open by default |
| Disable accordion | Show all content expanded (no collapse) |
| Custom CSS | Scoped styles |
Blocks
| Block | Description |
|---|---|
| HTML | Custom HTML content (rich formatting) |
| Link | Link with optional description |
| Text | Plain text block |
Block structure
Each block typically has a heading (clickable to expand/collapse) and content (shown when expanded).
Step-by-Step Setup
Step 1: Add the section
Add Advanced accordion to a product page, page template, or homepage.
Step 2: Add blocks
- Click Add block.
- Choose Text, Link, or HTML depending on content type.
-
For each block:
- Text — Add heading and body text (e.g. "Materials & Care", "100% organic cotton. Machine wash cold.").
- Link — Add heading and URL (e.g. "Size guide", link to size chart page).
- HTML — Add heading and custom HTML (tables, lists, embedded content).
- Add multiple blocks; drag to reorder.
Step 3: Configure section
- Heading — Section title (e.g. "Product details").
- Blocks per row — 1, 2, or 3 columns on desktop.
- Two mobile — Enable for 2-column layout on mobile.
- Initial open — First block expanded by default.
- Disable accordion — Enable to show all content expanded (no collapse).
- Save.
Accessibility
The Advanced Accordion section is designed with accessibility in mind. It supports both keyboard and screen reader users:
-
ARIA attributes: The section uses
aria-expanded,aria-controls, andaria-hiddento ensure that users with screen readers can interact with the accordion effectively. -
Keyboard navigation: Users can navigate the accordion with
the
Enter,Space, and arrow keys.
Use Cases
- Product details — Materials, care instructions, dimensions
- Policy summaries — Shipping, returns, warranty (link to full policy)
- Size guides — Expandable size charts or links to size guide page
- Custom expandable content — Any collapsible content beyond Q&A
Advanced Accordion vs FAQs
| Feature | FAQs Section | Advanced Accordion |
|---|---|---|
| Block types | Question (Q&A) | HTML, Link, Text |
| Best for | Simple Q&A | Rich content, links, custom HTML |
| Format | Question + answer | Heading + content |
Use FAQs when you have standard questions and answers. Use Advanced accordion when you need links, HTML tables, or more flexible formatting.
For merchants
- Use for product-specific content (materials, care).
- Link to full policy pages instead of duplicating long text.
- Keep headings clear and scannable.
- Consider Disable accordion if you want all content visible without clicking.
Common Mistakes
| Mistake | Fix |
|---|---|
| No blocks added | Add Text, Link, or HTML blocks |
| Empty content | Enter content in each block |
| Too much in one block | Split into multiple blocks for scannability |
| HTML block unsafe | Avoid user-generated HTML; use trusted content only |
FAQs
The Advanced Accordion section is a flexible expandable content block that allows merchants to create accordion-style collapsible content on their store. It supports multiple block types such as HTML, Text, and Links, making it highly versatile.
To add content, go to the theme customizer, select the Advanced Accordion section, and add blocks. You can choose from Text, Link, or HTML blocks depending on your content type.
Yes, you can specify how many blocks to show per row using the Blocks per row setting. You can choose from 1, 2, or 3 columns for desktop, and it automatically adjusts for mobile.
The Initial open feature allows you to specify whether the first block in the accordion is expanded by default when the page loads. This is controlled by a checkbox setting in the theme customizer.
You can customize the appearance of the accordion section using CSS. You can also add custom CSS for the section in the theme settings to tailor its look to your brand’s style.
To add a link with an arrow indicator, use the Link block type. You can specify the link URL, the link label, and whether to show the arrow indicator next to the link.
If you disable the accordion feature using the Disable accordion setting, all content will be expanded by default, and the toggle functionality will be hidden, meaning there will be no collapsible behavior.
Yes, you can control how many blocks appear per row on mobile devices. You can set it to 1 or 2 columns on mobile via the Two mobile setting.
To add custom HTML content, select the HTML block type and enter your HTML code. You can use this block to display rich content such as tables, embedded videos, or custom lists.
The FAQs section is specifically designed for simple Q&A format, while the Advanced Accordion section allows for more flexible content types such as HTML, links, and text, making it suitable for more diverse uses beyond FAQs.
FAQs vs Advanced Accordion
FAQs — Simple Q&A (question + answer). Advanced Accordion — Rich content (HTML, links). Use FAQs for support questions; use Accordion for product details, size guides. FAQs documentation