The Quivers HoverCart is a flexible shopping cart that can be applied to a multitude of websites by injecting a shopping experience (using JavaScript) into an existing website. This includes websites built on the Wix platform.
There are two ways in which the HoverCart can be added (Full Store Embedded or Add to Cart). Let's take a look at how to add both:
Add to Cart Implementation
1. First, navigate to “Settings” > “Tracking Tools” in the left-hand rail of the Wix platform
2. Once there, click on the blue “New Tool” button in the upper right-hand corner and select “</> Custom” from the dropdown to open a screen that looks like this:
3. Here, enter the HoverCart embed code where it says “Paste the code snippet here:”
a. Enter “HoverCart” into the “Name” input
b. Select the “All pages” bubble for the “Add Code to Pages:” input and ensure “Load code once” is selected in the subsequent dropdown
c. Finally, for “Place Code in:” select the “Head” option
d. Then click “Apply”
4. Now the HoverCart code has been implemented into the Wix site; next, the “Add to Cart” buttons can be added to the dedicated product pages. To do so, select the “Edit Site” button at the bottom of the left-hand rail navigation
5. Then, expand the “Menus & Pages” icon on the left-hand side of the screen (the icon looks like a single sheet of paper and should be the first icon on the left)
6. Next, click the plus sign in the same navigation on the left-hand side of the screen. It will expand and look like this:
7. Within the expanded blue menu select the “Embed” option, then select “Custom Element”
8. Arrange the element borders to fall where the “Add to Cart” button should appear on the live webpage. This element will contain the Product ID and render the “Add to Cart” button. The element editor will look as follows:
9. Once open, you’ll first need to enter the “Tag Name” for the newly added element. To do this click on “Choose Source” and enter the Tag Name at the bottom of the pop-up
*Note: the “Tag Name” should be the div ID name you add within the HoverCart settings
10. Next, click the “Set Attributes” button where you can add a new attribute. When creating the new attribute, ensure that the “Value” input entered is the Product ID of the HoverCart product you want for this particular “Add to Cart” button and the “Attribute Name” is always “data-widget
11. After the steps above are followed you, can style the HoverCart ribbon and Add to Cart buttons using the "Custom CSS" option within the HoverCart settings
Full Store Embedded Implementation
1. First, navigate to “Settings” > “Tracking Tools” in the left-hand rail of the Wix platform
2. Once there, click on the blue “New Tool” button in the upper right-hand corner and select “</> Custom” from the dropdown to open a screen that looks like this:
3. Here, enter the HoverCart embed code where it says “Paste the code snippet here:”
a. Enter “HoverCart” into the “Name” input
b. Select the “All pages” bubble for the “Add Code to Pages:” input and ensure “Load code once” is selected in the subsequent dropdown
c. Finally, for “Place Code in:” select the “Head” option
d. Then click “Apply”
4. Now the HoverCart code has been implemented into the Wix site; next, the "Storefront" can be added to the desired page. To do so, select the “Edit Site” button at the bottom of the left-hand rail navigation
5. Then, expand the “Menus & Pages” icon on the left-hand side of the screen (the icon looks like a single sheet of paper and should be the first icon on the left) and select the page where the Storefront will be added
6. Next, click the plus sign in the same navigation on the left-hand side of the screen. It will expand and look like this:
7. Within the expanded blue menu select the “Embed” option, then select “HTML iFrame” and choose the "Code" selection bubble
8. Arrange the element borders to fall where the “Storefront” should appear on the live webpage. This element will contain the full Quivers Storefront. The element editor will look as follows:
*Note: the ID name for the Storefront's div ID is entered in the HoverCart settings under "Settings" > "General" > "Div ID/Display Element"