Widget Categories: Basic
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.
Dynamic Content
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.
-
For inline binding with an Accordion widget, see Inline Binding.
-
For displaying dynamic pages, see Dynamic Content: Display and Navigation Options for Collection Records.
-
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.
-
-
Textual Content. Title/question and description.
-
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 more information on the AI Assistant, see AI Assistant Overview and Features.
-
-
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.
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.
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.