Variant Styles

[aestheticanvas]

Hello everyone!

I am trying to style my variant to be like circular variant pills which I was able to achieve, my problem is that I have added some code to add images to these variant pills, this is the HTML that handles that: 

<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 }}">
    {% 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 %}
  </label>
</div>

But the problem is that my images aren't fully covering the circles of the variant pills and there is an inside border in the circle (screenshot below)

How can I get the image to cover the entire circle?

Here is a link to the page: https://aestheticanvas.com/products/elegant-bloom-in-gold-flower-canvas-print?variant=49140741308696

Thank you in advance for your help!

[exertweb]

@aestheticanvas Can you share your store URL?

[aestheticanvas]

Yes, I apologize I forgot to add it : https://aestheticanvas.com/products/elegant-bloom-in-gold-flower-canvas-print?variant=49140741308696

[exertweb · Accepted solution]

@aestheticanvas 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid

.product-form__input input[type=radio]+label {
    width: 100%;
    height: 100%;
}

.color-swatch.variant-pill input[type="radio"] + label {
    padding: 0 !important;
    font-size: 14px !important;
    margin: 0;
    width: 100%;
    height: 100%;
    border-radius: 50% !important;
    max-width: 100%;		
}

.product-form__input input[type=radio]+label .variant-pill-content {
    width: 100%;
    height: 100%;
    display: flex;
    position: absolute;
    left: 0;
    top: 0;
}

.product-form__input input[type=radio]+label:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

If you need more help please contact me.

[aestheticanvas]

Thanks a lot this is perfect :)! Really appreciate that.

Would you know how to get this label's 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>

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

Thanks again for your precious help!

[xtrend]

you can use css for this use in your theme base.css file or if you have your separate variant style css file like 

.color-swatch.variant-pill input[type="radio"]:checked + label {

margin:0;

width:100%;

height: 100%;

overflow: hidden;

}

we use sometimes overflow hidden because some image may overlap with div boundary