Accordion

Overview #

The Accordion block is designed to create expandable information tabs within a theme. This block is particularly useful for organizing content such as FAQs or additional product details in a compact and user-friendly manner. It allows users to add multiple rows, each of which can be expanded or collapsed, providing a clean and organized way to present information.

Key components and functionality #

Display settings

The display settings allow you to control how the Accordion appears when the page loads.

• Display open by default: Determines whether the Accordion is open when the page loads. If enabled, the Accordion will display its content immediately upon page load.

Content linking

These settings enable you to link additional content to the Accordion, enhancing its informational value.

• Show link to content: Automatically adds a button that links to the content within the Accordion. This is useful for directing users to more detailed information or related pages.
• Blog post and page: Allows you to link a specific blog post or page to the Accordion content. This can be useful for providing additional context or detailed information related to the Accordion's topic.

Content display

These settings manage how content is presented within the Accordion.

• Show excerpt: Displays an excerpt of the content within the Accordion instead of the full text. This is useful for providing a brief overview or summary, encouraging users to expand the Accordion for more details. Default: false

Heading and icon

These settings allow you to customize the visual elements of the Accordion header.

• Heading: Sets the title of the Accordion. Default: Accordion
• Icon: Allows you to add an icon next to the heading for visual emphasis.

Main content

This is the main body of the Accordion where you can add text, links, and basic formatting using a rich text editor. Default: "

Add relevant text content with the richtext editor. Note that you can also include <a href="#">links and basic formatting in this content, e.g. bold and italic.

Button settings

These settings allow you to customize the buttons within the Accordion.

• Button icon and text: Customize the icon and text for the button within the Accordion.
• Button link: Set a URL for the button to direct users to a specific page.
• Button style: Choose from various styles such as primary, secondary, extra large, plain, small, and small secondary.
• Button layout: Options include icon left, icon right, and icon only.

Imagery settings

Imagery settings allow you to enhance the Accordion with visual elements.

• Imagery layout: Choose the position of imagery within the Accordion, either top or bottom. Default: bottom
• Image and video settings: Add images or videos to enhance the Accordion content. Videos can be linked from YouTube or Vimeo, or hosted directly.

Aspect ratio and video settings

These settings control the display and behavior of videos within the Accordion.

• Aspect ratio: Adjust the aspect ratio of images or videos within the Accordion. Options include default, landscape, portrait, square, ultrawide, and widescreen. Default: default
• Video settings: Control video playback options such as autoplay, loop, mute, and display controls. Default for mute and display controls: true

Available in sections #

• Featured product
• Product information

Usage notes #

• Responsive design: Ensure that the Accordion is tested on various devices to maintain usability and readability.
• Performance: Avoid overloading the Accordion with too much content or media, as this can affect page load times.
• Accessibility: Use clear and descriptive headings and ensure that all interactive elements are keyboard accessible.

Usage examples #

1. FAQs Section: Use the Accordion block to create a FAQ section on your product page. Each question can be a heading, and the answer can be the content that expands when clicked.

2. Product Details: For a product page, use the Accordion to provide detailed specifications, warranty information, or care instructions. This keeps the page clean while still offering comprehensive information.

3. Blog Summaries: Link to blog posts or pages within an Accordion to provide summaries or excerpts, encouraging users to read more by expanding the content.