Shopify Size button to Icon (Product size Variant)

Store Design
1

Seeking a way to Make “Size Variant” icons for size instead of buttons. For custom Product template.

2

Hi @mgerard85 ,

This is Amelia from PageFly - a Landing Page Builder App

To create “Size Variant” icons instead of buttons for your custom product template, you can follow these steps:

  1. Edit Your Theme Code:

    • Go to your Shopify Admin.
    • Navigate to Online Store > Themes > Actions > Edit Code.

  2. Modify the Product Template:

    • Find the product template file, usually named product.liquid or similar, under Sections or Templates.

    • Locate the code that generates the size variant buttons. It might look something like this:

      {% for option in product.options_with_values %}
  {% if option.name == 'Size' %}
    <div class="size-variants">
      {% for value in option.values %}
        <label>
          <input type="radio" name="size" value="{{ value }}">
          {{ value }}
        </label>
      {% endfor %}
    </div>
  {% endif %}
{% endfor %}

  3. Add CSS for Icons:

    • In your theme’s CSS file (often theme.css or base.css), add styles to display the size variants as icons. For example:

      .size-variants label {
  display: inline-block;
  width: 40px;
  height: 40px;
  background-color: #f0f0f0;
  border-radius: 50%;
  text-align: center;
  line-height: 40px;
  margin: 5px;
  cursor: pointer;
}

.size-variants input[type="radio"] {
  display: none;
}

.size-variants input[type="radio"]:checked + label {
  background-color: #000;
  color: #fff;
}

  4. Customize Icons:

    • You can replace the text inside the labels with icons. For example, if you have SVG icons for each size, you can include them in the label:

      {% for value in option.values %}
  <label>
    <input type="radio" name="size" value="{{ value }}">
    <img src="/path/to/{{ value | downcase }}-icon.svg" alt="{{ value }}">
  </label>
{% endfor %}

I hope that my solution works for you.

Best regards,

Amelia | PageFly