> 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/storytelling/faqs.md). # Faqs **Faqs** puts your most common questions on the page as an accordion, so shoppers can open the one that applies to them instead of reading everything. It answers the doubts that stop a purchase (delivery times, returns, sizing, care) at the moment they come up, which takes work off your support inbox. Shoppers usually meet it low on the home page, on a dedicated FAQ page, or under a product story section. An optional image sits beside the questions, along with a short message and a button for shoppers whose question is not on the list.
### Where to find it {% hint style="success" %} **Steps:** 1. Go to **Online Store > Themes > Customize**. 2. Open the template you want the questions to appear on. 3. Click **Add section** and choose **Faqs** from the **Storytelling** group. 4. Add one block per question, then fill in the question and its answer. {% endhint %} *Result:* the questions render as a closed accordion, ordered exactly as the blocks are ordered in the sidebar. ### Section settings #### General settings | Setting | Description | | ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Section width** |

How much of the screen the questions are allowed to span.

| | **Color scheme** | The background and text colors this section uses. Schemes are defined in **Theme settings > Colors**, so editing one there restyles every section built on it. | | Setting | Description | | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Open all questions** | Shows every answer already expanded instead of collapsed. Good for a short list a shopper should read in full, distracting once you have more than four or five questions. | | Setting | Description | | -------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Show image** | Places a picture beside the questions so the section is not a wall of text. Sharpest at ***(646px x 700px recommended)***. | | **Image** |

The picture shown next to the questions, usually a lifestyle or packaging shot that matches what is being asked about.
\* Note: Only appears when Show image is enabled

| | **Desktop image position** |

Which side of the questions the picture sits on for desktop shoppers. Alternate it between sections so the page does not lean to one side.
\* Note: Only appears when Show image is enabled

| | Setting | Description | | --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Show faqs message** | Turns on the wording that sits alongside the questions. The subheading, heading, description, and button below only appear once this is on. | | **Subheading** | A short label above the headline, useful for naming the topic, for example *Shipping* or *Returns*. | | **Heading** | The headline shoppers read first, for example *Questions we get asked a lot*. | | **Description** | One or two sentences under the headline, usually telling shoppers what to do if their question is not listed. | | **Button label** | The words on the button beside the questions. Leave it blank and no button is shown at all. | | **Link** | Where that button sends shoppers, most often a full FAQ page or the contact page. | | **Content alignment** |

Which edge the heading and description line up with.

| #### Section padding | Setting | Description | | ---------- | -------------------------------------------------------------------------------------------------------- | | **Top** | Adds space above the questions. Increase it when the section sits too close to whatever comes before it. | | **Bottom** | Adds space below the questions. Increase it when the next section starts too abruptly. | #### Section divider | Setting | Description | | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | | **Show divider** | Draws a thin line between this section and the one above it. Most useful when both use the same background color and would otherwise blur together. | ### Block settings | Setting | Description | | ------------ | --------------------------------------------------------------------------------------------------------------------------------- | | **Question** | The line shoppers click to open the answer. Write it the way a customer would ask it, not in your internal wording. | | **Answer** | The text revealed underneath once the question is opened. Keep it to the answer itself and link out when the full policy is long. | ### What changes on the storefront * Each block becomes one clickable row, in the order the blocks appear in the sidebar. Put the questions people ask most at the top. * With **Open all questions** off, shoppers only see the questions, so the section stays short no matter how long the answers are. * The image, the message, and the button all disappear when their own toggle or field is left empty, leaving a plain accordion. ### Related pages * [Storytelling](/velare/customize-your-pages/storytelling.md): the group this section belongs to * [FAQ page](/velare/customize-your-pages/faq-page.md): the dedicated page for a longer list of questions * [Accordion](/velare/customize-your-pages/layout/accordion.md): the block version of the same expand and collapse behaviour * [Colors](/velare/set-up-your-store/colors.md) and [Layout](/velare/set-up-your-store/layout.md): where the color schemes and the fixed page width come from --- # 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/storytelling/faqs.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.