Changing the size of the size variant in the product description page

Store Design
1

Hi there, I would like to reduce the size of the ‘size’ buttons within the variant picker section on my product page.

Here’s a reference picture of how I want it to look. With the sizes all on the same row.

404virtues_0-1720414344634.png
404virtues_0-1720414344634.png853×740 17.8 KB

I tried using code, that other shopify users were implementing to change the size variant, however the code significantly changed the size of the color variant also. To the point of distorting it.

I would like the color variant and the size variant to be roughly similar in size such as the example image.

Here’s my website: https://404virtues.com/

2

@404virtues ok so inside your section-main-product.css file add this code at the bottom

.js .product-form__input .product-form__input–pill{

display: flex !important;

}

Then in your component-product-variant-picker.css file add this code at the bottom of the file

.product-form__input–pill input[type=radio]+label{

width: 25px; // Adjust the width or say size of your variant box

display: flex;

justify-content: center;

align-items: center;

}

If this helps please like and mark it as solution.

For any help or queries on web dev in future

Email

Buy me Coffee

If this helped. serves as a motivation to come with solutions for your businesses.

Thanks anyways

3

@404virtues Please follow below steps to change the size of the size variant in PDP. Let me know whether it is helpful for you.

  1. From admin, go to “Online Store” → “Themes”.
  2. Click action button from the current theme and select “Edit code”.
  3. Go to “base.css” file and paste the below code at the bottom of the file and save changes.
.product-form__input--pill input[type=radio]+label {
    padding: 10px 15px !important;
    margin-right: 0px !important;
}

Result will be like,

Vinsinfo_0-1720417786722.png
Vinsinfo_0-1720417786722.png784×664 18.9 KB

Please provide your support by click “Like” and “Accepted” if our solution works for you. Thanks for your support.

4

Hi @404virtues

This is Amelia from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file → Save

.product-form__input–pill label {

padding: 10px 15px!important;

}

Hope that my solution works for you.

Best regards,

Amelia | PageFly

1 Like
5

Umm, actually amazing,

Thanks, so much.

6

Hi there, I tried this option and it did make the variants smaller, but one variant was still on another row.

Thanks for your help.

7

Hi there, I add all my code inside of the theme editor because it makes my life easier, and I didn’t want to much around in the code area.