# How to Add FAQs to Your Website

Canonical: https://support.merchynt.com/kb/article/how-to-add-faqs-to-your-website-ic-12895498

This guide will explain how to add FAQs to your website and provide instructions for several website hosting platforms

## Step 1: Go to the Automation tab in Paige, then click on Website & AI SEO

- Set the style of the FAQs that you're happy with in the Styling Settings.

    ![](/api/storage/public-objects/intercom/f3f31291368b5cbb8bd49ff11860ec39.png)

    * * *

## Step 2: Copy the code provided in Paige

![](/api/storage/public-objects/intercom/d032883a14e23096122f150b146d3049.png)

* * *

## Step 3: Add code into your website

### Wix: Two straightforward approaches: **Embed HTML** and **Velo (advanced)**.

## A. Embed HTML (Editor)

1. In the Wix editor click **Add → Embed → Custom Embeds → Embed HTML**.
2. Drag the box to where you want the FAQ and click **Enter Code**.
3. Paste the **entire** widget (HTML + CSS + JS). If Wix strips the `<script>`, host the JS externally (see note below).
4. Resize and save/publish. Test preview.

## B. Velo (if you need JS that interacts with the rest of the site)

1. Turn on **Velo** (Dev Mode).
2. Create an HTML file in the Public folder or use an external script URL.
3. Add an HTML iFrame element and point it to your hosted HTML page, or inject HTML into a page element via Velo APIs.
4. Publish.
    * * *

### Wordpress: Two common ways - **Block Editor (Gutenberg)** and **Theme / Classic editor**.

## A. Block Editor (best for most users)

1. Open the page/post where you want the FAQ.
2. Click ➕ to add a block, search “Custom HTML” and add it.
3. Paste the entire example widget HTML/JS/CSS into the Custom HTML block.
4. Click **Preview** then **Update/Publish**.
5. Test on mobile. If styling conflicts, wrap the widget in a container and use more specific CSS selectors.

## B. Classic Editor / TinyMCE

1. Switch to the **Text** (HTML) tab.
2. Paste the widget where you want it.
3. Save and preview.

## C. For theme/global insertion (site footer/header)

1. Go to **Appearance → Theme Editor** (or use a child theme).
2. To add globally, paste the `<script>` portion before `</body>` in `footer.php` and the HTML where appropriate (e.g., inside a template).
3. **Safer option:** create a shortcode in `functions.php`:
4. Use `[my_faq]` in pages.

### SquareSpace: Use **Code Block** for a single page, or **Code Injection** for site-wide scripts.

## A. Page-level (Code Block)

1. Edit the page → Insert Block → select **Code** block.
2. Paste the widget HTML/CSS/JS. Check the “Display Source” toggle is OFF (so it runs).
3. Save and preview.

## B. Site-wide / header/footer (Code Injection)

1. Settings → Advanced → **Code Injection**.
2. Put global scripts (like widget JS) in the Footer or Header box (footer recommended for performance).
3. Put the widget HTML on pages using a Code Block or include it via a snippet loaded from your host.

* * *

### Shopify: **Use Shopify’s Built-In Features (Easiest Method)**

- ### Shopify themes often include **structured data (JSON-LD)** for products and blogs automatically.
- Check if your theme already has it:
    1. Open a product page in Chrome.
    2. Right-click → **View Page Source**.
    3. Search for `application/ld+json`.
- If it exists, you may just need to customize it.

**2\. Use a Shopify App**
If your theme doesn’t include all the schema you want:

- Go to the Shopify App Store and search for **“SEO & Schema”** or **“JSON-LD”**.
- Popular apps:
    - **JSON-LD for SEO**
    - **Smart SEO**
    - **Schema Plus for SEO**
- These apps let you add schema without touching code.

**3\. Add Schema Directly to Your Theme (Manual Method)**

1. Go to **Online Store → Themes → Actions → Edit Code**.
2. Find the template you want to modify:
    - Products: `product.liquid`
    - Collections: `collection.liquid`
    - Pages: `page.liquid`
3. Add a `<script type="application/ld+json">` block with your schema. Example for a product:

```
 <script type="application/ld+json"> {   "@context": "https://schema.org/",   "@type": "Product",   "name": "#{{ product.title }}",   "image": "#{{ product.featured_image | img_url: 'large' }}",   "description": "#{{ product.description | strip_html | escape }}",   "sku": "#{{ product.sku }}",   "offers": {     "@type": "Offer",     "url": "#{{ shop.url }}#{{ product.url }}",     "priceCurrency": "#{{ shop.currency }}",     "price": "#{{ product.price | money_without_currency }}",     "availability": "{% if product.available %}https://schema.org/InStock{% else %}https://schema.org/OutOfStock{% endif %}"   } } </script>
```

1. **Save** and test using Google’s **Rich Results Test**:
2. [https://search.google.com/test/rich-results](https://search.google.com/test/rich-results)

**4\. Tips**

- Always validate your schema after adding it.
- Focus on **Products, Reviews, FAQs, and Breadcrumbs** for Shopify sites.
- If you’re using Shopify 2.0, JSON-LD may already be included for products and collections — only add custom schema if needed.
    * * *

### Weebly: Use the **Embed Code** element or add global code.

## A. Page embed

1. In the site editor, drag the **Embed Code** element onto the page.
2. Click the element and choose **Edit Custom HTML**.
3. Paste the whole widget. Save and publish.

## B. Site footer (global)

1. Settings → SEO → Footer Code (or a similar site code injection area depending on theme).
2. Add widget `<script>` or the HTML container if you want it site-wide.