Varient picker adjustments

[Thenacaduct]

Hello everyone,

I have the Motion theme and I’m trying to get the variant picker to show squares that are all the same size, and on mobile, show on just one row. Is this posible?

Screenshot attached.

[Galico-Digital]

Hey, thanks for sharing the details about what you are looking for.

Can you share your store url. This will help to provide you the code and guide you though about where to add the code.

[tim_tairli]

Trying to fit all color swatches on one line be may not good from the user experience point of view.

Small buttons are difficult to touch and you may find people either adding wrong item to cart or leaving your site.

So be careful with this.

If you’re talking about making textual buttons square – this can be done, by making your font smaller size.

Technically, you can add code like this to the “Custom CSS” of the product info section:

.variant-input> label {
  padding: 0;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1;

  width: 38px;       /* set the button size */
  font-size: 0.9em;  /* reduce font size to fit all sizes into square buttons */
}

If you have products with longer product option values titles, you can have separate templates for those, without this “Custom CSS”.
This is another benefit of using “Custom CSS”.

Before/After:

[devcoders]

Hi @Thenacaduct

Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.

Best regards,
Devcoder

[Easify-Ariel]

Hi @Thenacaduct

To display the variant selection boxes (square color swatches) in the same size and aligned in a single row, you can use Easify Product Options. The app gives you more flexible control over swatch display compared to the theme’s default variant options, so the color swatches appear more consistent and organized on the product page.

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

• This is the result:

• This is the app setting:

First, create a Color swatch option in the app as usual and assign that option to your product. You can add colors that match your existing variants to ensure the color selection displays accurately and stays in sync with the product on your store.

Next, go to the option’s Advanced settings tab and enable Show Color Slider. Then set Number of rows = 1 and adjust Swatches per row (for example, 8) to control how many color swatches appear in a single row. This keeps the swatches evenly aligned and consistent in size instead of wrapping unevenly onto multiple lines.

When this mode is enabled, the swatches will be displayed in a single-row slider, keeping them all the same size and aligned on one line on both desktop and mobile.

Additionally, Easify Product Options is designed to be easy to use even if you don’t have coding experience. If you need any help, our team is always ready to assist you in setting things up so everything works exactly as you’d like.

[Thenacaduct]

Thank you so much. I used your code and it worked flawlessly. I’m just wondering if the color and size squares are the same size or not. Screenshot attached.

[tim_tairli]

They should be as the code applies to both.

It’s just this inner border which fools your brain…

---

if my post is helpful, please like it ♡ and mark as a solution -- this will help others find it

[Thenacaduct]

Thank you so much. Marked as solution!