How do I Increase the Width of the Variant Box in the Debut theme?

Solved
Highlighted
Shopify Partner
15 0 4

I need the variant box on my site to equal the width of the add to cart button below as my variant options are very long. I'm using the debut theme. 

 

Increase Variant Box.png

1 Like
Highlighted

Hello @Cathy_Berse-Hur,

Please share your site url so that I will give you exact solution

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Shopify Expert
1381 111 206

please share a store url to better assist.

0 Likes
Highlighted
Shopify Partner
15 0 4

My client's shop is still under development and in its free trial period so I can't share the site since it is password protected. However you can see the effect I am looking for in this Shopify Debut Light demo where the variant box is the same width as the add to cart button. 

https://debut-theme-lightroom.myshopify.com/collections/staffan-holm/products/udon-chair-by-staffan-...

 

Udon Chair by Staffan Holm – debut-theme-lightroom.png

 

That is the look I want to achieve. Otherwise it will have to wait until next week when the password is removed from the site.

0 Likes
Highlighted
Shopify Partner
1023 214 463

@Cathy_Berse-Hur 

 

Go to your theme.scss.liquid file and add the following code at the end of file:

.product-form-product-template .selector-wrapper { width: 100% !important; }

Let me know if it does not work for you.

 

Thank you,

Tejas

Shopify Expert | Skype: tejas.nadpara
- Like and Mark as an Accepted Solution if reply helpful
- Feel free to contact me on support@hexaecommerce.com regarding any help
1 Like
Highlighted
Shopify Partner
15 0 4

Thank you for the suggestion, however it did not change the width

0 Likes
Highlighted
Shopify Partner
1023 214 463

This is an accepted solution.

@Cathy_Berse-Hur 

 

Try following code:

.product-form-product-template .selector-wrapper { width: 100% !important;     flex-basis: 100% !important; }

Thank you,

Tejas

Shopify Expert | Skype: tejas.nadpara
- Like and Mark as an Accepted Solution if reply helpful
- Feel free to contact me on support@hexaecommerce.com regarding any help
2 Likes
Highlighted
Shopify Partner
15 0 4

Thank you, Tejas! This did the trick:-)

0 Likes
Highlighted
Tourist
9 0 0

Where do I add this code please?

0 Likes
Highlighted
Tourist
9 0 0

Hi

Could you give me a step by step on how to do this please?

0 Likes