Add variant line break?

Store Design
,
1

Hi all,

Hope you are well. I would like to add a line break to the end of each variant option in the product page.

Please find below an example. May I know how can I do that?

Thanks very much in advance.

JoeySmith_0-1734950627272.png
JoeySmith_0-1734950627272.png842×703 23.8 KB

Kind regards,

JoeySmith

2

Hi @ali768 ,

The URL is https://xer6vq-gd.myshopify.com/products/t-shirt

The passcode is gemini88

Thanks

3

Thanks @ali768 , but I would like Color to be underneath Size, not next to Size. Would it be possible? Thanks a lot.

4

Hello, @JoeySmith

  1. Go to Online Store
  2. Edit Code
  3. Find theme.css/base.css file
  4. Add the following code in the bottom
.product-form__input--pill input[type=radio]+label {
    display: table;
    width: 120px !important;
}

Thanks!

5

Hi @JoeySmith 1. Go to Online Store → Theme → Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

.product-form__input--pill input[type=radio]+label {
    display: block !important;
    width: 139px !important;
}

Result:

websensepro_0-1734952768698.png
websensepro_0-1734952768698.png956×506 138 KB

If my reply is helpful, kindly click like and mark it as an accepted solution.
If you are happy with my help, you can help me buy a COFFEE
Thanks!

1 Like
6

Thank you @websensepro it works !