Wix is an exceptional CMS that empowers you to craft unique and engaging customer experiences. Among its standout features, we particularly appreciate the effortless theming capabilities for colors, fonts, and branding guidelines. With Wix, you can upload custom fonts and define personalized color schemes, ensuring your brand's identity shines through. Beyond a comprehensive array of pre-designed assets and elements, Wix also offers the flexibility to start with blank pages, allowing you to create a truly bespoke aesthetic.
We have been impressed by client projects that seamlessly integrate native Wix elements with our HoverCart products, elevating customer experiences with a brand’s ability to truly make their content their own. Contact your customer success manager in order to learn more about the resources available for implementing Wix as your CMS platform.
Designing your Wix Site
Create Your Site Pages
For full-store embedded implementations (see below), you will want to ensure that you have created a page on the menu for each of the Storefronts you would like to host.
In “Site Pages and Menu”, you’ll want to add a new page that will hold the store experience from Quivers HoverCart. You choose to add a page either in the top right corner of Site Menu:
or utilize the “+ Add Menu Item” button at the bottom of your site menu and choose “New Page”:
One-Page Menus & Anchors
If you intend to utilize a Page to act as a “site” for a visitor, where the user is able to use in-page navigation to get around, you will need to implement sections that you can anchor menu items to.
For more information, please review their support article on Creating a Site Menu with Anchors and Sections for One-Page Sites.
First review Adding and Setting Up Sections for creating robust One-Page Sites that set the groundwork for adding in anchor elements.
Custom Theme & Design
Your site's theme encompasses all the colors and text styles, with various suggested styles available to preview and select. Once you’ve chosen a theme, you can further personalize it by customizing the text and colors. To maintain design consistency, themed elements are provided that match your selected styles and automatically update with any theme changes. Additionally, you can set your page background using colors, images, or videos from the Site Design panel, and apply page transition effects to enhance the navigation experience for your visitors.
For more information, please review their support article on Customizing Your Site’s Design and Theme.
Customizing your Color Theme
You can customize the site's color theme to match your brand's aesthetic. Choose new colors, and adjust the shade of base colors to get the look you really want.
For more information, please review their support article on Using and Customizing Color Theme.
- Click Site Design
on the left side of the Editor. - Click Color theme under Customize your site design.
- Choose how you want to change the theme:
- Change theme colors:
- Click the color you want to edit in the panel.
- Select a new color by either using the cursor to find and select a new color, or entering the exact color in HEX, RGB or HSB values.
- Click Apply.
- Adjust the shade of your theme's base colors:
- Click the relevant shade on the base color gradient.
- Use the sliders to adjust the saturation and brightness to your liking.
- Click Apply.
- Change theme colors:
Customize your Fonts
You can customize the site's font theme to match your brand's aesthetic. Choose from a robust list of fonts offered natively by Wix, or import your own custom font files.
For more information, please review their support article on Working With Text Themes.
Using Themed Elements
Now that you have set up your theme to align with branding guidelines, you can easily incorporate themed elements into your page designs. To add themed elements to your site:
- Click Add Elements
on the left side of the Editor. - Click the tab below Add Elements.
- Click the themed section (e.g. "Themed Text").
- Click an element to add it, or drag it to the relevant location.
Setting up Your URL slugs
Once you have created a page for your site, you can choose what that URL will be through the SEO basics settings. You can get there by clicking the three dot menu next to the page you’ve created.
Select SEO basics from the pop up menu:
The URL Slug can be created here, which will act as the last part of the page URL after your domain. If you want to create page hierarchy, for example: www.yourdomain.com/usa/pagename you can do so with the Parent Page selection. Just ensure that you have set the proper /slug/ for the parent page to see the changes on the child URL slug.
If you just want the last portion of the URL behind your domain name, keep the parent page as your top home page, which will just have your domain name.
You can also set the Title Tag here which is what will populate as the title in search results for search engines. You can also set some meta descriptions here that will populate as the description of the search result. It is recommended as best SEO practices to populate this with key words for your site.
Implementing HoverCart on your Wix Site
Pre-requisites: You must have an upgraded account. Free version of Wix does not allow for custom code to be added into the head of the site, which is necessary for any HoverCart Installation. You will need to upgrade your account and associate a domain to your site in order to access the custom code feature. To find out what plan is best for you, please reference Wix Pricing Plans: https://www.wix.com/plans.
Adding Custom Code for Specific Pages on Your Site
On your wix dashboard, navigate to the Settings tab in your side navigation bar. Scroll down to the Advanced settings section and choose the Custom Code option:
In Custom Code, choose the “+ Add Custom Code” button in the top right corner:
In the Code Settings section, paste the HoverCart script snippet you have copied from your panel (Storefront > HoverCart > Embed You HoverCart)
We recommend renaming your custom code to something relevant to the page or section you will be placing the cart functionality on for future ease and organization:
In the Add Code to Pages section, you will want to select “Choose specific pages” and choose the pages from the drop down you want to have access to the specific storefront code:
Ensure that you select “Head” for where to place code in as this is essentially for the HoverCart script to function properly:
Ensure that the code type you have selected is marked as Essential for the HoverCart script to work seamlessly, and apply your new custom code snippet:
Adding the HoverCart Widgets to your Site Pages
In your wix website editor, select “Site Pages and Menu” from your side bar and navigate to the page you have just created a custom code snippet for.
Embedded Storefront Implementation
We usually recommend adding a Blank Page as the Full Store Embedded experience will be the only thing necessary on the page, however, feel free to get creative with the preset pages offered by Wix:
Setting up a Section and Associating the div ID
You can add a new section to your page using the “Section” tool. Please select a blank section:
We recommend naming this section “HoverCart” so that anyone editing the site pages knows not to remove this section.
You can also add other sections to hold content. Please remember to leave the HoverCart section and use a new section above or below the "HoverCart" section for the best functional results!
Associating the div in your HoverCart Settings
Please ensure that you have whitelisted your domain when setting up a storefront on Quivers.
When you navigate to the URL of the page you have just published, the HoverCart should automatically render, and should appear to “float” on your new page. If your domain is whitelisted and you are still not seeing the HoverCart appear on your page, please refer to the troubleshooting section of this guide.
In order to “embed” the storefront in the page, we will need to retrieve the div ID and associate it in the general settings of your HoverCart.
The best way to do this is to use the inspect tool. Please use google chrome as your browser for the best results. Safari also has developer inspection tools, however, this guide will walk you through the process using Chrome. Please reach out to support@quivers.com if you need any additional assistance with your HoverCart settings and CSS.
Use inspect to find the Section ID
- Click out of the HoverCart dialogue box so that you are just seeing your blank Wix page.
- Right click on the site and choose “Inspect”
- The inspect tool will open either below or to the right on your browser. Find the select tool in order to select an element on the page. In this case, you will want to target the large blank section that you set up in Wix as “HoverCart”
- You’ll most likely land on an html element that look like the following: <div data-testid="colorUnderlay" class="LWbAav Kv1aVt"></div>
Follow the HTML up until you see the <section id=” “> - Copy the string of numbers and letters that is the id portion of the section
Add the Section ID to you HoverCart Settings
- Log in to the HoverCart in order to access the settings. You can either do this directly on the page or in the preview of the storefront.
- If this is a new HoverCart, and you are being directed to chose a template, scroll to the bottom of the page and select “advanced” from the Change Settings Mode drop down
- In General > Simple Settings, navigate the “Div ID/Display Element:
- Paste the ID from the section here:
- Refresh at the top of the simple settings page and your HoverCart should be successfully “embedded” within the page.
Troubleshooting
Sometimes changes that are made to pages or custom code take some time to show, so you may need to refresh and wait for these changes to take place. If you have made any new pages or changed existing ones, you must publish the site in order to see those changes take live. If you have successfully completed all of the above steps and are still not seeing a HoverCart instance on your page, there is a work-around to render your content if necessary.
If you are using your Menu and Pages set up as a visible navigation live on your site, you can hide the page you have created to hold your content so that it does not come up as a site navigation menu item:
Choose a web address link and add the URL of the page that is holding your content. This will allow us to take you to the page even though it is hidden from navigation. The key here is that we need to be able to add a view parameter so that the page will correctly render the HoverCart content.
The view parameter we use for full store embedded is /?v=Products
