Skip to content
English
More support
  • There are no suggestions because the search field is empty.

Quivers + Shopify: Live Inventory Dealer Locator Widget Setup

The Quivers Dealer Locator widget displays a live list of authorized dealers on your Shopify product pages, powered by HoverCart and Shopify Liquid variables. This article walks through the four steps to get it set up — from adding the HoverCart script to your theme and enabling HoverCart Lite mode, to embedding the widget snippet on product pages and verifying the integration.

This guide walks you through setting up Quivers' Dealer Locator widget on a Shopify storefront. The widget is embedded directly on Product Detail Pages (PDPs) using HoverCart and Shopify Liquid variables. Once set up, it automatically displays a list of authorized dealers based on the product being viewed.

Prerequisites

Before starting, confirm the following are in place:

✓
Active Quivers account with at least one HoverCart Storefront configured — The widget relies on HoverCart to serve dealer inventory data.
✓
Products assigned to the HoverCart Storefront — Products must be linked to the Storefront before they will appear in the widget.
✓
Domain whitelisted in Quivers Storefront settings — The Shopify store domain must be added to the Storefront's allowed domains before the script will load.
✓
Access to Shopify theme files — Required to edit theme code. Navigate to Shopify Admin → Online Store → Themes → Edit Code.

Setup Steps

Complete all four steps in order. Contact support@quivers.com if you need help at any point — our team can also assist with custom CSS implementation.

1

Add the HoverCart Script to the Shopify Theme

The HoverCart script must be added to the <head> section of the Shopify theme so it loads on every page. This is done in the theme.liquid file, which controls the global layout of the storefront.

  1. Go to Shopify Admin → Online Store → Themes → Actions → Edit Code.
  2. Open layout/theme.liquid.
  3. Paste the script tag inside the <head> section, before the closing </head> tag.
  4. Save the file.

Script to add

<script type="text/javascript" src="https://hovercart.quivers.com/?Marketplace={YOUR_MARKETPLACE_ID}" async="true"> </script>
Domain whitelist required: The script will not load until the domain is whitelisted in Quivers. Go to Admin Panel → Sales Channels → Storefronts → [Storefront] → Domains → + Add and add the store domain (e.g., *.mydomain.com).
2

Configure the HoverCart Template

After the script is installed, enable HoverCart Lite mode. This hides the traditional HoverCart Ribbon, which is used for other use cases and is not needed for the Dealer Locator widget.

  1. Navigate to Storefront → Preview.
  2. Log into the HoverCart Ribbon that appears on the page.
  3. Go to Settings (gear icon) → Simple Settings → HoverCart Lite → Apply.
  4. To access additional settings such as custom CSS, scroll down and switch from Basic to Advanced settings.
3

Add the Live Locator Widget to Product Pages

This step places the Dealer Locator widget on product pages. Shopify uses Liquid variables to dynamically inject product information into templates. Quivers uses the product's Shopify ID — via — to map to the correct Quivers product and display the right dealer list automatically.

The product page template is typically one of the following Liquid files:

templates/product.liquid
or
sections/product-template.liquid

Widget snippet — add to the product template:

<div data-widget=""></div>

Where to place it: The most common placement is above the Add to Cart button. Locate the Add to Cart button in the template and paste the snippet just before it. Ensure the snippet is inside the product template and not inside a conditional block that may hide it.

Tip: You can place multiple widget snippets on a single page if needed. Styling can be customized in HoverCart Settings → Advanced → Custom CSS to match branding guidelines and theme aesthetics. Reach out to support@quivers.com for collaborative CSS assistance.
4

Verify the Setup

Once the snippet is saved, confirm everything is working correctly:

  • Navigate to a product page on the live Shopify storefront.
  • Confirm the Dealer Locator widget renders in the expected location.
  • Check that the widget displays dealers relevant to that specific product.
  • Test on at least two different product pages to confirm the dynamic ID mapping is working correctly.
If the widget does not appear: verify the HoverCart script is loading in the page source, confirm the domain is whitelisted in Quivers, and ensure the product has been assigned to the correct Storefront. Contact support@quivers.com if you need help troubleshooting.
Setup complete! The Dealer Locator widget will now dynamically display authorized dealers for each product on your Shopify storefront.

Quick Reference

Item Detail
Script Location Inside <head> in layout/theme.liquid
HoverCart Script URL https://hovercart.quivers.com/?Marketplace={YOUR_MARKETPLACE_ID}
Widget Snippet <div data-widget=""></div>
Liquid Variable — dynamically outputs the Shopify product ID
Recommended Placement Above the Add to Cart button in the product template
Customization HoverCart Settings → Advanced → Custom CSS
Domain Whitelist Path Admin Panel → Sales Channels → Storefronts → [Storefront] → Domains

Need Help?

Our support team can help you implement the widget, troubleshoot issues, or collaborate on custom CSS styling.

Email Support
support@quivers.com
We typically respond within 24 hours
Create a Ticket
Submit a support request →
Track your issue through to resolution