Sorting design

Store Design
,
1

Hi! I’m building my product page in the Craft theme and the sort menu only shows up with the MacOS basic design. Is there a way to change it to a custom designed dropdown or I will have to live with it? Thank you!

2 Likes
2

currently it looks like this, but I want it to match my theme.

Screenshot 2025-11-04 at 2.19.14 AM
Screenshot 2025-11-04 at 2.19.14 AM548×436 39.8 KB

3

Hi, I can help you with it. But it needs to add some custom code. If you need my help, please let me know.

4

Hi @Mateyss

Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.

Best regards,
Devcoder :laptop:

5

Hi @Mateyss

Kindly provide your store URL please and if it is password protected, please share the password as well.

Thanks!

6

https://founderscut.co thank you!

1 Like
7

Hi @Mateyss

1. Go to Online Store → Theme → Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

option {
    background-color: #efecec !important;
}

image
image389×240 6.6 KB

Thanks!

8

Hi @Mateyss

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > base.css and paste this at the bottow of the file:
.facet-filters__sort.select__select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 10px 36px 10px 12px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}

.facet-filters__sort.select__select:focus {
  outline: none;
  box-shadow: none;
  border-color: #ccc;
}

.select .svg-wrapper {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.select {
  position: relative;
  display: inline-block;
}

image
image1196×255 46.2 KB

If my assistance was helpful to you, please like and accept all my solutions. :white_check_mark:
Best regards,
Devcoder :laptop:

9

its till the standard macos dropdown for me:(

10

@Mateyss Please share screenshot.

11

Screenshot 2025-11-04 at 4.53.57 PM
Screenshot 2025-11-04 at 4.53.57 PM540×310 24.7 KB

I want to change this somehow into one that matches the design of the store

12

Hi @Mateyss

Try this code.

.facet-filters__sort.select__select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 10px 36px 10px 12px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  color: #000;
}

/* Safari focus outline fix */
.facet-filters__sort.select__select:focus {
  outline: none;
  box-shadow: none;
  border-color: #999;
}

/* For Safari (try to override minimal native look) */
@supports (-webkit-appearance: none) {
  .facet-filters__sort.select__select {
    background-color: #fff !important;
    color: #000 !important;
  }
}

/* Wrapper icon position */
.select {
  position: relative;
  display: inline-block;
}

.select .svg-wrapper {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}
13

its still the same I don’t know why

14

Hi @Mateyss

Which browser are you checking it on, dear?

15

i’m using safari but tried chrome too both show it like this

16

Hi @Mateyss

There’s an issue on mobile, dear.

Best regards,
Devcoder :laptop: