A user wants to modify the variant selector dropdowns on product pages in their Focal theme to match the standard dropdown style used elsewhere on their site (specifically on contact forms and warranty request pages).
Current situation:
Proposed solution:
A community member initially suggested CSS code to modify the combobox styling:
.combobox[dir=rtl][open] + select {
border-radius: 30px;
border-color: black;
}
.combobox-box {
border-radius: 10px;
border-top: 1px solid rgb(var(--border-color));
}
Outcome:
The CSS approach was deemed insufficient. The responder noted that achieving an exact match requires developer intervention, as the product page dropdowns are structured differently in HTML compared to the warranty page dropdowns (separate containers vs. written elements).
Status: Unresolved - requires custom development work beyond simple CSS modifications.
I am looking to change the variant selector dropdowns on my product pages to look like what is pictured below:
My theme uses this dropdown design by default on contact forms, but not on the product pages. (Pictured below is how the dropdown appears on product pages)
Here is a link to my site if needed: https://pondstream.com/products/kasco-floating-surface-aerator
Thank you!
Hi @hdkingy
Do you mean like this?
if its is check this one.
From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
Find the theme that you want to edit and click on “Actions” and then “Edit code”.
In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
[dir=ltr] .combo-box[open]+.select {
border-radius: 30px;
border-color: black;
}
.combo-box {
border-radius: 10px;
border-top: 1px solid rgb(var(--border-color));
}
And Save.
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
That is very close, but I am looking to remove the styling entirely in favor of a standard dropdown menu.
Essentially I’m trying to make the product variant dropdowns appear exactly like the dropdown menu here:
I see, this needs a developer to copy the designs on, the titles on the dropdown in product are separate in container while warranty page are written one the html.
