How to create an FAQ widget
Build a list of questions and answers, style it to match your theme, publish it, and add it to your home, product, collection or other pages.
An FAQ answers the questions shoppers ask before they buy, right on the page where they ask them.
TL;DR
Go to Store Widgets, click Create Widget and pick the FAQ widget. Add your questions and answers, pick a style and layout, then click Publish. Click Add to store to place it with the theme editor. You need an Online Store 2.0 theme.
Step 1 · Create the widget
In Nudgesmart, open Store Widgets and click Create Widget. Pick the FAQ widget. The editor opens with a few sample questions so you can see how it looks. If you haven't told us about your store yet, a short Store details screen first asks a few questions about your shipping, returns and contact email, so the answers are written with your real policies. You can skip it, and change your answers any time from Store Details on the Store Widgets page.
Widget library with the FAQ widget highlighted
Screenshot coming soon
Give your widget a clear name under Widget information, such as "Shipping questions". The name shows as the heading on your store unless you change it in the theme editor.
Step 2 · Add your questions and answers
In the Items tab, click an item to edit it, or add a new one. Each item has a question and an answer.
Items tab with the FAQ question list and the question and answer fields
Screenshot coming soon
Tips for answers:
- Keep each answer short. A question can be up to 200 characters, and an answer up to 1,000.
- Start a line with a dash and a space (
-) to turn it into a bullet point. - Answer the questions you get most by email first: shipping, returns and sizing.
You can also bring in questions from a spreadsheet. Click Import in the editor.
Step 3 · Pick a style and layout
Open the Design tab. Choose a Style, then change the layout options until it looks right in the preview.
Design tab for the FAQ widget with Style, Open and close icon, and Desktop layout options
Screenshot coming soon
Your options:
- Style. Match my theme uses your theme's fonts and colors. Minimal is a lighter look.
- Open and close icon. A plus sign or an arrow.
- Show lines between questions.
- Open the first question when the page loads.
- Desktop layout. Accordion opens answers in place. Tabs shows questions side by side on wide screens. Phones always use the accordion.
- Accent color, Corners and Space between items.
Use the Desktop and Mobile tabs above the preview to check both sizes.
Step 4 · Publish and add it to your store
In the Status & publishing card, click Publish. Then click Add to store and follow the steps.
The FAQ widget works on your home page, product pages, collection pages and other pages. The full steps, including the Widget dropdown in the theme editor, are in How to add a Nudgesmart widget to your store.
Show a different FAQ on different products
Want a "Furniture care" FAQ on furniture and a "Bedding care" FAQ on bedding? Open the Settings tab and use Show on products to match collections, tags, brands or product types. See show different widgets on different products.
Common pitfalls
- My edits don't show on the store. Click Publish changes. Edits stay as a draft until you publish.
- The FAQ shows the wrong heading. The heading comes from the theme editor's Heading setting first, then the heading you set in Nudgesmart, then your widget's name. Clear the ones you don't want.
- Answers look like one long block. Break them into short lines, or use dashes for a list.
Frequently asked questions
Can I have more than one FAQ widget?
Yes. Make one per topic, then pick the right one in each block's Widget setting, or use matching rules on product pages.
Does the FAQ follow my theme's fonts?
Yes, with the Match my theme style. It uses your theme's fonts and colors.
What to read next
How to add a Nudgesmart widget to your store
Publish a widget, place it with the Shopify theme editor, pick it in the Widget setting, and show different widgets on different products.
How to create a size guide widget
Build a size chart for your product pages, add a fit note and measuring picture, publish it, and show the right chart on the right products.