How to Use Electro Collapsible Content

OverviewClick to copy 2222

How many Collapsible items could I add to One Electro Collapsible Content Section? Max of 10
What is Electro Collapsible Content best used for? FAQs – Frequently Asked Questions
What is the image ratio for the Electro Collapsible Content Section? Square, Adapt to Image, 2:3 and 3:2

About Collapsible Content SectionClick to copy 2222

What is Electro Collapsible Content?Click to copy 2222

Electro Collapsible Content section in the Electro Shopify theme allows you to create sections of content that can be collapsed or expanded by the user. This is a great way to organize your content and to make it more user-friendly.

Access Electro Collapsible ContentClick to copy 2222

From any page, please click on ‘Add Section’ on the left side bar, then choose ‘Collapsible Content’

Collapsible Content Section ConfigurationClick to copy 2222

Electro theme allows you to customize for the Collapsible content section with following settings:

Edit GeneralClick to copy 2222

The Collapsible Content section follows general settings of the section, which contains the setup for the Heading content, including heading, subheading, and description.

You need to click on the Collapsible Content to set up for this section, and if you want to remove any settings, just delete the content and give it a blank space.

There are 2 options you can set the color scheme for this section, and to change the color scheme, please update your Theme settings. Learn more about Theme settings here.

  • Scheme 1
  • Scheme 2

Edit LayoutClick to copy 2222

There are 2 types of alignment that you can set for the heading and content items on mobile:

  •  Left

  • Center

Edit ImageClick to copy 2222

Along with text elements, you can also add an image to the section by clicking the ‘Select image’ button to upload. The recommended size is 1600px x 800px .png

The Image ratio can be selected from:

  • Square

  • Portrait (2:3)

  • Landscape (3:2)

  • Adapt to Image: Show the image in its original size

Edit ButtonClick to copy 2222

To add button text and button link, click on the placeholder and insert the content. And if you want to remove the button, just delete the content on the button in the button placeholder.


Note: If the button link box is empty, the button will be displayed in its disabled state.


Edit Collapsible ItemsClick to copy 2222

The Collapsible section by default shows an icon on each item. You can disable this option in the Settings tab.

You can also choose to automatically expand the first item content after the section is loaded by enabling the Expand first item initially option.

Configure Collapsible Item BlockClick to copy 2222

To add more collapsible items to the section, click on the “Add Collapsible items” button. By default, the section will show 5 items, but you can add up to a maximum of 10 items.

To add more content to each item, click on the item.

To change the default icon, you can select a different icon shape from the dropdown menu or upload your own custom icon by clicking “Select Image” or add Custom SVG file. You can find a list of all the icons that are available for the Electro theme and how to add your own custom icon here.

Click on the placeholder then insert Heading and Description for the item.

You can also add content from a page to each item by clicking the Select page button. If you fill in both the Description field and the Content from page field, both the descriptions and the content from the page will be displayed.

Frequently Asked QuestionsClick to copy 2222

What is Electro Collapsible Content?Click to copy 2222

The Electro Collapsible Content section allows users to collapse or expand the contents; as the great way to present complicated content.

What are the types of files available in one Collapsible item?Click to copy 2222

There are three types of files available in one Collapsible item, including an icon (which you can choose from the default library, or add your own); a heading and a short description (which you can import from another page, to avoid having to manage too much-duplicated contents).

Can I add a Button to Electro Collapsible Content?Click to copy 2222

Yes, but you can only add one, by clicking ‘Collapsible content’ > ‘Button’ > Fill the ‘Button Text’ and ‘Button Link’.

Because the button isn’t available in this area, therefore you can only add links by adding hyperlink within description text.

Navigate this category