Product options can be confusing to customers without a way to explain what each option does. This is especially true when selling technical products or have a lot of different options attached to a product. This script makes it easy to add instructions by adding tooltips next to each option.
It should take around 15-30 minutes to install depending on how experienced you are editing the template files.
Installation
Open Panels/HTMLHead.html and add the following code before the </head> element:
<script type="text/javascript" src="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>Save your changes. If you are using WebDAV then replace the Panels/HTMLHead.html file on the server with the modified one.
Upload the image below to your store's template/images/ folder. If the images folder does not exist, then create it using a WebDAV client such as Cyberduck.
(right click on image > save as)Add the CSS from the popover.css file below to your store's custom.css file. If there is no such file (it is usually located in the templates/Styles/ folder), then add the code to the bottom of styles.css. The important part is that the CSS for the popover is loaded into the store theme.
popover.css (opens in new tab/window)
Download the ProductOptionsToolTips.html and ProductOptionsToolTipsScript.html files and then upload them to your store's template/Panels/ directory using WebDAV. The first panel will store all of the different messages for the product options, and the second panel contains the Javascript to active the tooltips.
ProductOptionsToolTips.html (right click > save as)
ProductOptionsToolTipsScript.html (right click > save as)
Modify the template/product.html file by adding the following line of code %%Panel.ProductOptionsToolTips.html%% right after %%Panel.Header%%.
Then add the %%Panel.ProductOptionsToolTipsScript.html right after the Footer panel code (%%Panel.Footer%%).
The first panel adds the HTML for the tooltips, and the second panel activates the tooltips for each particular option.
The last step is to add the tooltip messages by editing the template/Panels/ProductOptionsToolTips.html file. Each option needs to have its own markup, with the CSS id in the following format: popup-optionlabel-message.
As an example, if you had an option with a label "Material", you would change the CSS id to popup-material-message.
Do this for every option that you want to display tooltips for.
How Does It Work?
The script makes use of the Bootstrap library for the tooltips (this is the line of code that you added in the first step). After that, there are two panels: one that defines the tooltips messages, and another panel that has the Javascript and initializes the tooltips.
You have to modify the templates/Panels/ProductOptionsToolTips.html file to add the the tooltip messages for each option.
Troubleshooting
If you are not seeing the information icon... then double-check that you uploaded the image to your templates/images/ folder. The icon name is info-info.png.
If a tooltip does not show when you hover of the image.. then it is most likely an issue with the Javascript. Make sure you uploaded the ProductOptionsToolTipsScript.html file to the template/Panels/ folder. If it is there, then make sure you added the %%Panel.ProductOptionsToolTipsScript%% code to the product.html file.
If you liked this blog post, then you will probably like one of our Bigcommerce apps.