Accordion

This section will help you to build your tabs in Accordion style with smooth animation. It’s considered one of the best elements to optimize your page’s content with just a few simple steps.

• Step 1: Click into Elements > Basic > Accordion
• Step 2: Drag/Drop the Accordion element wherever you want it to stay.

1. Content

1.1. Items

• In each item tab, it will go with the basic settings below:
  • Add New Item – create additional item.
  • Duplicate – clone an existing item.
  • Delete – remove any item.
  • Reorder – drag item to change display order.
• Move to deeper inside the Item setting, you can modify:
  • Title: That tells users what information is hidden inside before they decide to click.
  • ID target: A unique identifier used primarily for linking (via code) and functionality.
  • Choose type: This will enable you to place an Icon or an Image next to the title of the accordion. When you choose Icon or Image, the respective setting will be shown to continue modifying.
  • HTML tag: The HTML structure of the Accordion element serves primary purposes of interactivity and SEO.
  • Content type: Below are the descriptions of choosing to use Text or Liquid code (use for metafield) in this case.
    • Text (Static Titles): With this, you will enter the information manually. This is for information that is the same for all pages.
    • Liquid / Metafield (Dynamic Titles): With this, the different titles will be used for each page. Click ‘here’ to see the guideline.

1.2. General

• Disable auto close: Disabling this feature allows multiple sections of the accordion to remain open simultaneously, giving users the flexibility
• Scroll up to the Tab title when opening tabs on mobile: Enhance user experience by ensuring that when a tab is opened on mobile, the page scrolls up automatically to display the tab title.
• Default close: automatically close when the page loads or when a user interacts elsewhere.
• Disable effect animate accordion: Simplify interactions and speed up navigation by removing animation effects from your accordion components.
• Speed (ms): Adjust the animation speed to control how quickly sections open and close
• 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).

2. Design

• Box title:
  • Alignment: Control the alignment of your accordion’s text and icons for a clean and professional look
  • Box Shadow: Add depth and emphasis to your accordion with shadow effects
  • Width, Background, Border, and Border Radius: Style your accordion’s container and tabs to align with your brand aesthetics while it’s normal, hover, or active.
  • Spacing: Control padding and margin to improve readability and design flow.
• Tab icon & Title icon
  • Size: You can change the size of icons (available for desktop, tablet, and mobile devices).
  • Rotate: Set rotation value for icons (available for desktop, tablet, and mobile devices).
  • You are also allowed to change Color, Background, Border, and Box Shadow for all Normal, Hover, and Active states.
• Title
  • Typography: Customize the typo option for you to make.
  • Text Shadow: Adjust the shadow effect for your text.
  • Text Color: Choose a color for your text.
• Image
  • You can set Width, Max width, Height for Image
  • Choose Image fit: Default, Fill, Contain, Cover, Scale down
  • By customizing Opacity, CSS filters, Box shadows, Border, and Border radius for normal and hover states, you can create a dynamic and visually engaging experience for users.
• Content
  • Background: Set background color for tab’s content area.
  • Box Shadow: Set box-shadow value for the content.
  • Border: You can customize the border style, width, and color for the tab’s content area.
  • Border Radius: Define how round the corners of the tab’s content area are (available for desktop, tablet, and mobile devices).
  • Spacing: Set margin or padding value tab’s content (available for desktop, tablet, and mobile devices).

3. Using Dynamic Titles (Liquid/Metafield)

Normally, this setup is used when you want to build an Accordion element on the Product page, where each product can have different titles and content. In this case, Metafields are used to store and display dynamic content for each item, instead of using static content. Please follow the steps and guide video below:

Step 1: Go to Shopify admin -> Settings -> Metafields and Metaobjects > Products.
Step 2: Click Add definition to create -> Enter the Name -> choose Single line text to use.
Step 3: Go to the Products > Open the product that you need
Step 4: Find the Metafield that you just created -> Enter the title content.
Step 5: Open your page in the EComposer app -> Enter the metafield code in the Title field.

{{ product.metafields.custom.accordion_title  | metafield_tag }}

custom.accordion_title will be changed based on what you named in the Metafield in Shopify from Step 2.