Collapsible Content

The Collapsible Content section is designed to display information in a compact and interactive way. Users can expand and collapse content blocks, making it ideal for FAQs, descriptions, or any text-heavy content. The settings are highly customizable, allowing you to control the appearance and behavior of the section across devices.

Key Features

1. Color Schemes

   1. Choose from predefined color schemes for the section and its content.

   2. Easily match the collapsible content to your store's branding.

2. Width Control

   1. Option to toggle the Max Width setting to restrict the content's width for better readability.

   2. Customize the Content Container Width using a slider for precise control (measured in rem).

3. Accordion Behavior

   1. Enable the Open Only One setting to create an accordion effect, where only one item can be open at a time.

   2. Disable this to allow multiple items to remain expanded simultaneously.

4. Content Customization

   1. Add a Heading to title your collapsible content section.

   2. Choose the Heading Size (Small, Medium, Large) to match the overall typography.

5. Text Content

   1. Include a text block to add descriptions or supporting information.

   2. Fully customizable to include links, styled text, or additional details.

6. Alignment Options

   1. Adjust the alignment of content separately for desktop and mobile:

      • Desktop Content Align: Left, Center, or Right.

      • Mobile Content Align: Left, Center, or Right.

7. Section Padding

   1. Add padding to customize the spacing around the section for seamless integration with other elements on the page.

Section Settings Overview

Here’s a breakdown of the settings available for this section:

Color Scheme

• Color Scheme

  • Choose the section's background and text colors from predefined options.

• Content Color Scheme

  • Customize the color scheme specifically for the collapsible content text.

Width Control

• Use Max Width

  • Enable to restrict the section's width for better focus on content.

• Content Container Width

  • Adjust the container width with a slider for precise sizing (default is 50 rem).

Accordion Behavior

• Open Only One

  • Enable to allow only one collapsible block to be open at a time.

Heading and Text

• Heading

  • Add a title for the collapsible content section.

• Heading Size

  • Select the size of the heading for emphasis (Small, Medium, Large).

• Text

  • Add additional descriptive text or details below the heading.

Alignment

• Desktop Content Align

  • Set the alignment for the desktop view (Left, Center, Right).

• Mobile Content Align

  • Set the alignment for the mobile view (Left, Center, Right).

Steps to Add the Collapsible Content Section

1

Access the Theme Editor

1. Log in to your Shopify Admin

2. Navigate to Online Store > Themes and click Customize.

2

Add the Collapsible Content Section

1. In the Theme Editor, click Add Section.

2. Search for Collapsible Content and add it to your desired page.

3

Configure the Section Settings

Refer to the screenshot below for guidance while adjusting the settings:

1. Customize the Color Scheme to match your branding.

2. Use the Width Control settings to adjust the content width.

3. Enable or disable Open Only One based on your preference for accordion behavior.

4. Add a Heading and adjust its size using the dropdown.

5. Use the alignment options to fine-tune content placement for both desktop and mobile.

6. Add padding if needed to separate this section from other content on the page.

4

Save and Preview

1. Click Save once you’ve made the changes.

2. Test the section on different devices to ensure proper alignment and spacing.

Best Practices

• Use clear, concise headings for each collapsible block to improve usability.

• Test the section on different devices to ensure proper alignment and spacing.

• Use the Open Only One option for FAQs to improve clarity.