How do I Increase the Width of the Variant Box just a little

Highlighted
Shopify Partner
6 0 0

How do I Increase the Width of the Variant Box just a little

0 Likes
Highlighted
Shopify Staff
Shopify Staff
100 0 16

Hey there Sean!

Cynthia here, a Guru with Shopify :).

Would you be able to provide me with a link to your store?

The variant code/box size code would vary with each different theme - so an example would be really helpful with getting you the right information :).

Let me know!

Cynn | Guru @ Shopify

0 Likes
Highlighted
Shopify Partner
6 0 0

Hi Cynn! Sorry, I forgot to include theme. It's the Supply Theme.

0 Likes
Highlighted
Shopify Staff
Shopify Staff
100 0 16

Hey Sean!

No worries at all :).

So, for the Supply theme - you'll need to to the Edit HTML area of your theme settings and into the timber.scss.liquid Asset.

Once you're there, scroll all the way down to the bottom and add this piece of code:


select#productSelect-option-0.single-option-selector {
    width: 300px;
    height: 50px;
  max-width: 100%;
  }
  
select#productSelect-option-1.single-option-selector {
    width: 300px;
    height: 50px;
  max-width: 100%;
  }
  
select#productSelect-option-2.single-option-selector {
    width: 300px;
    height: 50px;
  max-width: 100%;
  }
  

This will cover all three options for different variants that your products have, and you can play around with the sizing from there once it's pasted in :). 

Let me know if you have any troubles!

Cynn | Guru @ Shopify

0 Likes
Highlighted
Shopify Partner
6 0 0

Hi Cynthia!  Thanks so much for getting back to me with that info!
I got sidetracked by the madness of the holiday season. 

I applied the code you provided and it works on desktop.

It did not adjust mobile though? How would I do that, do you know?
 

0 Likes
Highlighted
New Member
2 0 0

This is absolutely ridiculous that users pay for this platform and then are expected to edit code like we're Doogie Howser or something

0 Likes