Flexible Expandables section

This feature was introduced in version 6.7

This highly flexible section (“flexi”) allows you to display a list of expandable items (like an FAQ, shipping and returns information, care instructions, technical specifications) in a variety of layouts using reusable theme blocks. 

The section is composed of one or two Column blocks. Each Column block contains one or more content blocks, such as an Expandable, heading, text, etc.

Section settings

Content

Heading: Set a title for this section. This is optional.

Heading size: Adjust the size of your heading to make your message stand out. Available options: Small, Normal, Large, XL, and 2XL.

Headings alignment: Align the section’s heading and subheading Left or Center.

Subheading: Set a subtitle for this section. Also optional.

Layout

Make section narrow: Choose whether the content will span the entire width of the page or be narrower.

Colors

Color scheme: Select one of the predefined color schemes as defined in Theme settings > Colors. For more information regarding the color schemes please refer to our article about creating your own color scheme.

Section spacing

The section spacing settings give you the option to adjust the top & bottom section spacing values. Use the Configure spacing for option to switch between the Desktop and Mobile values, each of which has its own Top spacing and Bottom spacing setting. Please note: If you select a color scheme with a background color, these settings will affect the spacing between the top or bottom of the section and the content of the section.

SEO

Heading tag: Select the appropriate heading level (H1, H2, or H3) based on how you want the section title to appear.

Visibility

Show section on desktop: Enable or disable the section’s visibility on desktop devices.

Show section on mobile: Enable or disable the section’s visibility on mobile devices.

Column block

This block has no settings. Add one or two column blocks to create a 1 or 2-column layout respectively. A single column is centered within the section. Each column may contain multiple content blocks:

• Expandable
• Heading
• Text
• Rich text
• Media

Expandable block

Heading: The title of the expandable, always visible. This is what your customers click on to reveal the content, so make it descriptive, e.g. “How long does shipping take?”.

Icon: Set an icon to be displayed next to the title (optional). For example, on a shipping-related expandable you would typically choose the “Truck” icon.

Text: The content revealed when the expandable is opened.

Page content: Select a page to display its contents. This will override the text content above, if set. This is handy when the same information is already maintained as a page in your store (e.g. a returns policy, a size guide, etc.).

Start expanded: When enabled, this expandable is already open when the page loads. Each expandable opens and closes independently, so you can have any number of them expanded by default.

Heading block

Heading text: The text of the heading.

Heading tag: Select the appropriate heading level (H1, H2, H3, or H4) based on how you want the title to appear.

Heading size: Adjust the size of your heading to make your message stand out. Available options: Small, Normal, Large, XL, and 2XL.

Text block

Text content: The text (single line) content of the block.

Text size: Adjust the size of your text to make your message stand out. Available options: Small, Normal, and Large.

Rich text block

Text content: The text (multi line) content of the block.

Text size: Adjust the size of your text to make your message stand out. Available options: Small, Normal, and Large.

Media block

Image: Select the image to be displayed.

Self hosted video: Upload a custom mp4 for your video.

Video URL: A YouTube or Vimeo URL. You can simply paste either the link from your browser’s bar or the URL that YouTube or Vimeo gives when attempting to share a video. Note that if both self-hosted and external URL are chosen, the self-hosted will take priority. The image (if set) will be used as the video’s cover.

Alt text / Video description: Describe the image/video for screen readers. Leave blank to use the image’s built-in description.