How to make the variant selector rectangle in imapct theme

[FreeSoulz]

Currently this is how my variants are displayed but I do not like these rounded boxes, i would like it look more rectangular like this:

[Anshul_arora · Accepted solution]

Hello @FreeSoulz ,

I understand you are looking to change the shape of the variant option in your store.

Please add the below mentioned code at the bottom of the theme.liquid file before </body> tag and save.

<style>
label.block-swatch {
border-radius: 5px !important;
}
</style>

After applying code output will be like this -: https://prnt.sc/Jh2P3XLijUbU

I hope the code helps you.

Please share if you have any queries.

Thank you.

[Anshul_arora · Accepted solution]

Hello @FreeSoulz ,

I understand you are looking to change the shape of the variant option in your store.

Please add the below mentioned code at the bottom of the theme.liquid file before </body> tag and save.

<style>
label.block-swatch {
border-radius: 5px !important;
}
</style>

After applying code output will be like this -: https://prnt.sc/Jh2P3XLijUbU

I hope the code helps you.

Please share if you have any queries.

Thank you.

[FreeSoulz]

i cannot see the image, but thankyou for the code I'll give it a try and let you know!

[FreeSoulz]

would it be possible for the variant boxes to have one static size like this:


Because mine vary per size now and i tink that looks a bit chaotic:

[Anshul_arora · Accepted solution]

Hello @FreeSoulz ,

Yes, you can provide one static size to all the variant boxes by applying below code

Add the code in theme.liquid file before </body> tag [with the previous shared code]

<style>
label.block-swatch {
height: 50px;
width: 100px;
justify-content: center;
padding: 0;
}

</style>

Output -: https://prnt.sc/wT0N_ezvyQlb

I hope the code helps you.

Please like & accepted the solution if it helps.

Thank you.

[FreeSoulz]

that works, thankyou. I have one more favor to ask if possible. Some variants (in my case sizes) are eligible for faster shipping so I would like to indicate that with a colored dot/symbol in the corner of the variant like this:

I hope this would be possible, since i cannot find how to do this anywhere nor can I find an app for it. Thanks!

[Anshul_arora]

Hello @FreeSoulz ,

I have checked your requirement and this can not be implemented only with the CSS.

For this implementation, custom code will be required that can provide features to you to highlight the fast shipping product. I suggest you have to hire Shopify Developer for this implementation.

[Please like & accept my previous solution, it will be highly appreciated.]

Thank you.