Product Variant Pills Orientation

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.

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

https://magikartcards.com

Url is provided in response to another comment above. Thanks!

Hey @magikartcards

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. 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

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. 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.

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?

Thank you!

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