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

Shopify Discussion

Topic summary

Goal: convert the Prestige theme’s color variant dropdown into radio-button color swatches, and show them on product and collection pages without using an app.

Context: Store moved from separate color products (with Platmart app swatches) to single products with 4 color variants. Hex color values are already set in theme settings and product metadata. Prestige lacks a built-in toggle; changing product JSON settings (e.g., selector_mode: “dropdown”, show_color_swatch: false) isn’t sufficient.

Proposed solution (code-based):

  • Backup theme (duplicate).
  • Edit Sections > main-product.liquid: replace the dropdown ({{ product.variants | product_select }}) with a loop rendering radio inputs for each variant and labels (uses variant.option1 for display).
  • Add CSS to hide default radios and style labels for a swatch-like appearance.
  • Optional: replicate radio-button code in Templates > collection.liquid within each product loop to show swatches on collection pages.

Notes: Code snippets are central to implementation. The provided example targets a single option (option1) and styles labels, not true color swatches from hex metadata. No confirmation of success yet; discussion remains open.

Summarized with AI on December 16. AI used: gpt-5.
1

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.

2

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

      {% for variant in product.variants %} {{ variant.option1 }} {% endfor %}

  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.