Product Accordion

Author: Henry Pham 1467 views

EComposer allows you to add Product Accordion to the product page. There is also an Accordion Tab on Basic Element, however, you should go to Elements > Single Product > Product Accordion to use the special features of Accordion for a product.

To adjust the content of Product Accordion, please click on the Accordion button on the top of the Element.

1. Content

1.1. General

Icon: Choose the Icon for the tab title in a non-active mode.
Icon Active: Choose the Icon of the accordion title in active mode.
Icon Position: A flexible option that allows you to choose where to put the Icon of the accordion title (to the left or right).

1.2. Item

This is the place where you can add Titles for Accordion, you also can change HTML tags for them. Moreover, you are allowed to Move, Delete, Clone, and Add these items freely. There is a button called Preset at the end, you can click there to paste available accordions, or even only their styles.
How to configure the content inside? One of the outstanding functions is EComposer allows us to add any reasonable Elements for the content insight. The reasonable Elements mean Basic/ Shopify/ the elements for the page. For example, you can’t add the Collection’s elements to the product page. This is the function that themes can not do.

2. Design

2.1. Heading

Alignment: Set the position of each accordion title (available for desktop, tablet, and mobile devices).
Background, Border, Spacing: You can freely change these options for the Heading for Normal, Hover, and Active mode.

2.2. Title

Typography: Customize the typo option for you to make.
Besides, you can also set

2.3. Icon

Size: You can change the size of icons (available for desktop, tablet, and mobile devices).
You are also allowed to change Rotate, Color, Background, Border, and Border Shadow for all Normal, Hover, and Active states.

2.4. Content

The same as other elements, you can also change the Background, Box Shadow, Border, Border Radius, and Spacing for the content insight. If you need anymore details about theme, please go here to figure them out!