Section: Collapsible content

Everything you'll need to know on how to setup your Collapsible content section.

The Collapsible content section presents an accordion of questions and answers. Perfect for shipping policies, returns, sizing guides, or general support content. It supports two visual styles — a centered minimal accordion or a paired image-and-accordion layout — and 20 built-in icons that can prefix each question for visual scanning.

To activate this section you first have to add the section to your page. This can be done in a few small steps.

1) Click on Add section which can be found in your left sidebar.

2) Scroll down, or search for Collapsible content, then click on it.

3) Done — your Collapsible content section is added.

The general settings contain the layout style, content, image, and spacing of the Collapsible content section. Simply click on the section to open the settings.

Select the color scheme for the section. You can pick from any of the schemes set up in Theme Settings → Colors. Controls the section background, text, and accordion borders.

Choose between two layouts: With image (2 columns) pairs an image alongside the accordion. Minimal (full width) centers the accordion in the section. The default Minimal works well on dedicated FAQ pages; With image works for shipping or about pages.

The section heading rendered as an H2 tag. For example: Frequently Asked Questions or Shipping & Returns. Leave empty to hide.

Smaller paragraph below the title. For example: Everything you need to know about our products and services. Leave empty to hide.

The settings below only apply when Layout style is set to With image (2 columns). They are ignored — but kept in case you switch back — when the Minimal style is selected.

Upload an image to pair with the accordion. A lifestyle placeholder is shown if empty. Recommended: 800 × 800 px or wider, JPG or WebP.

Where the image sits relative to the accordion: Left, Right, Top, or Bottom. Left and Right create a side-by-side layout; Top and Bottom stack the image and accordion vertically.

Optional rich-text caption layered on top of the image. For example: Did you know 78% of our customers reorder within 30 days?. Supports bold and links. Leave empty to hide.

Color of the overlay text. Pick a value with strong contrast against your image — white usually works on photographic content, dark colors need bright or pastel images.

Round the corners of the FAQ container, between 0 px and 40 px. The default 16 px gives a soft modern look. Set to 0 for sharp edges.

Space above the section in pixels (0–120). The default 60 px works for most pages.

Space below the section in pixels (0–120). The default 60 px works for most pages.

Each question is an individual FAQ item block. Click Add block inside the section and choose FAQ item. There's no maximum — add as many as you need.

Optional icon shown to the left of the question. Choose from 20 built-in icons including Truck / Shipping, Refresh / Returns, Shield check, Lock, Credit card, Tag / Price, Gift, Message, and more. Pick No icon for a clean text-only style.

The question text. Phrase it as a customer would type it — short, direct, in their own words. For example: How long does shipping take? reads better than What is the estimated delivery timeframe?

The answer revealed when the question is clicked. Rich text — bold, italic, links, and lists are supported. Keep answers focused and aim for 1–3 short paragraphs.

There's no maximum. Add as many FAQ items as you need. For long FAQ pages, group related questions together (e.g. all shipping questions, then all returns questions) so visitors can scan quickly.

Make sure the icon value is not No icon. The condition that adds the icon checks for any value other than No icon — when No icon is selected, the question renders without the icon to keep alignment clean.

The image only displays when Layout style is set to With image (2 columns). If you have selected Minimal (full width), the image is hidden by design. Switch to With image to show it.

Increase the contrast between the Overlay text color and the background image. Try pure white over dark or colored images, or pure black over pastel images. You can also reduce the image's brightness in your image editor before uploading.

The current implementation always starts with all answers collapsed for a tidy initial view. Visitors expand each one by clicking the question.