> 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/faq-page.md).

# FAQ page

The **FAQ page** collects the questions your customers ask most often and answers them in one place: sizing, delivery times, returns, payment, care instructions. Shoppers open it from the footer or the main menu when something is holding them back from ordering, and support teams link to it instead of typing the same reply again.

The answers sit in collapsible blocks, so a long list stays readable, and the page also carries a contact form for the questions your list does not cover. It does not exist until you create a page in the Shopify admin and attach the FAQ template to it.

<figure><img src="/files/hPNhnFKSD8sV7IdxUdso" alt=""><figcaption></figcaption></figure>

## How to create page FAQs ? <a href="#how-to-create" id="how-to-create"></a>

{% hint style="success" %}
**Steps:**

1. Go to **Shopify admin > Online Store > Pages**.
2. Click **Add page**.
3. Fill in:
   * Title: `FAQs`
   * Visibility: **Visible**
   * Theme template: `faqs`
4. Click **Save**.
   {% endhint %}

*Result:* the page is live at an address such as `/pages/faqs` and already uses the FAQ layout instead of the plain page layout.

## How to customize page FAQs ? <a href="#how-to-customize" id="how-to-customize"></a>

{% hint style="success" %}
**Steps:**

1. Go to **Online Store > Themes > Customize**.
2. Open the template selector at the top of the editor.
3. Select **Pages**, then **faqs**.
4. In the left sidebar, add **Faqs page**.
5. Make your changes, then click **Save**.
   {% endhint %}

*Result:* the preview shows the question list, and each block you add becomes one question a shopper can open.

## Section settings <a href="#section-settings" id="section-settings"></a>

### General settings <a href="#general-settings" id="general-settings"></a>

<figure><img src="/files/BRsT439h9EEBPi94v0RB" alt=""><figcaption></figcaption></figure>

<table data-full-width="false"><thead><tr><th>Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Section width</strong></td><td><p>How far the question list stretches across the screen. Answers are easier to read when the lines stay short.</p><ul><li><strong>Stretch width</strong>: the list runs close to the screen edges whatever the display size.</li><li><strong>Fixed width</strong>: the list lines up with the rest of the store, using the width set in <strong>Theme settings > Layout</strong>.</li><li><strong>Full width</strong>: the section fills the whole screen and rescales itself to fit it.</li></ul></td></tr><tr><td><strong>Color scheme</strong></td><td>The background and text colors of the section, taken from <strong>Theme settings > Colors</strong>.</td></tr><tr><td><strong>Open all question</strong></td><td>Shows every answer already expanded instead of waiting for a click. Useful on a short list where shoppers can scan everything at once, but it makes a long list hard to navigate.</td></tr></tbody></table>

### FAQs message <a href="#faqs-message" id="faqs-message"></a>

<figure><img src="/files/rV3jzdVm69EWxi5csbln" alt=""><figcaption></figcaption></figure>

<table data-full-width="false"><thead><tr><th>Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Show FAQs message</strong></td><td>Displays a short block beside the questions inviting shoppers to get in touch when they cannot find their answer. Turn it off if support enquiries already arrive faster than you can answer them.</td></tr><tr><td><strong>Desktop content position</strong></td><td>Which side of the screen that block sits on for desktop visitors: <em>Left</em> or <em>Right</em>. Put it opposite the question list so the two do not compete.<br><em>*Note: Content first is the default mobile layout.</em></td></tr><tr><td><strong>Highlight text</strong></td><td>A word or short phrase in the message shown with emphasis, so the eye catches the point of the block before reading it all.</td></tr><tr><td><strong>Heading</strong></td><td>The line at the top of that block, usually asking whether the shopper still needs help.</td></tr><tr><td><strong>Description</strong></td><td>A sentence under the heading encouraging shoppers to write to you, for example telling them how quickly you reply.</td></tr><tr><td><strong>Alignment</strong></td><td><p>Where the message text sits inside its block.</p><ul><li><strong>Left</strong>: reads naturally next to the question list.</li><li><strong>Center</strong>: gives a short message more presence.</li><li><strong>Right.</strong>: for layouts that already run right aligned.</li></ul></td></tr></tbody></table>

### Contact form <a href="#contact-form" id="contact-form"></a>

<figure><img src="/files/0dIk3HjeK76LiU8gIobm" alt=""><figcaption></figcaption></figure>

<table data-full-width="false"><thead><tr><th>Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Name</strong></td><td>The greyed-out text inside the name box before the shopper types.</td></tr><tr><td><strong>Email</strong></td><td>The greyed-out text inside the email box, for example <em>Enter your email</em>. This is the address your reply goes to, so make the prompt unambiguous.</td></tr><tr><td><strong>Message</strong></td><td>The prompt inside the large box. Use it to ask for the detail you always end up requesting, such as an order number.</td></tr><tr><td><strong>Heading</strong></td><td>The line above the form telling shoppers what happens after they send it.</td></tr><tr><td><strong>Button label</strong></td><td>The wording on the send button. A specific label such as <em>Send message</em> reads more clearly than a generic one.</td></tr><tr><td><strong>Top</strong></td><td>Adds space above the section. Increase it to separate the questions from whatever sits over them.</td></tr><tr><td><strong>Bottom</strong></td><td>Adds space below the section, so the form does not touch the footer.</td></tr></tbody></table>

## Block settings <a href="#block-settings" id="block-settings"></a>

<figure><img src="/files/FfsX0BhZaEGEehX2THEB" alt=""><figcaption></figcaption></figure>

<table data-full-width="false"><thead><tr><th>Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Heading</strong></td><td>The name of a group of questions, such as Shipping or Returns. Grouping lets shoppers jump to their topic instead of reading the whole list.</td></tr><tr><td><strong>Frame</strong></td><td>Draws a border around the group so it reads as one set of questions rather than a continuous list.</td></tr></tbody></table>

<figure><img src="/files/SS5WnouywGuExp8mbGg9" alt=""><figcaption></figcaption></figure>

<table data-full-width="false"><thead><tr><th>Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Question</strong></td><td>The line shoppers click to open an answer. Word it the way a customer would ask it, since that is also what they type into search engines.</td></tr><tr><td><strong>Answer</strong></td><td>The text revealed under the question. Keep it to the few sentences that settle the matter, and link to a policy page when more detail is needed.</td></tr></tbody></table>

### What changes on the storefront <a href="#what-changes" id="what-changes"></a>

* Shoppers get their routine questions answered on the storefront, which removes a common reason for abandoning an order.
* Anything the list does not cover goes through the form on the same page, so the shopper never has to go looking for a contact route.

### Related pages <a href="#related-pages" id="related-pages"></a>

* [Contact page](/velare/customize-your-pages/contact-page.md): the fuller contact layout for enquiries this page cannot answer
* [Layout](/velare/set-up-your-store/layout.md): the page content width used by **Fixed width**
* [Colors](/velare/set-up-your-store/colors.md): the schemes offered in **Color scheme**


---

# 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/faq-page.md?ask=<question>&goal=<endgoal>
```

`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.
