FAQ
Questions in collapsible rows, grouped into categories, with a support person and a contact link beside them.
munich-demo.myshopify.com
What it does
Collapsible questions, optionally grouped under category headings with an icon. The section can put its heading above the questions or beside them in a left column, with a contact link and a support person (image, name, quote) next to it. Each question row can be a plain list row, a boxed row or a card, and one row per section can start open.
When to use it
The FAQ page, built from this section with a Contact options section above it. And the short version on the product page: one category, four questions, the heading beside them, right after the how it works. Answering objections on the product page is where an FAQ earns most.
Blocks
- FAQ category: a heading, an optional intro text and an icon, with the questions of that category nested inside it.
- Collapsible row: one question and its answer. Nest it inside a category, or add it directly to the section for an FAQ without categories.
Setting it up
- Choose Layout. Heading beside questions needs a heading and suits a page; Heading above questions suits a product page section.
- Add a FAQ category per topic and the Collapsible row blocks inside it.
- Set Row style on the rows and Row surface on the section.
- Fill the Support person if you want a face, and the Contact link for the question that is not answered.
Settings
| Setting | Type | What it does |
|---|---|---|
| General | ||
| Color scheme | Color scheme | The surface of the row when it is Boxed or a Card. Ignored in List style. |
| Width | Select | Fixed width keeps the section inside the page margin so it lines up with the sections around it. Full width runs it to the edge of the screen.Options: Fixed width, Full width · Default: Fixed width |
| Layout | Select | Heading above questions stacks header and questions. Heading beside questions puts the heading, contact link and support person in a column to the left.Options: Heading above questions, Heading beside questions · Default: Heading above questions |
| Row surface | Select | How a question in Card style sits on the page: with a border, a shadow, flat, or as set under Theme settings, Layout.Options: Border, Shadow, Flat, Follow theme setting · Default: Border |
| Header | ||
| Label | Text | A small kicker above the heading, such as Common questions. |
| Heading | Text | The category title.Default: Frequently asked questions |
| Size | Select | How large the heading renders, on the shared type scale from Theme settings, Typography.Options: Large, Medium, Small, Extra small · Default: Medium |
| Heading level | Select | Page heading is the one heading that names what the whole page is about; use it once per page, usually on the first section. Everything else is a section heading.Options: Page heading, Section heading · Default: Section heading |
| Accent font | Select | Highlight words puts the italicized words on the accent font. Whole heading sets the entire line in it. Off keeps the heading font throughout.Options: Highlight words, Whole heading, Off · Default: Highlight words |
| Text | Rich text | A short paragraph under the heading. Keep it to one or two sentences. |
| Content alignment | Select | Whether heading, text and buttons sit left, centered or right inside the section.Options: Inherit, Left, Center · Default: Inherit |
| Contact link label | Text | Text of the link for visitors whose question is not here, such as Contact us. Shown in the beside layout. |
| Contact link | Link | Where the contact link leads, usually the contact page. |
| Support person | ||
| Image | Image | A portrait of the person answering support requests. |
| Name | Text | The name and role of that person, such as Mara, customer care. |
| Quote | Rich text | One or two sentences from that person inviting the visitor to write. |
| Position | Select | Whether the support person sits with the heading or under the questions.Options: With the heading, Below the questions · Default: With the heading |
| Section padding | ||
| Top padding | Range | Space between the top of the section and its content. On a phone the theme tightens it by a quarter.0 to 120 px · Default: 60 |
| Bottom padding | Range | Space between the content and the bottom of the section. On a phone the theme tightens it by a quarter.0 to 120 px · Default: 90 |
FAQ category block
| Setting | Type | What it does |
|---|---|---|
| Heading | Text | The category title.Default: Orders and shipping |
| Text | Rich text | An optional line under the category title. |
| Icon | Select | An icon in front of the category title.Options: None, Shipping, Returns, Guarantee, Delivery time, Natural, Gift, Secure payment, Check, Star, Email, Questions · Default: None |
| Rows | Select | Spaced apart leaves air between questions, for boxed and card rows. Close together stacks them, for list rows.Options: Spaced apart, Close together · Default: Spaced apart |
Collapsible row block
| Setting | Type | What it does |
|---|---|---|
| Heading | Text | The category title.Default: Shipping and returns |
| Content | Rich text | What the row shows when opened. Formatted text, lists and links are kept.Default: <p>Describe your shipping and return policy here.</p> |
| Row style | Select | List draws a hairline under the row, Boxed a border around it, Card lifts it off the page with its own surface.Options: List, Boxed, Card · Default: List |
| Color scheme | Color scheme | The surface of the row when it is Boxed or a Card. Ignored in List style. |
| Marker | Select | The symbol at the end of the row that shows it can open.Options: Chevron, Plus · Default: Chevron |
| Icon | Select | An icon in front of the category title.Options: None, Natural, Shipping, Returns, Guarantee, Delivery time, Gift, Secure payment, Check, Star · Default: None |
| Open by default | Checkbox | Shows the row already opened when the page loads. Use it for the one row most visitors want.Default: off |
| Show below product media | Checkbox | On the product page only: moves the row under the images instead of keeping it in the buy box column.Default: off |
Collapsible row block
| Setting | Type | What it does |
|---|---|---|
| Heading | Text | The category title.Default: Shipping and returns |
| Content | Rich text | What the row shows when opened. Formatted text, lists and links are kept.Default: <p>Describe your shipping and return policy here.</p> |
| Row style | Select | List draws a hairline under the row, Boxed a border around it, Card lifts it off the page with its own surface.Options: List, Boxed, Card · Default: List |
| Color scheme | Color scheme | The surface of the row when it is Boxed or a Card. Ignored in List style. |
| Marker | Select | The symbol at the end of the row that shows it can open.Options: Chevron, Plus · Default: Chevron |
| Icon | Select | An icon in front of the category title.Options: None, Natural, Shipping, Returns, Guarantee, Delivery time, Gift, Secure payment, Check, Star · Default: None |
| Open by default | Checkbox | Shows the row already opened when the page loads. Use it for the one row most visitors want.Default: off |
| Show below product media | Checkbox | On the product page only: moves the row under the images instead of keeping it in the buy box column.Default: off |
This section also accepts app blocks, so apps that provide one can add content here.
Tips
- Group questions into categories of two to four. A single list of fifteen questions is not read; three groups of four are.
- The support person block puts a face and a quote next to the questions. Use a real team member and a real name, or leave it empty; an invented person is a problem in the review.
- Row style Card with a Row surface of Border is the demo look. List is the quiet version for an FAQ at the bottom of a product page.
- Write answers in two to four sentences. Link to a page for the long version.