What are Widgets?
Widgets are blocks you add to product pages to show the Q&A feature. There are two blocks:
- Q&A Ask Question Form — Form for customers to submit questions
- Q&A Questions Display — Shows existing questions and answers
Adding widgets to your theme
How to add
- Go to Shopify Admin → Online Store → Themes
- Click Customize on your active theme
- Open a product page
- Click Add section or Add block
- Find “Q&A Ask Question Form” or “Q&A Questions Display”
- Add the block(s) you want
- Configure settings
- Click Save
Where to place them
- After product description
- Before product reviews
- In a custom section
- Anywhere on the product page
Q&A Ask Question Form block
What it does
- Shows a form for customers to ask questions
- Can display inline or in a modal
- Supports AI features (if enabled)
Settings
General
- Form Title — Heading text (default: “Ask a Question”)
- Title Font Size — 14–48px (default: 24px)
- Form Width — Max Width or Full Width
- Max Width — 300–1000px (default: 600px, only when Max Width is selected)
Content
- Name Field Label — Label for name field (default: “Your Name”)
- Name Required — Make name field required (default: true)
- Email Field Label — Label for email field (default: “Your Email”)
- Email Required — Make email field required (default: true)
- Question Field Label — Label for question field (default: “Your Question”)
- Submit Button Text — Submit button text (default: “Submit Question”)
Form styling
- Form Background Color — Background color (default: #ffffff)
- Form Inner Padding — 10–60px (default: 30px)
- Form Border Radius — 0–25px (default: 8px)
- Form Border Width — 0–5px (default: 1px)
- Form Border Color — Border color (default: #e1e1e1)
- Show Form Shadow — Enable/disable shadow (default: true)
- Form Shadow Color — Shadow color (default: rgba(0,0,0,0.1))
Submit button
- Submit Button Background — Background color (default: #007cba)
- Submit Button Text Color — Text color (default: #ffffff)
AI vote buttons (if AI enabled)
- Helpful Button Text — Text for helpful button (default: “Helpful”)
- Not Helpful Button Text — Text for not helpful button (default: “Not Helpful”)
Q&A Questions Display block
What it does
- Shows published questions and answers
- Includes search
- Can include an “Ask Question” button
- Supports infinite scroll
Settings
General
- Section Title — Heading text (default: “Questions & Answers”)
- Title Font Size — 14–48px (default: 24px)
- Display Width — Max Width or Full Width
- Max Width — 300–1200px (default: 800px, only when Max Width is selected)
Layout
- Show Search Box — Enable/disable search (default: true)
- Show Ask Question Button — Enable/disable button (default: true)
Modal content (if Ask button is enabled)
- Ask Button Text — Button text (default: “Ask a Question”)
- Modal Title — Modal heading (default: “Ask a Question”)
- Name Field Label — Label for name field (default: “Your Name”)
- Name Required — Make name required (default: true)
- Email Field Label — Label for email field (default: “Your Email”)
- Email Required — Make email required (default: true)
- Question Field Label — Label for question field (default: “Your Question”)
- Submit Button Text — Submit button text (default: “Submit Question”)
Display layout
- Display Style — Separator or Block (default: Separator)
- Block Background Color — Background when Block style is selected (default: #f8f9fa)
- Border Color — Border/separator color (default: #dee2e6)
- Show Question Author and Date — Show/hide question metadata (default: true)
- Show Answer Author and Date — Show/hide answer metadata (default: true)
Labels
- Question Label — Label before question text (default: “Question:”)
- Answers Label — Label before answers (default: “Answers:”)
Buttons styling
- Show Vote Counts & Button — Enable/disable voting (default: true)
- Vote Button Color — Vote button color (default: #007cba)
- Ask Button Background — Ask button background (default: #007cba)
- Ask Button Text Color — Ask button text color (default: #ffffff)
Best practices
1. Block placement
- Place the form near the product description
- Place the display block after the form or product details
- Consider mobile layout
2. Styling consistency
- Match your theme colors
- Use consistent fonts and sizes
- Test on mobile and desktop
3. Required fields
- Make name and email required for better data quality
- Consider making email optional for faster submissions
4. Display style
- Use Separator for a clean, minimal look
- Use Block for more visual separation
5. Search and buttons
- Enable search if you have many questions
- Show the Ask button for easy access
Frequently asked questions
Do I need both blocks?
No. Use one or both:
- Form only — Customers can ask but not see existing Q&A
- Display only — Shows Q&A, uses modal for asking (optional)
- Both — Full Q&A experience
Can I add multiple blocks?
Yes, but one of each type is usually enough per product page.
Do blocks work on all themes?
Yes. They work with any Shopify theme.
Can I customize colors?
Yes. Use the color pickers in block settings.
What if I don’t customize settings?
Default values are used. You can customize later.
Do blocks work on mobile?
Yes. They are responsive and work on all devices.
Can I hide the search box?
Yes. Uncheck “Show Search Box” in the Display block settings.
What’s the difference between Separator and Block styles?
- Separator — Simple lines between items
- Block — Background boxes around each Q&A item
Can I change the order of questions?
Questions are shown by date (newest first). This cannot be changed in settings.
Do blocks work with AI features?
Yes. If AI is enabled in Settings, the blocks support AI functionality.
Can I use different text for different products?
No. Block settings apply to all products. Use Translations in Settings for app-wide text changes.
What happens if I delete a block?
The block is removed from the product page. Questions and answers remain in the app.
Can I move blocks around?
Yes. Drag and drop blocks in the theme editor.
Do blocks slow down my store?
No. Blocks are optimized and load efficiently.
Quick reference
Q&A Ask Question Form
| Category | Key Settings |
|---|---|
| General | Title, font size, width |
| Content | Field labels, required fields, submit text |
| Styling | Colors, padding, border, shadow |
| Buttons | Submit button colors |
Q&A Questions Display
| Category | Key Settings |
|---|---|
| General | Title, font size, width |
| Layout | Search box, ask button |
| Display | Style (separator/block), metadata, labels |
| Styling | Colors, borders, button colors |
Examples
Example 1: Minimal setup
- Add Q&A Questions Display block
- Enable “Show Ask Question Button”
- Use Separator style
- Keep default colors
Example 2: Full customization
- Add both blocks
- Customize all colors to match theme
- Use Block style with custom background
- Customize all labels and text
- Enable search and voting
Example 3: Mobile-friendly
Test on mobile devices
Use Full Width for both blocks
Increase padding for touch targets
Use larger font sizes