Please help me on this I want Replace Variant Dropdown with Radio buttons for Debut theme
Hi and welcome!
Could you provide a URL to the page in question and I’ll take a look for you 
Hi @dineshkumarc133 , there are multiple topics for this request. Please take a look:
https://stackoverflow.com/questions/61226670/shopify-change-size-variant-from-select-dropdown-to-buttons
https://community.shopify.com/post/1213103
https://community.shopify.com/c/shopify-design/debut-theme-change-dropdown-menu-for-product-variations-to-radio/td-p/657824
Hi Dineshkumarc133,
One of the major benefits of product customization is that it develops customer loyalty. And there is no better way to gain customer loyalty than offering them full access to design the product as per their taste. The primary reason for earning that loyalty is customer satisfaction.
Product customization involves offering goods that have had their colors, elements, and features altered according to customer preferences. In customization, the brand provides a selection of options for the customer to choose from.
The Shopify customizer apps allow merchants to sell customizable products in their e-commerce store
Find out the best Shopify product customizer apps for your e-commerce store.
Smart Product Options:
Smart Product Options is a fantastic tool that allows your customers to creatively design the products they are going to purchase. Unlimited Product Options and Creates an unlimited custom product fields including text, numbers, swatches, checkboxes, dropdown menus,radio buutons, file uploads and more.
Easy to set up, Flexible Conditional Logic, Add-On Pricing, Group Fields into Option Groups and reuse them, Price Add-On’s, Field Types and Support Team
Custom Product Builder:
Custom Product Builder app is super easy to set up and applies to any product type. You can enable personalization and customization for furniture, accessories, gifts & promotional products, pet toys, bags, clothes, sports accessories & trophies, wheeled devices, accessories for mobile devices, print-on-demand products, neon signs, dimensions based & weight priced products.
If you’re looking to replace the default variant dropdown in the Debut theme with direct selection options such as radio buttons or checkboxes (for example, displaying Size S, M, L, XL for customers to choose from), this can be fully achieved using Easify Product Options without any complex coding.
I’ve created a similar demo to help you better visualize how it works:
- This is the result:
- This is the app setting:
You just need to create a new option in the app, for example Size, then choose the display type as radio buttons or checkboxes. After that, assign this option to the relevant product and you’re all set. On the storefront, the options will appear directly for customers to click and select, similar to the demo you’re working on.
Additionally, you can set default values, mark the option as required, or customize the display to better match your product layout. If needed, you can also configure pricing to change based on the selected option.
This approach makes the product interface more intuitive and faster to interact with compared to the theme’s default dropdown. The app is user-friendly and easy to set up, so you can get everything running quickly without dealing with complex technical adjustments.
You can swap out the variant dropdown for radio buttons by modifying your product template. Add a loop for the product options in product-form.liquid and output each option as a radio input. Select the desired variant with JavaScript on change. Test thoroughly on desktop and mobile for full functionality.