GP Product OptionsGP Product Options
Login
← Back to Blog
Optimization•5 min read

How to Configure Interactive Swatch Tooltips inside GP Product Options

Alex Mercer2026-07-10

Visual swatches improve the appearance of product pages, but they can introduce usability challenges if implemented without labels. For example, a customer may struggle to distinguish between "Espresso" and "Charcoal" wood stains based on small images alone. Similarly, color-blind shoppers rely on clear text labels to verify their selections.

Interactive tooltips resolve this issue. They display a small, floating text label when a shopper hovers over or taps a swatch. This layout keeps your product page design clean while providing necessary information. GP Product Options includes tooltip functionality out of the box. Here is a guide on how to configure and style tooltips to improve your store's user experience.

Why Tooltips are Essential for Swatch Accessibility

Relying exclusively on colors or images to communicate product choices creates usability issues. Tooltips provide essential context in three ways:

  1. Accessibility Compliance: Screen readers and accessibility software read tooltip labels to describe visual elements to visually impaired users.
  2. Precision Shopping: Text labels ensure customers know exactly what color they are buying, which reduces customer service inquiries and return rates.
  3. Optimized Layouts: Tooltips allow you to hide text labels until they are needed. This keeps your product options section compact, which is particularly beneficial for mobile screens.

Options for Displaying Swatch Labels

GP Product Options provides multiple ways to present option labels to your customers. Depending on your brand's aesthetic, you can choose the layout that best fits your design.

Method Hover Tooltip Inline Active Label Plain Text Labels
Visual Layout Floats above the swatch Next to the section header Text printed under each swatch
Space Required Zero footprint Minimal (single line) Medium (increases vertical height)
Mobile Experience Appears on tap Updates instantly Static grid display
Best Used For Large grids of solid colors Compact option sets High-resolution texture grids

How to Set Up Tooltips in GP Product Options

Configuring tooltips in GP Product Options is straightforward and can be completed from the app dashboard.

Step 1: Enable Tooltips in the Option Editor

  1. In your Shopify admin, open the GP Product Options app.
  2. Navigate to Option Sets and open the set you want to modify.
  3. Click the specific Swatch Option field.
  4. In the settings drawer, look for the Helper Text & Tooltips section.
  5. Toggle on Enable Tooltips.

Step 2: Configure Inline Active Value Text

In addition to the hover tooltip, it is best practice to display the selected value next to the main category label (e.g., "Color: Midnight Black").

  1. In the same options drawer, locate the Show Selected Value setting.
  2. Enable the checkbox.
  3. Select where you want this label to appear relative to your title (typically to the right of the header label).

Step 3: Customize Tooltip Design

You can adjust the tooltip styling to match your theme's design language.

  1. Scroll down to the Design Settings area.
  2. Locate the Tooltip Styles section.
  3. Adjust the Background Color (e.g., solid black #000000 or clean white #FFFFFF).
  4. Set the Text Color to ensure high readability contrast.
  5. Define the Border Radius of the tooltip box to match your button styles (e.g., sharp 0px for Dawn theme, or rounded 4px for softer themes).
  6. Save your changes and test the interaction on both desktop (using mouse hover) and mobile (using tap gestures).