Install #1 Page Builder App for FREE and get deal 6 months of Standard Plan. Hurry up! See Detail  

Header background

Kalles - Accordion


Written by Annie

Last updated


On this page

It is usually located on FAQ page. However, Shopify 2.0 allows you to add the Accordion section to any pages that you wanna use.

Steps: In theme editor (Customize), click Add section > Accordion > Save

1. Accordion item

In Accordion section, you can add an Accordion item block. It includes Accordion icon, label and content.

2. How to configure the Accordion section?


You can enter the Heading, Subheading. You also can choose the Heading design, Center heading align or Space bottom.


  • Accordion design: We have total of 2 designs for Accordion items.

  • Color options: you can change color for label, content, background

  • Content align: choose the align left, center or right for content

  • Auto active 1 items: The first accordion item will be auto active when you open the page.


Please follow this guideline to config Layout, Background, Margin/Padding for the section.

[Private Offer] EComposer Partner Plan

Exclusively for The4 users, when you bougth any theme from us, you can get Ecomposer - Theme Partner Plan for ZERO and start making beautiful, high-converting store pages today:

  • FREE 100% EComposer Standard plan for 6 months (save you $114)
  • Build ANY Shopify pages: Landing page, Sale Funnel page, Lead pages, & other custom pages tailored for your marketing campaigns.
  • Create advanced sections & add to your theme with ease
  • 100+ professtional, stunning designer-made templates
  • Build pages with a love drag-drop editor, no coding required

How to claim offer. Install EComposer HERE. Then open chatbox icon in EComposer dashboard and leave a message with subject "Theme name+EComposer" to upgrade for free

Cheers, The4.

We highly recommend Shopify apps from our partners.

We uses cookies to ensure you get the best experience on our website.