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:
Topic summary
Main issue: Change variant option boxes in the Shopify Impact theme from rounded to rectangular, and make their sizes uniform.
-
A responder provided code to add at the bottom of theme.liquid (before ) to switch rounded variant boxes to rectangular. Output was shown via external screenshots/links.
-
The requester couldn’t view one image but proceeded to try the code.
-
Next request: Make all variant boxes a single, static size. Additional code (also in theme.liquid before ) was shared to enforce uniform dimensions. The requester confirmed this worked.
-
New requirement: Mark certain size variants with a colored dot to indicate faster shipping. The requester could not find an app for this and sought a code solution.
-
The responder stated this cannot be achieved with CSS alone because it requires variant-specific logic/data. They recommended custom development by a Shopify developer.
-
Outcome: Styling changes (rectangular shape and uniform size) achieved. Fast-shipping indicator remains unresolved and requires custom code.
-
Notes: Multiple screenshots and prnt.sc links are central to seeing the before/after results.
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 tag and save.
**After applying code output will be like this -: https://prnt.sc/Jh2P3XLijUb**U
I hope the code helps you.
Please share if you have any queries.
Thank you.
i cannot see the image, but thankyou for the code I’ll give it a try and let you know!
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:
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 tag [with the previous shared code]
Output -: https://prnt.sc/wT0N_ezvyQlb
I hope the code helps you.
Please like & accepted the solution if it helps.
Thank you.
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!
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.