Shopify

Shopify Installation Guide for VideoQi Widget

This guide explains how to install your VideoQi widget onto your Shopify store clearly and effectively. You have two installation options:

  • Option 1: Recommended method, installs the widget on all pages without any code editing.
  • Option 2: Fallback method for older themes, installs the widget on all pages with minor code editing.
  • Option 3: Installs the widget on specific pages without code editing.

Get your videoQi script

  1. Log into your VideoQi account on the official VideoQi website.
  2. Select your desired widget and click the Share button (top-right).
  3. Choose the Websites tab (not the Shopify tab).
  4. Copy the provided <script> code.
Image

Add to Shopify

  1. Log into your Shopify admin panel.
  2. Go to Online Store → Themes.
  3. Click Customize on your active theme.
  4. In the theme editor, navigate to the Footer section (or select Footer from the sidebar).
  5. Click Add Block (or Add Section) and select Custom Liquid.
    • If Custom Liquid isn’t available, proceed to Option 2 below.
  6. Paste the <script> code into the Custom Liquid block.
  7. Click Save.
Image
Image
Image

Verify Installation: Check your website (homepage, product pages, cart) to ensure the widget appears correctly.

Option 2: Install on all pages (Fallback for older themes)

Use this method only if your theme does not support "Custom Liquid" in the Footer.

Get Your VideoQi Script (Shopify Method)

  1. Log into your VideoQi account on the official VideoQi website.
  2. Select your widget, click Share, then select the Shopify tab.
  3. Copy the provided script code.
Image

Add to Shopify via Theme Code

  1. In your Shopify admin, navigate to Online Store → Themes.
  2. Click Actions, then select Edit Code.
  3. In the left sidebar, open the Snippets folder.
  4. Click Add a new snippet, name it videoqi_widget, and paste the VideoQi script into the snippet.
  5. Click Save.
Image
Image
  1. Navigate to the Layout folder and open theme.liquid.
  2. Scroll to the bottom and insert the following line just above the closing </body> tag:

View on desktop to see code

  • Click Save.
Image

Verify Installation: Visit your site (homepage, product pages, cart) to confirm the widget displays correctly.

Option 3: Page-Specific Installation (No Code Editing)

Get Your VideoQi Script

  1. Log into your VideoQi account on the official VideoQi website.
  2. Select your widget, click Share, and choose the Websites tab.
  3. Copy the entire <script> code.
Image

Add Script to Specific Shopify Page

  1. From Shopify admin, navigate to Online Store → Themes.
  2. Click Customize on your active theme.
  3. Use the top dropdown to select the specific page (e.g., Homepage, Product Page).
  4. Click Add Section from the sidebar and select Custom Liquid.
    • If unavailable, use the fallback method from Option 2.
Image
  1. Paste your <script> code into the Custom Liquid field.
  2. Click Save.
Image

Verify Installation: Check the selected page to confirm the widget displays only there.

Troubleshooting

If the widget does not appear:

  • Confirm the script code is pasted correctly (no extra spaces or missing characters).
  • Clear your browser or Shopify store cache.
  • Ensure your theme supports Custom Liquid or snippet editing.
  • Contact VideoQi support for further assistance.