Introduction
For businesses that host their own product detail pages with customized marketing content, HoverCart Lite™ offers a seamless solution to embed product options that are available for buy online, pick up in-store with your retail partners directly into your existing product pages. This guide will walk you through the steps to integrate HoverCart Lite™ with your website, enabling a smooth shopping experience for consumers while maintaining the visibility and usability of your eCommerce platform.
Step 1: Set Up Your Marketplace
Before you begin embedding HoverCart Lite™, make sure you are already signed up with Quivers and have created your Business and Products. If not, refer to our Basic Setup Guide for detailed instructions on how to complete these tasks.
- Create a Marketplace:
- Navigate to the Products tab in the Admin Panel.
- Locate the Marketplaces section and click on it to view your existing marketplaces.
- Select New to create a new marketplace.
- Remember, each marketplace is tied to a single currency, so create separate marketplaces if you need multiple currencies.
- Assign Products to the Marketplace:
- In the Products pane, select your products and folders by clicking and dragging, just like you would select files or directories in Windows.
- You may choose to create categories within the marketplace, though it's not necessary for this type of setup. Products can reside at the root level of your marketplace.
- For more information on adding products, see our checklist article.
For further details on setting up your marketplace or managing your products, refer to our Knowledge Base.
Step 2: Embed the HoverCart Lite™ on Your Website
To begin using HoverCart Lite™, you'll need to edit the HTML of your website. The code snippet should be added into the <head> section of your site. If you did not develop your site, you can typically do this through your Content Management System (CMS) like WordPress, Drupal, or Joomla. If you're unfamiliar with HTML or need assistance, our Support Team is here to help.
- Embed the HoverCart Lite™ Script
- Insert the following JavaScript code in the <head> section of your HTML:
<script type="text/javascript" src="https://hovercart.quivers.com/?Marketplace={MARKETPLACE.ID}" async="true"></script>
-
- Replace {MARKETPLACE.ID} with the actual ID of the marketplace you created. This ID can be found in the Admin Panel when viewing the details of your marketplace.
- Ensure Full-Site Coverage:
- The script should be added across all pages of your website, just like how you would apply Google Analytics code. This ensures HoverCart Lite™ functions correctly throughout your site.
Step 3: Add Product "Add to Cart" Widgets
Once the script is in place, you can display product options directly on your existing product pages using Add to Cart widgets.
- Generate the Widget:
- Use the following code to generate an Add to Cart widget for a specific product:
<div data-widget="PRODUCT.ID"></div> - Replace PRODUCT.ID with the relevant product’s ID. This will automatically render the product’s purchase options on your page.
- Use the following code to generate an Add to Cart widget for a specific product:
- Add Widgets to Your products:
- Add the <div> into your site HTML where you would like the content placed
- You can add the data widget in the product on your CMS directly into the description text box as HTM:
- Customize your “Add to Cart” button:
Your HoverCart Lite™ Experience
By integrating HoverCart Lite™ into your website, you're enhancing the user experience with a seamless and intuitive shopping journey. The embedded Add to Cart functionality allows your customers to browse products, add them to their cart, and proceed to checkout without ever leaving your custom product pages. This creates a consistent brand experience, increases conversion rates, and simplifies the purchasing process.
Additionally, HoverCart Lite™ offers the flexibility to configure the look and feel of your shopping cart to match your brand's design, making sure it fits naturally into your existing site. With features like marketplace setup, easy product management, and customizable widgets, HoverCart Lite™ is designed to streamline the entire eCommerce flow for your business.
With HoverCart Lite™, you're not just embedding a cart – you’re elevating the entire shopping experience, making it simpler, faster, and more effective for your customers and your business.
Once you've followed all the steps and added the Add to Cart widgets to your product pages, HoverCart Lite™ will be fully operational. Consumers will enjoy a smooth and integrated shopping experience, accessing their carts via the HoverCart Lite™ overlay and checking out seamlessly on your site.
For any additional customization or troubleshooting, feel free to reach out to our Support Team or consult our Knowledge Base.
Your customers will then be able to select from a list of local retailers that have the product available for in-store pick up:
Purchasing takes place directly within the overlay, allowing your customers to seamlessly complete their buy online, pick up in-store transactions without leaving the shopping experience on your site.
