How to use the Accordion add-on

This article will introduce you to the Accordion and how to use the Accordion add-on in EcomSolid.

About the Accordion

An Accordion is made up of multiple items containing a title and body with expanded content. You may see them frequently on FAQ pages, where it allows visitors to read the list of questions without being distracted by a lot of information and gives them control by enabling them to click on the relevant questions.



Add the add-on to your page

Step 1: From the EcomSolid Dashboard, head to the Theme Editor or Page Editor.


Step 2:  Access the Library from the top bar of the Editor Page.



Next, navigate to Add-ons > Default and look for the Accordion add-on.



Hit “Add” to insert it into your Editor.

Configure the add-on settings

Click on the add-on to start configuring the settings.

Display position

Hit the "Pick the position” drop-down menu to select a position from the list. 



Otherwise, click on “Change position.” You will be able to drop the add-on to a specific position on your page.

List Items

In this section, you can:

  • Add/remove items by hitting either the duplicate icon or the trash icon, respectively.
  • Upload the open/ close icons as you want to replace the default icons.


You will see a list of atoms included in the Accordion add-on. Each atom represents one element.  Hover over the atom and click on the Eye icon to hide/show the atom then.



How to edit the item content

Step 1: Click on the Title or Content under the atom list or the Accordion add-on to reveal the configuration on the left sidebar. 


Step 2: Input your preferred content into the Text field. You also can customize the text further, including Typography, Layout, Animation, etc.


That's it! If you run into any problems when editing, please get in touch with our Customer Support via email or live chat.

Was this helpful?