Skip to main content

Customize the FAQ widget

The visible FAQ accordion has one mount point, and on BigCommerce it also carries every option:

<div data-clione-faq></div>

Put that element wherever you want the accordion to appear — in a theme template, in a Page Builder HTML block, in the HTML view of a content page. On BigCommerce, every option below is an attribute on that same element. On Shopify the element only sets the position. With embed.js, the options go on the <script> tag.

What this page does not affect

On BigCommerce and Shopify themes, the FAQPage structured data that search engines and AI crawlers read is written into your storefront's HTML by the server, before the page is sent to the browser. It is not produced by this widget, so moving the accordion, restyling it, or removing the anchor cannot change what a crawler sees. With embed.js, the structured data is added in the browser.

Where the accordion lands​

On BigCommerce, the Schema Injector script (Clione FAQ Renderer) resolves the mount point in this order, and stops at the first match:

  1. [data-clione-faq] — the element described on this page. If it is in the page, the accordion renders inside it, whatever else is configured.
  2. A per-entity-type selector set in FAQs → Advanced → Style → FAQ widget placement (a different CSS selector for products, categories or pages, with the accordion before or after the element). For merchants who cannot edit their theme template, or who want a different position per entity type.
  3. The store-wide selector (Default) set in the same place.
  4. The end of <main> (or [role="main"] if your theme uses that instead).
  5. The end of #main-content — BigCommerce Cornerstone-family themes render product pages without any <main> element; their universal content wrapper is <div class="body" id="main-content">, which sits just above the footer.
  6. Nothing. If your theme has none of the above, the widget logs an error in the browser console and renders nothing. It deliberately does not fall back to the end of <body>, because that usually puts the accordion below the footer, which looks broken.

If you are happy with the accordion at the end of your main content area, you do not need to do anything at all. Add the anchor when you want it somewhere specific, or when you want the options below.

The other two surfaces use a shorter order:

Where the accordion comes fromWhere it lands
Shopify (the Clione FAQ app embed)The accordion is rendered by your theme before </body> and then moved: into [data-clione-faq], else into [data-clione-faq-target], else just above the footer, else it stays at the end of <body>.
Headless / WordPress (embed.js)The element in the tag's data-target, else [data-clione-faq], else just above the footer, else the end of <body>.

The placement selectors apply to BigCommerce only.

Content options​

These are read on BigCommerce, from the anchor. On Shopify they have no effect. For embed.js, see the headless section.

AttributeWhat it does
data-clione-faqMarks the element as the FAQ mount point. Required — every other attribute is read from this same element.
data-headingOverrides the "Frequently Asked Questions" heading text.
data-localeBCP-47 tag (en, es, es-ES, fr, de, it, pt) selecting the built-in heading translation. Ignored when data-heading is set.
data-styledefault (boxed card) or minimal (layout only, no box or colour). Overrides the store-level setting for this page.
data-style-themeNamed palette applied on top of the defaults. dark is built in; any other value just adds a clione-faq-theme-<name> class for your own CSS to target.
<div data-clione-faq
     data-heading="Sizing and fit"
     data-style="minimal"></div>

Style options​

Each attribute sets one CSS custom property on the rendered accordion. Leave one out and the accordion keeps its default. The defaults below are the BigCommerce widget's; on Shopify these attributes have no effect.

AttributeCSS custom propertyDefaultWhat it does
data-style-accent--clione-faq-accentcurrentColorAccent colour: the open/close chevron and the rule under the heading.
data-style-bg--clione-faq-bgtransparentBackground of the whole FAQ block.
data-style-fg--clione-faq-fginheritText colour for the heading, questions and answers.
data-style-border--clione-faq-borderrgba(0,0,0,0.1)Colour of the list outline and the separator lines between questions.
data-style-border-width--clione-faq-border-width1pxThickness of the separator line between questions.
data-style-radius--clione-faq-radius8pxCorner radius of the list container.
data-style-font--clione-faq-fontinheritFont family. Defaults to whatever the theme uses around the widget.
data-style-font-size--clione-faq-font-sizeinheritBase font size for questions and answers. Defaults to the surrounding theme text size.
data-style-spacing--clione-faq-spacing1emPadding unit. Drives the space inside each question row.
data-style-line-height--clione-faq-line-height1.6Line height for answer text.
data-style-heading-weight--clione-faq-heading-weight600Font weight of the "Frequently Asked Questions" heading.
data-style-heading-border-width--clione-faq-heading-border-width0Thickness of the rule under the heading. 0 hides it.
data-style-question-weight--clione-faq-question-weight600Font weight of the question text.
data-style-answer-weight--clione-faq-answer-weight400Font weight of the answer text.
data-style-max-width--clione-faq-max-widthnoneMaximum width of the block, with its unit (720px). Set a value and the block centres itself.
<div data-clione-faq
     data-style-accent="#c2185b"
     data-style-max-width="720px"
     data-style-radius="12px"
     data-style-question-weight="700"></div>

The same attributes on a headless storefront​

If you install Clione with the universal embed.js loader (headless storefronts, WordPress, anything that is not a BigCommerce or Shopify theme), the data-style-* names are the same — you write them on the <script> tag instead of on an anchor element, and you point the loader at your anchor with data-target:

<script src="https://api.clione.ai/embed.js"
        data-api-key="YOUR_KEY"
        data-target="#faq"
        data-style-accent="#c2185b"
        data-style-max-width="720px"></script>

Differences from the BigCommerce widget:

  • There is no data-style attribute.
  • data-locale shows only the FAQs in that language; it does not translate the heading.
  • There is no built-in dark theme: data-style-theme only adds the clione-faq-theme-<name> class.
  • The defaults differ — see the embed script column in Customize the look.

Store-wide styling​

Everything above is per page. For a change that applies to every page, open FAQs → Advanced → Style, write it in Custom CSS (scope: .clione-faq) and click Save custom CSS. It can set the same --clione-faq-* custom properties:

.clione-faq {
  --clione-faq-accent: #c2185b;
  --clione-faq-max-width: 720px;
}

On BigCommerce it is applied automatically, and an attribute on the anchor wins over it for that one page, because the attribute is applied as an inline style. With embed.js, paste it into the snippet. On Shopify it is not applied.

Troubleshooting​

The accordion does not appear (BigCommerce). Open the browser console on the page. The widget logs exactly which branch it used — the placement selector, the anchor, the end of <main>, or the end of #main-content — and logs an error if it found none of them. If it found none, add a <div data-clione-faq></div> to the template.

The accordion appears below the footer. Your theme's <main> almost certainly wraps more than you expect, or you set a store-wide selector that resolves near the bottom of the page. Add an anchor where you want it: an anchor always wins — over the placement selector and over the <main> fallback.

A style attribute has no effect. Check for a store-level custom CSS rule setting the same property with !important, and check that the value is a valid CSS value for that property (on BigCommerce data-style-max-width="720" does nothing, 720px works). On Shopify, style attributes are not read.