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

1 Like

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

1 Like

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.

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

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

1 Like