Skip to main content

How to Add FAQs to Your Website

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

Joshua Haley avatar
Written by Joshua Haley
Updated over a week ago

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.

Step 2: Copy the code provided in Paige

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

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.

Did this answer your question?