> For the complete documentation index, see [llms.txt](https://aries-theme.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://aries-theme.gitbook.io/docs/theme-sections-by-category/informative/faq.md). # FAQ The FAQ section displays information in an accordion format where customers can expand and collapse individual rows to reveal content. This is perfect for FAQs, product details, shipping information, or any content you want to organize in a space-efficient way. You can add an image alongside the accordion to create a visually appealing layout.
{% hint style="info" %} ### How to set it up 1. Go to **Online Store** > **Themes** > **Customize**. 2. Open **Sections** > **FAQ**. 3. Make your changes, preview live, then click **Save**. {% endhint %} ### Settings #### Heading * **Caption**: Add a small caption or label that appears above the heading, such as "FAQ" or "Information". * **Heading**: Enter a title for this section, such as "Frequently Asked Questions" or "Product Details". Leave blank to hide the heading. * **Underline**: When enabled, adds a decorative underline beneath the heading. * **Heading size**: Choose how large the heading appears, from XS (extra small) to 2XL (extra extra large). * **Description**: Add descriptive text that appears below the heading. You can use rich text formatting to add links or emphasis. * **Heading alignment**: Controls where the heading and description appear horizontally - left, center, or right. #### Layout * **Container**: Choose how the section is displayed - No container (full width with no background), or Section container (contained within a colored background box). * **Container color scheme**: When using Section container, select a color scheme for the content container background. This allows the container to have a different color scheme than the section background. * **Section color scheme**: Select a color scheme for the section background and text. #### Collapsible row * **Style**: Choose the visual style of the accordion rows - Bordered (flat cards with borders), Elevated (cards with shadow), or Underline (minimal style with underline only). * **Border width**: Set the border width around accordion rows (1 to 5 pixels). * **Border radius**: Set the corner roundness of accordion rows (0 to 50 pixels). This setting is not available when using the Underline style. * **Behavior**: Choose how the accordion works - Standard (multiple rows can be open at the same time), or Exclusive (only one row can be open at a time, closing others when you open a new one). * **Open first row**: When enabled, the first collapsible row starts expanded when the page loads. * **Show count**: When enabled, displays the total number of collapsible rows next to the heading as a badge. * **Show icons**: When enabled, displays icons next to each row heading. You can choose different icons for each row in the block settings. * **Content alignment**: Controls how text content aligns within each expanded row - left, center, or right. #### Image * **Show image**: When enabled, displays an image alongside the accordion content. The image appears on the left or right side depending on the placement setting. * **Image**: Upload an image to display next to the accordion. This helps create visual interest and can showcase your products or brand. * **Image ratio**: Choose the aspect ratio for the image - Adapt to image (uses the image's natural proportions), Small, or Large. * **Placement**: Choose where the image appears - Image first (image on the left, accordion on the right), or Image second (accordion on the left, image on the right). * **Use custom border settings**: When enabled, allows you to customize borders and border radius for the image separately from your theme's global settings. * **Image border radius**: Set the corner roundness of the image (0 to 50 pixels). Only available when custom border settings are enabled. * **Image border width**: Set the border width around the image (0 to 10 pixels). Only available when custom border settings are enabled. #### Padding * **Top**: Adjust the spacing above the section (0 to 400 pixels). * **Bottom**: Adjust the spacing below the section (0 to 400 pixels). *** ### Blocks You can add multiple collapsible row blocks to build your accordion. Click "Add block" to add rows to your section. #### Collapsible row Each block creates one expandable/collapsible row in the accordion. * **Heading**: Enter the text that appears as the clickable row title, such as "How do I track my order?" or "What is your return policy?". * **Icon**: Choose an icon to display next to the row heading. You can select from a wide variety of icons including check marks, trucks, hearts, stars, and many more. Select "None" to hide the icon for this row. * **Row content**: Enter the content that appears when the row is expanded. You can use rich text formatting including bold, italic, links, and lists. This is where you provide the answer or detailed information. * **Row content from page**: Alternatively, select a page from your Shopify store to use its content as the row content. This is useful if you have detailed information already written in a page that you want to reuse. *** ### Tips * Use the Exclusive behavior for FAQs or information where customers typically only need to see one answer at a time. * Use the Standard behavior when you want customers to be able to compare multiple pieces of information or keep multiple rows open. * Add icons to make rows more visually distinct and help customers quickly identify different topics. * Use the "Row content from page" option to manage detailed content in your Shopify pages and easily update it without editing the section. * Consider adding an image to break up the text and create a more engaging layout. * Keep row headings short and clear - they should give customers a quick idea of what information is inside. * Use the Elevated style for a more prominent, card-like appearance, or Underline for a minimal, clean look.