Size swatch design

[leoking]

I have a problem with my size design they aren’t changing the size corresponding to the text the boxes are staying small even tho the text is long I would like for it to adjust and I would like for the numbers/letters to be centered as they are not in the first picture if anyone can help me out it would be greatly appreciated.

My website: Lexxyy.com

My current code for swatch /* — Container — */
.product-form__input {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
}

/* — Variant squares — */
.product-form__input input[type=“radio”] + label,
.product-form__input input[type=“radio”] + span {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
margin: 0;
padding: 0;
font-weight: bold;
font-size: 14px;
border: 2px solid #ccc;
cursor: pointer;
box-sizing: border-box;
transition: all 0.2s ease;
text-align: center;
line-height: 1;

/* Nudge text slightly left /
text-indent: -1px; / try -1px, -2px if needed */
}

/* — Hover — */
.product-form__input input[type=“radio”] + label:hover,
.product-form__input input[type=“radio”] + span:hover {
border-color: #000;
background-color: #333;
color: #fff;
}

/* — Selected — */
.product-form__input input[type=“radio”]:checked + label,
.product-form__input input[type=“radio”]:checked + span {
background-color: #000;
color: #fff;
border-color: #000;
}

[The_ScriptFlow]

Hey @leoking,
Thanks for posting this Question to Shopify community.
In order to fix the issue with the width of the color swatches you need to follow these steps.
Go to Shopify Admin >> Online Store >> Edit Code >> base.css
In the end of base.css paste the below provided code.

.product-form__input input[type="radio"] + label, .product-form__input input[type="radio"] + span {
  width: auto !important;
}

Results:
Once you paste the code then you will get the following results.

If this was helpful mark as Solution and Like it.

[tarcisioanunciacao]

Hi @leoking,

Here’s the code solution for you.

fieldset.js.product-form__input.product-form__input--pill label {
    width: auto;
}

I would also align your swatch at left just to keep the elements aligned following all the other items you currently have.

fieldset.js.product-form__input.product-form__input--pill {
    justify-content: flex-start;
}

Here’s the result:

Thanks!

[rajweb]

Hey @leoking ,

Perfect, thanks for sharing the screenshots and your current CSS I can see the issue: your swatch boxes are fixed at 40px width/height, so longer text like XX-Large or 8Inches/21cm doesn’t fit properly, and it messes up centering.

We just need to let the box resize automatically based on text length while keeping the text centered.

Fixed CSS for Auto-Adjusting Size Boxes

Replace your current swatch CSS with this:

/* — Container — */
.product-form__input {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

/* — Variant boxes (auto width, consistent height) — */
.product-form__input input[type="radio"] + label,
.product-form__input input[type="radio"] + span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;   /* smallest allowed size */
  padding: 10px 16px; /* padding adjusts for longer text */
  height: 40px; 
  margin: 0;
  font-weight: bold;
  font-size: 14px;
  border: 2px solid #ccc;
  cursor: pointer;
  box-sizing: border-box;
  transition: all 0.2s ease;
  text-align: center;
  line-height: 1.2;
  border-radius: 4px; /* optional for better look */
}

/* — Hover — */
.product-form__input input[type="radio"] + label:hover,
.product-form__input input[type="radio"] + span:hover {
  border-color: #000;
  background-color: #333;
  color: #fff;
}

/* — Selected — */
.product-form__input input[type="radio"]:checked + label,
.product-form__input input[type="radio"]:checked + span {
  background-color: #000;
  color: #fff;
  border-color: #000;
}

Now your boxes will grow with the text, whether it’s a single digit (6) or a long label (XX-Large).

This type of issue is super common when Shopify themes use fixed-size swatches. With this update, your sizes will look clean and consistent across all devices.

If you’d like, I can also help you add responsive adjustments (e.g., making swatches bigger on desktop and more compact on mobile). Feel free to reach out - you can check my past Shopify work + contact here: https://rajatweb.dev/

Best regards,

Rajat / Shopify Expert

[ZestardTech]

Hello @leoking ,

Here are the steps to apply the necessary changes in your Shopify store:

1. In your Shopify Admin, navigate to Online Store > Themes > Actions > Edit Code.

2. Locate Asset > base.css and paste the following code at the bottom of the file:

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

Let me know if you need further assistance!

[oscprofessional]

Hello @leoking

Thanks for sharing the screenshots and your current CSS. The issue is that you’ve hardcoded the width (40px) for your swatches, which makes them too small for longer text.

Make this changes in your code:

.product-form__input input[type="radio"] + label,
.product-form__input input[type="radio"] + span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px; /* keeps small ones square */
  height: 40px;
  padding: 0;   /* gives breathing room for longer text */
  font-weight: bold;
  font-size: 14px;
  border: 2px solid #ccc;
  cursor: pointer;
  box-sizing: border-box;
  transition: all 0.2s ease;
  text-align: center;
  line-height: 1;
}

.product-form__input--pill input[type=radio]+label {
    border: var(--variant-pills-border-width) solid rgba(var(--color-foreground), var(--variant-pills-border-opacity));
    background-color: rgb(var(--color-background));
    color: rgba(var(--color-foreground));
    border-radius: var(--variant-pills-radius);
    color: rgb(var(--color-foreground));
    display: inline-block;
    margin: .7rem .5rem .2rem 0;
    padding: 1rem 1.5rem;  /*Adjust padding*/
    font-size: 1.4rem;
    letter-spacing: .1rem;
    line-height: 1;
    text-align: center;
    transition: border var(--duration-short) ease;
    cursor: pointer;
    position: relative;
}

[leoking]

In your images it looks perfect but when I did it it looks like how it used to. Can you help me make it the same style as before side note I want only the numbers to be 40x40 thank you for your help

[leoking]

Can you please make it so the Ring sizes are 40x40 only and make the text bold like my style before on the other variants they work correctly but this one I want them to be 40x40 and the numbers to be in the center I can’t figure it out

[rajweb]

No worries at all - I’ll handle this for you and make sure the ring size buttons are 40x40, perfectly centered, and styled in bold like your other variants. Please feel free to reach out anytime. You can also find my contact information here on my portfolio: https://rajatweb.dev/

[Easify-Ariel]

Hi @leoking

It looks like you’re running into an issue where size options are displayed as buttons, but longer text doesn’t auto-adjust the button width and the text isn’t neatly centered. In cases like this, instead of dealing with complex code customizations, you can use Easify Product Options as a much simpler solution.

Here’s an example I’ve created so you can see how it works:

• This is the result:

• This is the app setting:

The app lets you recreate size options using its own display system. You can choose button-style options that remain clean and well-balanced for both short and long text, without the sizing issues you’re currently experiencing where buttons automatically stretch based on the text length.

In addition to buttons, Easify also supports various option types such as image swatches, color swatches, and dropdowns, giving you the flexibility to choose the display style that best fits your products. All of these can be set up directly in the app, with no technical knowledge required.

Easify is designed to be very easy to use, even for users who aren’t familiar with coding. If you need any additional help during the setup process, our team is always happy to assist.

[Parselab_Melissa]

Hi @leoking,

I hope you are doing well. If you’re open to try an third party app without changing the code, you can try the Inkybay – Product Personalizer app to show the size variants option that adjusts with the text size.

With Inkybay’s Product Option feature, you can create a size option and put text of any length in the option, which will adjust with the button size. You can show the option as an image swatch or color swatch, and change the product image based on the selected variants in the product page. All customer selections are automatically saved with the order, so you receive everything clearly in the order file.

Inkybay also lets you add other advanced options such as text fields, file upload options, image swatches, and custom free size/ preset size.

The best part is that no coding is required, and a simple setup. It offers a free 21-day trial so you can explore it and see how it works for your product.