Re: How to make the variant selector rectangle in imapct theme

Solved

How to make the variant selector rectangle in imapct theme

FreeSoulz
Tourist
9 0 1

Screenshot_296.png

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:
Screenshot_295.png

Accepted Solutions (2)

Anshul_arora
Navigator
450 128 93

This is an 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.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here

View solution in original post

Anshul_arora
Navigator
450 128 93

This is an 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.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here

View solution in original post

Replies 6 (6)

Anshul_arora
Navigator
450 128 93

This is an 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.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here
FreeSoulz
Tourist
9 0 1

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

FreeSoulz
Tourist
9 0 1

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

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

Anshul_arora
Navigator
450 128 93

This is an 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.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here
FreeSoulz
Tourist
9 0 1

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:

Screenshot_301.png

 

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
Navigator
450 128 93

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.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here