How to Use Electro Collapsible Content
Overview
| 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 Section
What is Electro Collapsible Content?
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 Content
From any page, please click on ‘Add Section’ on the left side bar, then choose ‘Collapsible Content’
Collapsible Content Section Configuration
Electro theme allows you to customize for the Collapsible content section with following settings:
Edit General
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 Layout
There are 2 types of alignment that you can set for the heading and content items on mobile:
- Left
- Center
Edit Image
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 Button
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 Items
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 Block
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 Questions
What is Electro Collapsible Content?
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?
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?
Yes, but you can only add one, by clicking ‘Collapsible content’ > ‘Button’ > Fill the ‘Button Text’ and ‘Button Link’.
Can I add a link to a Collapsible row?
Because the button isn’t available in this area, therefore you can only add links by adding hyperlink within description text.