Follow these simple steps to set up a clean text swatch selector and remove the tooltip from your Shopify store using IA Product Options:

1️⃣ Create a Text Swatch

• Go to your IA Product Options admin panel.
• Click on Options or Product Options.
• Choose the product (or create a new one).
• Add a new Option Type and set it to Text Swatch.
• Define your values (e.g., S, M, L, XL).
• Save the changes.

2️⃣ Remove Tooltip from Text Swatch (Optional)

By default, text swatches show a tooltip on hover. To disable this:

a. Go to Design Settings

• Navigate to the Design section in IA Product Options.

b. Add Custom CSS

Paste the following CSS code into the Custom CSS box:

.ia-swatch-item[title]:hover:after {
    display: none;
}

This will hide the tooltip that appears on hover for all text swatch items.

3️⃣ Save Your Changes

• Scroll down and click Save.
• Refresh your storefront and check the product page. The tooltip should no longer appear when hovering over text swatches.

📌 Tip: This tweak is purely visual and does not affect functionality. You can always re-enable the tooltip by removing the custom CSS.

Updated on: 12/07/2025