Customize tooltip
This guide explains how to enhance your product option fields with tooltips and help text, including how to add links and images for clearer customer communication.
1. Tooltip
Tooltips display a small pop-up message when customers hover over the ❓ icon next to an option. This is ideal for brief, contextual explanations.
How to Add a Tooltip
On the Options tab, when creating or editing an option, click on Advanced Setting to view and edit the tooltip.

2. Help Text
Help Text appears beneath the option input and is always visible. It’s ideal for detailed instructions or explanations to assist customers during selection.
On the Options tab, when creating or editing an option, click on Advanced Setting to view and edit the Help text.

3. Adding a Link to Help Text or Tooltip
You can insert HTML anchor (<a>
) tags to make a portion of the text clickable. This is the code to add a link to Tooltip or help text, you can enter this code to either box for the display
Open link in the same tab
<a href="https://www.shopify.com/">Visit Shopify</a>
Open link in a new tab
<a href="https://www.shopify.com/" target="_blank">Visit Shopify</a>

Note:
target="_blank"
ensures the link opens in a new tab.Always test links to ensure they are functional and accurate.
4. Adding an image to Help Text or Tooltip
You can embed an image in the Help Text or Tooltip using the <img>
tag.

Format:
<img src="IMAGE_URL" alt="DESCRIPTION" style="width: 100%; height: auto;">
Example:
<img src="https://avis-demo.avisplus.io/cdn/shop/products/JunctionParkaBlackLabel.jpg?v=1707193221&width=600"
alt="Girl in a jacket" style="width: 100%; height: auto;">
Instructions:
Replace
IMAGE_URL
with your actual image URL.Replace
"DESCRIPTION"
with a meaningful description (used for accessibility).Use
style="width: 100%; height: auto;"
to ensure the image scales properly.
Last updated