What's your biggest current challenge? Have your say in Community Polls along the right column.

move size drop down next to color drop down

Solved

move size drop down next to color drop down

v6
Tourist
17 0 2

I was wondering how I could move the size drop down next to the color, preferably with about an inch space in-between and also bring both buttons below it further up to be below the drop downs
v6_0-1708517904248.png

 

Accepted Solution (1)
ThePrimeWeb
Shopify Partner
2139 616 515

This is an accepted solution.

Hey @v6,

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
.product-form__input.product-form__input--dropdown {
    display: inline-block !important;
}

body .product-form__input, body .product-form__input .select {
    max-width: 100% !important;
    margin-right: 20px !important;
}
</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1708525161376.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

Replies 6 (6)

ThePrimeWeb
Shopify Partner
2139 616 515

Hey @v6,

 

Can you share the link to your store?

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
v6
Tourist
17 0 2

https://dressedmen.com/ 

password: nohwha

v6
Tourist
17 0 2
ThePrimeWeb
Shopify Partner
2139 616 515

This is an accepted solution.

Hey @v6,

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
.product-form__input.product-form__input--dropdown {
    display: inline-block !important;
}

body .product-form__input, body .product-form__input .select {
    max-width: 100% !important;
    margin-right: 20px !important;
}
</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1708525161376.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

Vinsinfo
Shopify Partner
460 158 157

@v6 Please share store URL to help you on this.

Please reach out to bizdev@vinsinfo.com for any enquires related to Shopify.
Our Services: Custom Theme Development, Theme Customization, Custom Feature Implementation, Data Migration, Custom APP Development, Website Optimization and Google Merchant Center Support
v6
Tourist
17 0 2

https://dressedmen.com/

password: nohwha