Widget Categories: Basic
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.
Dynamic Content
This widget can also display dynamic pages as well as specific collection or product information using Inline Binding.
For inline binding with an Accordion widget, see Inline Binding for Accordion widget.
For displaying dynamic pages, see Display and Navigation Options for Collection Records.
For information on adding widgets, see Add Widgets.
Tip
Fore more information on widgets and the widgets library, see Widgets: Library and Overview.
Content Editor
To access the content editor, right click the widget and select Edit Content. Or, if you are in flex mode or Editor 2.0, the option to access the content editor is available in the floating menu.
Accordion Setup Options
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.
Individual Items Setting and Options
Textual Content. Title/question and description.
Note
The long text field provides various text formatting options, such as italicizing, bolding, or underlining text.
Button. If a button isn't desired, click the eye icon to hide it.
Media (image or video). Add desired media. Select Click to add media to open the Media Library.
Alt text. Once Media has been added, an Alt text field will appear. Type your own alt text or click the Sparkle icon to use the AI Assistant to generate alt text. Repeat for each individual piece of media in the Accordion or click All Alt Text to view and manage alt text for all site images.
Note
Alt text generated by the AI Assistant is in the same language as the page’s current language.
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.
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.
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.
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.
Design Editor
To access the design editor, right-click the element, and click Edit Design. Or if you are in flex mode or Editor 2.0, select Edit Design from the floating menu to open the design panel.
The following are some of the sections and settings that can be found:
Layouts. Click the layout thumbnail to select a layout.
Title:
Select the heading type (h1-h6 is available) and style text as desired.
Style the title bar as desired (background and border).
Expansion icon. While the icon itself can't be changed, you can customize its elements, such as adjusting its size and color, as well as modifying its background.
Media. If images will be included in the content of the accordion items, configure them here.
Frame. Various settings can be found in this section, including adjusting the space between items.
For information about design options that are not specific to this widget (for example, layout, style, or spacing), see Widget Design.
Note
Changing the layout of the accordion widget may override some of the settings you have defined (for example, spacing between items). Check all settings after editing the widget and recreate any ones that are missing after you change the layout.
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.