Variant Hover Label

[aestheticanvas]

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.

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.

[AnneLuo]

Hi, @aestheticanvas 

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

[aestheticanvas]

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!

[AnneLuo · Accepted solution]

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 </head> tag

<style>
.color-swatch.variant-pill,
.color-swatch.variant-pill label{
   overflow: visible !important;
}
</style>

Resulut:

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

[aestheticanvas]

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 🙂

[AnneLuo]

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