Prestige theme: code to change my variant selector from a dropdown to a colour swatch radio button

[stephmilk]

We are adding new products with colour variants to our shop. Previously we had variants setup as separate products because we started with just a single product, so were using Platmart App to achieve colour swatches to for easy switching between separate products (displayed as radio buttons). 

We are now adding more products and have set them up as 1 product with 4 x colour variants and my theme is currently limited to dropdown selector for colour variant. I want to change this to radio buttons as they appear more aesthetically pleasing. I also want these to appear on my collection page too. 

Apparently Prestige doesn't have the simple variant selector options in theme settings so it must be done using code. I have setup the hexadecimal codes in colour swatches in my theme settings already and in the product metadata. 

Does anyone know how to do this easily? I am assuming it's this part of the product JSON but I am no coder. 

},
"variant_selector": {
"type": "variant_selector",
"settings": {
"selector_mode": "dropdown",
"show_color_swatch": false,
"show_color_carousel": false,
"size_chart": "size-chart"
}

Just trying to workout the way to do this without paying thousands to a developer for such a small change. Thanks in advance. 

[DreamTechCrew]

Backup Your Theme:

• Go to Online Store > Themes > Actions > Duplicate.

1. Edit Product Page Template:

   • Go to Actions > Edit Code > Sections > main-product.liquid.
   • Replace the dropdown code:
     liquid

     {{ product.variants | product_select }}
     With:
     liquid

     <div class="variant-radios"> {% for variant in product.variants %} <input type="radio" id="variant-{{ variant.id }}" name="id" value="{{ variant.id }}" {% if forloop.first %}checked{% endif %} /> <label for="variant-{{ variant.id }}">{{ variant.option1 }}</label> {% endfor %} </div>

2. Add CSS for Styling:

   • In theme.css or base.css, add:
     css

     .variant-radios input[type="radio"] { display: none; } .variant-radios label { padding: 10px; cursor: pointer; border: 1px solid #ddd; } input[type="radio"]:checked + label { background-color: #000; color: #fff; }

3. Optional: Add to Collection Pages:

   • Edit Templates > collection.liquid and insert the radio button code inside the product loop.

This will replace the dropdown with radio buttons for better usability.