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