> For the complete documentation index, see [llms.txt](https://uxsmart.gitbook.io/velare/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://uxsmart.gitbook.io/velare/customize-your-pages/layout/accordion.md). # Accordion The **Accordion** block turns long content into rows shoppers open one at a time, so a page can carry answers, sizing details, or care instructions without becoming a wall of text. It is added inside a section, and each row is a nested block with its own title and its own content. Shoppers see the titles first and open only what they came for, which is what makes it the usual choice for FAQs and product detail tabs.
### How to add it {% hint style="success" %} **Steps:** 1. Go to **Online Store > Themes > Customize**. 2. In the left sidebar, click the section that should carry the rows. 3. Click **Add block** and choose **Accordion**. 4. Add an **Accordion row** for each question, and write its **Heading**. 5. Inside each row, add the blocks that hold the answer. {% endhint %} *Result:* the rows appear closed in the preview, and clicking a title opens its content. ### General settings | Setting | Description | | ------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Inherit Color Scheme** | Leaves the rows in the colors of the section around them, which is the default and keeps them reading as part of the page. | | **Colors** |

Only visible when Inherit Color Scheme is disabled.

Gives the rows their own scheme instead of the section's, which is how a block of answers is set apart from the story above it.

| ### Typography | Setting | Description | | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------- | | **Heading Size** | How large the row titles are, from 16px to 32px. These titles are what shoppers scan, so keep them clearly larger than the answers inside. | | **Heading Weight** | How heavy the titles look, Bold (600) by default or Medium (500). Medium calms a long list of rows that would otherwise read as shouting. | | **Space Between** | The gap between a title and the answer under it once the row is open, from 0px to 30px. Too little and the answer looks like part of the question. | ### Style | Setting | Description | | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Icon Style** | The mark that tells shoppers a row opens: Caret (Default, a small arrow) or Plus (a plus that becomes a minus). Plus reads more clearly as "there is more here". | | **Row Style** | How one row is separated from the next: Background (each row sits on its own colored panel) or Divider (Default, a thin line between rows, which looks lighter on a long list). | ### Item spacing | Setting | Description | | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Padding** | The room above and below the title inside each row, from 0px to 50px. It sets how tall the closed rows are, and therefore how easy they are to tap on a phone. | ### Block settings #### Accordion row | Setting | Description | | ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Heading** |

The line shoppers read while the row is closed, and the part they click to open it.
Phrase it as the question they would ask, since that is what they are scanning for.

| | **Open default** |

Leaves this row already open when the page loads, so its content is read even by shoppers who never click.

Turn it off and the row stays closed until it is clicked. Opening more than one row by default undoes the point of the block.

| {% hint style="success" %} In addition to the default [**Text**](/velare/customize-your-pages/basic/text.md) block, you can add multiple other block types inside an **Accordion row**. This allows you to enrich the expanded content area with features such as images, buttons, videos, icons, or custom HTML, providing a more interactive and versatile presentation. {% endhint %} ### What changes on the storefront * Shoppers see a short list of titles instead of every answer at once, and open only the ones they need. * A row marked as open by default has its content visible immediately, which is worth using for the one question most people ask. * Because rows accept other blocks, an answer can include a picture, a video, or a button rather than text alone. ### Related pages * [Text](/velare/customize-your-pages/basic/text.md): the usual content of a row * [Group](/velare/customize-your-pages/layout/group.md): for arranging several blocks inside a single row * [Layout](/velare/customize-your-pages/layout.md): the other blocks in this group --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://uxsmart.gitbook.io/velare/customize-your-pages/layout/accordion.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.