Change the view of variants as buttons - Debut theme

Store Design
1

Currently using Shopify’s Debut theme and currently my variant options looks like this:

debut theme variant.PNG
debut theme variant.PNG565×198 4.81 KB

The look and view of these variants seems pretty odd and unorganized. Kindly help me get my variants into below format :

needed.PNG

Any help would be much appreciated.

Thanks and Regards

2

Hi @artbyatisan

Could you share your store URL?

3

Kindly check: https://dealswap.in/collections/all-products/products/seven-chakra-gemstone-tree-feng-shui-wealth-tree

4

Hello @artbyatisan

Go to online store ---------> themes --------------> actions ------> edit code------->theme.css ----> theme.css----> line number 1678
and delete this code.

[type=radio]+label, [type=checkbox]+label {
display: inline-block;
margin-bottom: 0;
}

Go to online store ---------> themes --------------> actions ------> edit code------->theme.css
add this code at the bottom of the file.

.product-form input, .product-form textarea, .product-form select, .product-form .disclosure__toggle {
display: none;
}
label:hover {
background-color: lightgreen !important;
}

and the result will be

15.png
15.png1212×681 477 KB

If this was helpful, hit the like button and mark the job as completed.
Thanks

5

Thanks for providing a solution. Kindly recheck the solution as now the variants are all being treated as text and thereby i had to reverse the changes. The look and everything was perfect. But its all being treated as just texts. Kindly check and update on this.

Thanks and Regards

6

Your revert on making it as variants would be much appreciated. Kindly help.

7

Hey, Could you please help with the solution.