Shopify Size button to Icon (Product size Variant)

[mgerard85]

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

[PageFly-Amelia]

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