Format Drop Down Menu on Product Page Prestige Theme

Store Design
, , ,
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.