Accordion Widget

The accordion widget helps visitors find exactly the information they are looking for easily. Add it to your sites and visitors do not need to scroll through blocks of content they are not interested in. Instead, they can be shown a list of questions or titles and simply choose to open the ones they want to read more about. Create compact and easy-to-read FAQs, product highlights, or upcoming events.

This widget can also display dynamic pages as well as specific collection or product information using Inline Binding. See the articles listed below for more information.

• To display dynamic pages with an Accordion widget, see Add Lists to Display Dynamic Pages.

• For inline binding with an Accordion widget, see the Inline Binding section in Connected Data.

To add accordion widgets:

1. In the left panel, click Widgets.
2. Click and drag the Accordion widget into your site.

To learn more about adding widgets to your site, see Add Widgets.

Content Editor

Adding the widget opens the content editor. In this menu, you can add or modify the fields of the widget.

• Items. Click an item to configure its content, click the duplicate icon to duplicate an item, or click +Add Item.

• Display Rules.

  • Show one expanded item at a time. Set it so visitors can expand only one item at a time or can view several expanded items at the same time.

  • Show first item expanded. Set it to show the first item expanded or have them all collapsed.

• SEO.

  • Enable FAQ Schema. Enable this toggle to generate FAQ schema markup once per page. To test if your schema was generated properly and see a preview, use the Rich Results Test.

For Accordion widgets added to a site prior to February 2024

• Items. Click an item to configure the Title, Description, and Title Heading Type. Header tags are available to make your text more easily identifiable by search engines. It is recommended you select H3 for the Title Heading Type.
• Show first item expanded or Only show one item expanded. The content editor also provides the option to select whether you prefer to hide the content of all items in the accordion or display only the first item when users first open the widget. In addition, you may choose whether visitors can expand only one item at a time or can view several expanded items at the same time.
• Title icon. Depending on the layout you choose, your accordion widget may have a title icon. The title icon is the icon next to the item title, and may be different across all items. For example, you may want to set add a clock icon next to your event time, or a money icon next to a pricing item.
• Generate FAQ Schema Markup. Enable this toggle to generate FAQ schema markup once per page. To test if your schema was generated properly and see a preview, use the Rich Results Test.

The design editor lets you control the layout and styling of the accordion widget.

Design Editor

To access the design editor:

1. Right-click the widget, and click Edit Design.
2. Edit the design options of the expandable icon. The expandable icon appears on all items in the widget, and corresponds to the icon you click to expand the item.

You can edit the title, description, expandable icon, and frame style. Following are the settings you can edit: 

• Type (the header tag; header tags are available to make your text more easily identifiable by search engines. It is recommended to set it to H3)

  Font (family, size, color, and format)

• Alignment

• Text direction

• Background color

• Border

• Image. Only one image can be assigned per element. For all elements the image appears in the background.

For information about design options that are not specific to this widget (for example, layout, style, or spacing), see Widget Design.

• Make sure the design settings you define are correct per device. As usual, settings such as spacing (of the whole widget and individual items), width and more are defined per device. For more information, see Edit by Device.