Variant Hover Label

Store Design
, ,

Topic summary

A user is implementing hover labels that display variant option names (None, Black, White, Wood) above image-based variant pills for a frame selection feature.

Problem: The labels currently appear inside the variant pills instead of hovering above them, and they don’t display on mobile devices.

Solution provided: Another user shared CSS code to be added to theme.liquid above the </head> tag, which successfully resolved the desktop hover display issue.

Mobile limitation: Hover events don’t exist on mobile devices, requiring a conversion to touch-down events instead—no specific implementation code provided yet.

Current status: The desktop issue is resolved, but mobile functionality remains unimplemented. A third user requested the code snippet be re-posted as it appears blank in the thread.

Summarized with AI on October 26. AI used: claude-sonnet-4-5-20250929.
1

Hello, I hope you are all doing well.

I am trying to get this to appear on top of the variant pills like on this screenshot.

aestheticanvas_0-1727398495005.png
aestheticanvas_0-1727398495005.png515×172 12.4 KB

I have added them to my HTML code which makes them appear:

{%- if option.name == "Add a frame" -%}  <!-- Only apply to Add a Frame option -->
<div class="color-swatch variant-pill">
  <input
    type="radio"
    id="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}"
    name="{{ option.name }}"
    value="{{ value | escape }}"
    form="{{ product_form_id }}"
    {% if option.selected_value == value %}
      checked
    {% endif %}
    {% if option_disabled %}
      class="disabled"
    {% endif %}
  >
  <label for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}">
    <span class="variant-pill-content">
      {% if value == 'None' %}
        <img src="https://cdn.shopify.com/s/files/1/0882/3272/2712/files/No_Frame_7.png?v=1727318193" alt="No Frame" class="variant-pill-img">
      {% elsif value == 'Black' %}
        <img src="https://cdn.shopify.com/s/files/1/0882/3272/2712/files/Black_Frame_5.png?v=1727318194" alt="Black Frame" class="variant-pill-img">
      {% elsif value == 'White' %}
        <img src="https://cdn.shopify.com/s/files/1/0882/3272/2712/files/White_Frame_5.png?v=1727318193" alt="White Frame" class="variant-pill-img">
      {% elsif value == 'Wood' %}
        <img src="https://cdn.shopify.com/s/files/1/0882/3272/2712/files/Wood_Frame_6.png?v=1727318193" alt="Wood Frame" class="variant-pill-img">
      {% endif %}
    </span>
        <span class="color-swatch__label">{% if value == 'None' %}None{% elsif value == 'Black' %}Black{% elsif value == 'White' %}White{% elsif value == 'Wood' %}Wood{% endif %}</span>
  </label>
</div>

Copy

But the problem is that they currently appear inside of my variant pills and not over them.

What code should I possibly use to make them appear properly? Also, I am trying to make them appear on mobile, which isn’t happening at the moment.

Thank you in advance for your time and help.

Kind regards.

2

Hi, @aestheticanvas

Can you share your store url so that I can assist you?

3

Hello @AnneLuo ,

Sure this is my product page with the current variant pills: https://aestheticanvas.com/products/elegant-bloom-in-gold-flower-canvas-print

Thanks a lot!

4

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code above the tag

Resulut:

AnneLuo_0-1727420757396.png
AnneLuo_0-1727420757396.png898×432 32.3 KB

Hopefully it will help you. If yes then Please don’t forget hit Like and Mark it as solution!

1 Like
5

Hi @AnneLuo ,

Thank you so much that worked perfectly!

Do you know how to make it appear on mobile?

Thank you again for your help :slightly_smiling_face:

6

There is no hover event on mobile. So you need to change the hover event to touch down event.

7

I’m looking to do something similar but the code snippet above appears to be blank. Is there a way you can re-add it in the post here?