I would like to have my product variant pills shown vertically instead of horizontally on my product page. How would I go about doing this?
Ex: 5 Pack (Live)
5 Pack (Sealed)
10 Pack (Live)
10 Pack (Sealed)
Alternatively, can I have the pills show in a 2x2 format? How would this version be done?
Ex: 5 Pack (Live) 10 Pack (Sealed)
5 Pack (Live) 10 Pack (Sealed)
My theme is Dawn. I have attached a screenshot to my current store layout. I would appreciate any advice! Thank you!
Hello @magikartcards
would you like to share your store URL and password if any please.
so i can check and provide you possible solution for your question.
Moeed
January 8, 2025, 7:01am
3
Hey @magikartcards
Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.
Best Regards,
Moeed
Url is provided in response to another comment above. Thanks!
Moeed
January 8, 2025, 7:03am
6
Hey @magikartcards
Follow these Steps:
Go to Online Store
Edit Code
Find theme.liquid file
Add the following code in the bottom of the file above tag
RESULT:
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
Best Regards,
Moeed
1 Like
You can add code by following these steps
Go to Online Store → Theme → Edit code.
Open your theme.liquid file
Paste the below code before on theme.liquid
.product-form__input {
display: flex !important;
flex-flow: column !important;
}
RESULT:
my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution .
1 Like
That worked great! Thank you so much!
Is there a way to make the pill smaller so it fits the text better without having so much blank space on either side?
1 Like
Moeed
January 8, 2025, 7:25am
10
Hey @magikartcards
Keep the previous code and add this new code above in the end of theme.liquid file
.product-form__input--pill input[type=radio]+label {
width: 60% !important;
}
RESULT:
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
Best Regards,
Moeed
1 Like