Hi I would really like some help to get my dropdown menu for selecting variants to be centered with the rest of the page . Please any help would be great!
Store: believersbrigade
Password: meatri
Topic summary
A user seeks help centering the variant dropdown menu on their Shopify store using the Dawn theme. The dropdown currently doesn’t align with the rest of the page content.
Solution Provided:
- Navigate to Shopify Admin → Online Store → Themes → Actions → Edit Code
- Open Asset > base.css file
- Add CSS code at the bottom to center the dropdown
Key CSS modifications include:
- Setting
.product-form__input--dropdown .selectmargin to auto - Adjusting max-width to 100% for form inputs and buttons
- Centering the product form container
The response includes a complete CSS code snippet to implement the fix. The discussion appears resolved with a technical solution provided, though no confirmation from the original poster is included.
1 Like
Hello @Jacobsladdr
- In your Shopify Admin go to online store > themes > actions > edit code
- Find Asset > base.css and paste this at the bottom of the file:
.product-form__input--dropdown .select {
margin: 0 auto;
}
.product-form__input.product-form__input--dropdown {
max-width: 100%;
}
form#product-form-template--19486640046366__main {
margin: 0 auto;
}
.product-form__buttons {
max-width: 100%;
}
.product-form__input {
max-width: 100%;
}