A Shopify FAQ accordion should look like part of the product page, not like a widget dropped in from another site. Product FAQs for AI Crawler offers four templates on the block: Accordion, which is the default, Grid/cards, Boxed, and Minimal. You pick one per block. The product page and a help page can use different layouts.
The widget renders in a shadow DOM. Theme CSS is less likely to restyle the questions, and the widget's CSS is less likely to leak into the theme. That is isolation. It is not a promise that every theme looks identical, and it does not match your font, heading scale, or button radius by itself. If the FAQ still feels foreign, the usual fix is the template choice and a look at spacing on the live page, not a fight with the theme's stylesheet.
The four layouts
Accordion is the compact list shoppers already understand. The question is visible. The answer opens when they choose it. It fits under a product description, where vertical space is shared with photos, price, and add to cart. Use it when most shoppers need one or two answers, not a wall of text.
Grid/cards places questions as cards. The marketing page for the app labels this template Card Grid. It is the same Grid/cards layout. Cards suit a store FAQ page that people scan, because more of the question is visible without a single narrow column. Boxed gives each question its own box, with more separation. Minimal drops toward quieter rows for a theme that is already spare. None of the four is a custom design per theme. They are four fixed presentations you select.
- Accordion: the default, one answer opened from a stacked list.
- Grid/cards: questions as cards for a page people scan.
- Boxed: each question in its own separated box.
- Minimal: quieter rows for a sparse theme.
The admin can show a live template preview while you edit the group. The storefront choice still lives on the theme block, so confirm the block setting after you leave the wizard. A preview inside the app and the block on the product template are two different screens. The shopper sees the block.
What shadow DOM changes in practice
Theme styles often target buttons, headings, and lists across the whole page. A FAQ widget in the light DOM inherits those rules and can end up with the wrong type size, a broken chevron, or a list marker from the theme. A shadow DOM draws a boundary. Most of those rules stop at the boundary. That is why the FAQ is less likely to break when you switch themes or edit the theme CSS.
The boundary has a limit. The block still sits in your section, so the theme controls the column width, the margin above the block, and the background of the section. A narrow column can make Grid/cards feel cramped. A section with huge padding can make Minimal look lost. Adjust the section in the theme editor. Do not expect the template to copy the theme's typeface.
FAQPage JSON-LD is deliberately outside that shadow DOM. Both the product block and the global block emit it in the light DOM, built from the FAQ data, so a crawler can read the questions and answers without running the widget. The visible layout and the JSON-LD are separate. Changing Accordion to Boxed does not remove the structured data, and the structured data is not a visual layout.
Search and pagination on every layout
The widget includes a search box that filters as the shopper types. The filter is a substring match on the question and on the answer, so a shopper who types a word from the answer can still find the row. This is FAQ search, not the store's product search. It is worth turning your attention to when a group is long. On a three-question accordion it adds a box some themes do not need. You can judge that on the page.
Load More reveals items that were hidden, in batches set by the group's pagination size. Opening an accordion and revealing more items are both recorded as interactions in analytics. An impression is recorded once per FAQ group shown on a page load. Those counts tell you the list was seen and that someone opened or revealed it. They do not tell you the layout converted a sale.
A visual test before you keep the layout
The feature catalog does not document keyboard order, focus outlines, color contrast, or screen-reader names for the four templates. Test those on your theme rather than assuming the widget handled them. Open the product page, tab through the FAQ, and open one answer. Then repeat on a phone width. If focus disappears inside the widget, or if the open answer is clipped, fix the section width or pick another template before you add more questions.
Check a product that has a group and a product that does not, so you know the block stays quiet when the metafield is empty. Check the global page separately if you use a shop-wide group. Save a small wording change and reload the storefront. The new text should come from the metafield written at save time. The page should not need a call to the app merely to display the list.
- Compare Accordion and Grid/cards on the same three questions.
- Read the section on a phone, not only in the desktop theme editor.
- Tab to a question and open it with the keyboard.
- Confirm the column width still leaves room for the answer text.
Questions about FAQ layouts
Will the widget match my theme font?
Isolation reduces CSS clashes. It does not copy the theme font automatically. Judge the result on the live page.
Can the product page and the help page use different layouts?
Yes. The template is selected per block. Accordion on the product and Grid/cards on the help page is a valid pair.
Does the layout include store search?
The box filters question and answer text in the FAQ widget. It does not search products.
Install from Product FAQs for AI Crawler after you have picked a layout on a real product template.
Review the four templates on Product FAQs for AI Crawler. Keep the one a shopper can open without the FAQ looking like a second website.