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. Rows can be sorted under group headings, and a short call to action under the rows can point customers who are still stuck to your contact page.
Where to find it
In the theme editor, click Add section. The section is listed twice, as two starting points for the same section:
- Collapsible content: a heading and a few rows, for a short list on any page.
- FAQ: a full page of questions, already sorted into groups for shipping, returns and sizing, with intro text and a call to action. Replace the sample questions with your own.
Masthead's FAQ page template already includes the section. See Page templates.
Groups
A Group heading block is a topic heading, such as Shipping, Returns or Sizing. Every Collapsible row under it belongs to that group, until the next group heading.
- Click Add block under the section and choose Group heading. Type the topic in Heading.
- Add Collapsible row blocks for that topic's questions.
- Drag the blocks so each group heading sits directly above its rows.
Groups are optional. Without any, the rows form one list.
Contact call to action
Under the rows, the section can show a heading, a line of text and a button for customers who did not find their answer, for example "Still have questions?" with a button to your contact page.
- Fill in the Heading and Text under Contact call to action. Leave both empty to hide this part.
- The button appears only when it has both a Button label and a Button link. On a new store, the link is empty: choose your contact page there once you have created it.
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 Show editorial numbering 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. |
| Intro text | Formatted text. | A few lines under the heading, before the rows. |
| 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. |
| Contact call to action | ||
| Heading | Text. | The heading of the call to action under the rows, such as "Still have questions?". |
| Text | Formatted text. | A line under that heading, for example how quickly you reply. |
| Button label | Text. | The words on the button. Start with a verb, such as "Contact us". |
| Button link | Link. | Where the button goes, usually your contact page. Without a link, the button is hidden. |
| 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 2 kinds of block. Click Add block under the section to add one, and drag blocks to reorder them. The section holds up to 50 blocks.
Group heading
A topic heading for the rows that follow it.
| Setting | Options | What it does |
|---|---|---|
| Heading | Text. | The topic, such as Shipping, Returns or Sizing. |
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.