Accordion
How to use the Accordion block in the Meditative Folks Theme.
Accordion
At a glance
Expandable title + content pair for FAQs and long copy.
Used in
- Configure where this block is available in the parent section.
Settings
General
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Title | Controls “Title” on the storefront. Open the theme editor to preview live. | Accordion title | Always |
| Icon | Controls “Icon” on the storefront. Open the theme editor to preview live. | none | Always |
| Icon size (mobile) | Controls “Icon size (mobile)” on the storefront. Open the theme editor to preview live. | 20 | An icon is selected |
| Icon size (tablet) | Controls “Icon size (tablet)” on the storefront. Open the theme editor to preview live. | 20 | An icon is selected |
| Icon size (desktop) | Controls “Icon size (desktop)” on the storefront. Open the theme editor to preview live. | 20 | An icon is selected |
| Use custom icon color | Controls “Use custom icon color” on the storefront. Open the theme editor to preview live. | No | An icon is selected |
| Icon color | Controls “Icon color” on the storefront. Open the theme editor to preview live. | #111111 | An icon is selected and Use custom icon color is on |
| Closed icon | Icon shown when the accordion is collapsed. | plus | Always |
| Open icon | Icon shown when the accordion is expanded. | minus | Always |
| Content source | Controls “Content source” on the storefront. Open the theme editor to preview live. | richtext | Always |
| Content | Controls “Content” on the storefront. Open the theme editor to preview live. | Accordion content | content source == 'richtext' |
| Custom Liquid | Add app snippets or other Liquid code to create advanced customizations. | — | content source == 'liquid' |
| Open by default | Controls “Open by default” on the storefront. Open the theme editor to preview live. | No | Always |
Typography
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Use global accordion styles | Use accordion trigger and content sizes from Theme settings → Typography. Turn off to set sizes for this block only. | Yes | Always |
| Trigger size (mobile) | Controls “Trigger size (mobile)” on the storefront. Open the theme editor to preview live. | 20 | Use global accordion styles is off |
| Trigger size (tablet) | Controls “Trigger size (tablet)” on the storefront. Open the theme editor to preview live. | 20 | Use global accordion styles is off |
| Trigger size (desktop) | Controls “Trigger size (desktop)” on the storefront. Open the theme editor to preview live. | 20 | Use global accordion styles is off |
| Use custom trigger text color | Controls “Use custom trigger text color” on the storefront. Open the theme editor to preview live. | No | Always |
| Trigger text color | Controls “Trigger text color” on the storefront. Open the theme editor to preview live. | #111111 | use custom trigger text color |
| Content size (mobile) | Controls “Content size (mobile)” on the storefront. Open the theme editor to preview live. | 16 | Use global accordion styles is off |
| Content size (tablet) | Controls “Content size (tablet)” on the storefront. Open the theme editor to preview live. | 16 | Use global accordion styles is off |
| Content size (desktop) | Controls “Content size (desktop)” on the storefront. Open the theme editor to preview live. | 16 | Use global accordion styles is off |
Setting details
Each control from the tables above, explained simply:
Title
Controls “Title” on the storefront. Open the theme editor to preview live. Default: Accordion title.
Icon
Controls “Icon” on the storefront. Open the theme editor to preview live. Default: none.
Icon size (mobile)
Controls “Icon size (mobile)” on the storefront. Open the theme editor to preview live. Default: 20. This control appears when: An icon is selected.
Icon size (tablet)
Controls “Icon size (tablet)” on the storefront. Open the theme editor to preview live. Default: 20. This control appears when: An icon is selected.
Icon size (desktop)
Controls “Icon size (desktop)” on the storefront. Open the theme editor to preview live. Default: 20. This control appears when: An icon is selected.
Use custom icon color
Controls “Use custom icon color” on the storefront. Open the theme editor to preview live. Default: No. This control appears when: An icon is selected.
Icon color
Controls “Icon color” on the storefront. Open the theme editor to preview live. Default: #111111. This control appears when: An icon is selected and Use custom icon color is on.
Closed icon
Icon shown when the accordion is collapsed. Default: plus.
Open icon
Icon shown when the accordion is expanded. Default: minus.
Content source
Controls “Content source” on the storefront. Open the theme editor to preview live. Default: richtext.
Content
Controls “Content” on the storefront. Open the theme editor to preview live. Default: Accordion content
Custom Liquid
Add app snippets or other Liquid code to create advanced customizations. Default: —. This control appears when: content source == 'liquid'.
Open by default
Controls “Open by default” on the storefront. Open the theme editor to preview live. Default: No.
Use global accordion styles
Use accordion trigger and content sizes from Theme settings → Typography. Turn off to set sizes for this block only. Default: Yes.
Trigger size (mobile)
Controls “Trigger size (mobile)” on the storefront. Open the theme editor to preview live. Default: 20. This control appears when: Use global accordion styles is off.
Trigger size (tablet)
Controls “Trigger size (tablet)” on the storefront. Open the theme editor to preview live. Default: 20. This control appears when: Use global accordion styles is off.
Trigger size (desktop)
Controls “Trigger size (desktop)” on the storefront. Open the theme editor to preview live. Default: 20. This control appears when: Use global accordion styles is off.
Use custom trigger text color
Controls “Use custom trigger text color” on the storefront. Open the theme editor to preview live. Default: No.
Trigger text color
Controls “Trigger text color” on the storefront. Open the theme editor to preview live. Default: #111111. This control appears when: use custom trigger text color.
Content size (mobile)
Controls “Content size (mobile)” on the storefront. Open the theme editor to preview live. Default: 16. This control appears when: Use global accordion styles is off.
Content size (tablet)
Controls “Content size (tablet)” on the storefront. Open the theme editor to preview live. Default: 16. This control appears when: Use global accordion styles is off.
Content size (desktop)
Controls “Content size (desktop)” on the storefront. Open the theme editor to preview live. Default: 16. This control appears when: Use global accordion styles is off.
Tips
- Place this block inside a wrapper if it should only show on certain screen sizes.
- Preview in the theme editor on mobile and desktop.