Format Drop Down Menu on Product Page Prestige Theme

Store Design
, , ,

Topic summary

A user running the Prestige theme is trying to customize their product page dropdown menu styling. They want to add more whitespace, a white background, and a black border to match a reference design shown in an attached screenshot.

Attempted Solutions:

  • First suggestion targeted .ColorDropdown and .ColorSwatch__Radio classes with padding adjustments and border styling using CSS in base.css/theme.css files
  • Second suggestion provided generic select element styling with padding, white background, and black border in theme.css.liquid or global.scss.liquid

Current Status:

Neither CSS solution has worked for the user. The issue remains unresolved, suggesting the provided code may be targeting incorrect selectors or the Prestige theme uses different class names/structure than assumed. Visual comparison screenshots were provided showing the desired vs. current state.

Summarized with AI on October 27. AI used: claude-sonnet-4-5-20250929.
1

Running Prestige theme and wondering how to format the drop down menu to have bigger white space and background and black border like example photo.

Store: is-salon-yaletown.myshopify.com

Example:

Screenshot 2025-06-19 at 10.01.34 AM.png
Screenshot 2025-06-19 at 10.01.34 AM.png1190×496 240 KB

Current:

Screenshot 2025-06-19 at 10.01.56 AM.png
Screenshot 2025-06-19 at 10.01.56 AM.png1190×496 57.2 KB

2

Hey! @isSalon ,

Go to Online Store, then Theme, and select Edit Code.
Search for base.css/theme.css/style.css/main.css/custom.css file Add the provided code at the end of the file.

.ColorDropdown {
    padding: 15px !important;
    margin-left: -7px !important;
}
.ColorSwatch__Radio:checked + .ColorSwatch {
    border: 5px solid white !important;
    outline: 2px solid black !important;
}
3

Didn’t work :disappointed_face:

4

Hi,

Hope this will help

  • At theme.css.liquid, base.css, or global.scss.liquid, Add the Custom Styles
/* ===================================================
  Custom Styles for Drop-down Menu (Product Page) 
================================================== */
select {
  padding: 14px 16px; /* Bigger space inside the dropdown */
  background-color: #ffffff; /* White background */
  border: 2px solid #000000; /* Black border */
  border-radius: 4px;
  font-size: 16px;
}

select:focus {
  outline: none;
  border-color: #000000;
}
5

This didn’t work either.