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.
Open Panels/HTMLHead.html and add the following code before the </head> element:
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)
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?
You have to modify the templates/Panels/ProductOptionsToolTips.html file to add the the tooltip messages for each option.
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 you liked this blog post, then you will probably like one of our Bigcommerce apps.