Collapsible content is an accordion: a list of headings that each open to show an answer. It is the section for frequently asked questions, shipping and returns details, and care instructions. It holds up to twenty rows.
Where to find it
In the theme editor, click Add section and choose Collapsible content. You can add it to the home page or any other page that takes sections, as many times as you like.
Layout options
- Heading beside: on desktop, the section's heading sits in a column at the side with the rows beside it. This is the default.
- Heading above: the heading sits above the rows, which run the full width of the column.
On mobile the heading always comes first, with the rows under it.
Section settings
Select the section in the theme editor to see these settings, in this order.
| Setting | Options | What it does |
|---|---|---|
| Eyebrow | Text. | A short label above the heading, such as "New in". With Number sections on in theme settings, the section's number is shown before it. |
| Heading | Text. | The section's heading. Select a word and make it italic for emphasis. Leave it empty to show no heading. |
| Heading size | Small, Medium, Large or Extra large. Default: Medium. | How large the heading is set. |
| Layout | Heading above or Heading beside. Default: Heading beside. | Whether the heading sits beside the rows or above them on desktop. |
| Open first row | On or off. Default: off. | Shows the first row open when the page loads, so customers see how the section works. |
| Allow only one open row | On or off. Default: off. | Opening a row closes the others, which keeps a long list short on the screen. |
| Color scheme | Color scheme. | Which of your color schemes the section uses. Schemes are edited in theme settings under Colors. |
| Background image | ||
| Image | Image. | An optional image behind the whole section, cropped around its focal point. Text keeps the color scheme's text color, so darken or lighten the image with the overlay until everything reads clearly. |
| Overlay color | Color. Default: #000000. | The color laid over the background image. |
| Overlay opacity | 0% to 90%. Default: 40%. | How strong the overlay is. 0% shows the image untouched. |
| Section spacing | ||
| Top spacing | None, Small, Medium or Large. Default: Medium. | The space above the section, as a share of Space between sections in theme settings. None lets the section touch the one above it. |
| Bottom spacing | None, Small, Medium or Large. Default: Medium. | The space below the section. None lets it touch the one below. |
Blocks
This section is built from one kind of block. Click Add block under the section to add one, and drag blocks to reorder them. The section holds up to 20 blocks.
Collapsible row
One question and its answer.
| Setting | Options | What it does |
|---|---|---|
| Heading | Text. | The row's heading, usually a question. |
| Text | Formatted text. | The answer. Bold, italic, links and lists are supported. |
Tips
- Write each heading as the question a customer would actually ask.
- Put the most-asked questions first, and keep answers to a few lines with a link for more.
- For a few collapsible rows on a product page, use the product page's own Collapsible row block instead.