How to use the Accordion elmement

In this article, you will learn about Accordion elements and how to use them to create highly converting pages.

What is Accordion elements? 

Accordion elements are designed to be a vertically stacked list of headers that can be clicked to reveal or hide content associated with them. It is one of many ways you can expose content to users in a progressive manner. Allowing people to have control over the content by expanding it or deferring it for later lets them decide what to read and what to ignore. 


You can quickly find this element on the left sidebar of the editor page.



An Accordion element includes multiple Block Text elements and blank sections that you can drag and drop other elements to demonstrate the content you want to have.  


Settings Tab's Parameters

    1. Tab 

            • Add and Remove button: It allows you to increase more tabs  or delete the current one 

            • Name: You can add the title for each item. 


          • Background: You can change the current tab's background color. 

        1. Accordion Type: You can determine only one or multiple tabs can be opened at a given time. 

        2. Icon Type: It lets you choose the icon to represent the action of expanding or contacting the tabs. There are three primary icon types including None, Plus, and Chevron. 

        3. Open Tab: When you enable the feature you can choose the tab that will be expanded by default.


        1. Border: You can change the color of the borders between tabs.


      1. Extra Class: If you wish to customize the variant's content element particularly, please use this field to add a class name and then refer to it in the CSS file.  

How can I change the background of accordions?

You can edit CSS code slightly to make work. Kindly follow the instruction to do so. 

How can I create FAQ pages for my website? 

      • Step 1: Create a subpage 
        Click on Sub Pages on the left sidebar of the Dashboard, and you should see the Create new page post button on the right. Go ahead and hit on this button.

      • Step 2: You can drag and drop the Accordion element, Heading elements, Image elements to complete the FAQs page.  

      • Step 3: Link your FAQs page to the live store
        • Go to Shopify AdminOnline Store> Navigation
        • Choose any menu you want to add your Subpages in or create a new menu.
        • In the menu, click on Add menu items, insert Name and pick your sub-page in Link and then Save.
          Kindly follow the video below to have a better understanding of how to do so. 

Accordions are a true hidden gem. Especially,  when you need only a few key pieces of content on a single page. By hiding most of the content, users can spend their time more efficiently focused on the few topics that matter.

Was this helpful?