How to make variable dropdown wider

Store Design
1

Hi,
You all have been a great help!

I am editing the Pursuit theme and would like to make the variable drop down wider. Any idea where and how to do this?

Screenshot 2025-12-19 104316
Screenshot 2025-12-19 1043161147Ă—556 76.8 KB

2

Hi

Any chanse yo ucould sharea link to your site?

I checked the demo, and it does not look the same as yours, and none od product Isaw did not have a dropdown.

3

Hi, Does this link work for it? It’s not published yet

4

Here’s a little bit of CSS that will make that drop down wider:

.single-option-selector {
  width: auto;
  min-width: 100%;
}

It’ll look like this:

image
image1334Ă—1469 239 KB

You’ll want to add that line of code to the bottom of your theme’s CSS file. I can walk you through it if you don’t already know how.

5

That did it… Thank you!

6

Will this work on other themes as well?

7

Happy to help :slight_smile: . I don’t believe this snippet will work on other themes, because each theme has its own way of naming its components, and the .single-option-selector in my CSS snippet translates to “make this specific selector with THIS NAME wider”. If you had another theme in mind, it would be very easy for me to rewrite the CSS for that theme, though. It would literally take a few seconds.

8

Hi Kory, Thank you for the help…

It would be these two themes

9

It’s the Empire and Spoke theme

10

Okay, for Spoke, this is the correct CSS:

.product-form-input.product-form-input-dropdown {
  width: auto;
  min-width: 500px;
}

I put 500px to make it bigger. You can make that number bigger or smaller to control the width.

And for Empire:

.options-selection__input-select {
  min-width: 500px;
}

Where it’s the same deal. Adjust the number to adjust the size.

11

I tried it on Empire, but it did not change anything. Paste it at the bottom of theme.css.liquid correct?

12

@kory-smith

You need to be careful with min-width, as on mobile, it would not look good.

13

My bad. Use this one instead for Empire:

.options-selection__select {
  width: 500px;
}

And yes, just paste that at the bottom of the theme.css.liquid.

14

Thank you Kory. The one for Pursuit worked but so far not for Empire

15

That’s so strange. I downloaded the CSS off your site, and I don’t see the CSS you added. For Empire, instead of editing the theme CSS file, let’s try the “Custom CSS” feature instead (documented here).

  1. Go to Online Store > Themes > Customize

  2. Click the Theme settings icon (the paintbrush)

  3. Scroll down to Custom CSS

  4. Paste this:

.options-selection__select {
  width: 500px;
}
  1. Save

Let me know if that works, please. I’ll make sure we get this working for you.

16

That worked. Thank you!