How to modify sort functions in the Dawn theme?

[benderflexo]

Hey i need some help to remove some functions of the sort action on the dawn theme.

Tried it by myself but i dont get it right.

Here´s a picture of what i need.

Also it would be perfect if thebackground was black not grey .

Greetings

[PageFly-Victor · Accepted solution]

Hi @benderflexo ,

This is Victor from PageFly - Landing page builder, I’d like to suggest this idea for solution:

Step 1. Go to Online Store -> Theme -> Edit code
Step 2. Open your theme.liquid theme file
Step 3. Paste below code before </body> :

<style>
option[value="manual"],
option[value="title-ascending"],
option[value="title-descending"],
option[value="created-ascending"],
option[value="created-descending"]{
    display: none;
}

select#SortBy > option {
    background: black;
}
</style>

Hope my answer will help you.

Best regards,

Victor | PageFly

[PageFly-Victor]

Hi @benderflexo ,

Could you please share URL and your store password if it enabled? So that we can help you.
Thank you.

[benderflexo]

Hey Dude, sure

timeless-jewels-8256.myshopify.com/

Thx

[PageFly-Victor · Accepted solution]

Hi @benderflexo ,

This is Victor from PageFly - Landing page builder, I’d like to suggest this idea for solution:

Step 1. Go to Online Store -> Theme -> Edit code
Step 2. Open your theme.liquid theme file
Step 3. Paste below code before </body> :

<style>
option[value="manual"],
option[value="title-ascending"],
option[value="title-descending"],
option[value="created-ascending"],
option[value="created-descending"]{
    display: none;
}

select#SortBy > option {
    background: black;
}
</style>

Hope my answer will help you.

Best regards,

Victor | PageFly

[Mike5241]

Hi Victor,

Your advice works perfectly on desktop but I noticed that it doesn't work on mobile, on mobile I still see all the options in the drop down list, is there another liquid file to modify in addition to theme.liquid?

Thank you very much,

Mike

[PaulNewton · Accepted solution]

To the themes , or template, or sections, custom css

Read: https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css 

Try the following CSS bandaids

Options color (keep in mind changing a background means changing text to high contrast color, and form inputs have limited styling as they are mainly controlled by the operating system)

[name="sort_by"] option { 
 color: white;
 background-color: black;
} 

Removing which ones you want to keep from this rule (do not leave a trailing comma):

[value="manual"],
[value="best-selling"],
[value="title-ascending"],
[value="title-descending"],
[value="price-ascending"],
[value="price-descending"],
[value="created-ascending"],
[value="created-descending"] {
  display: none;
}

 i.e.

[value="manual"],
[value="title-ascending"],
[value="title-descending"],
[value="created-ascending"],
[value="created-descending"] {
  display: none;
}

Swapping option positions is more advanced and required modifying theme code directly to build an entirely custom dropdown.

For dawn based themes that's in several places in the facets.liquid snippet

https://github.com/Shopify/dawn/blob/main/snippets/facets.liquid#L479 

[benderflexo]

Hey,

thx to both of you for the instant Reply.

Will try it directly.

[benderflexo]

Both work Perfect, is there any way to change the name of the sort option ?

Date, new to old ---> newest

[niakakvoime]

works well but still appears on mobile devices, any idea why? 

[Mike5241]

Hi Niakakvoime,

I had the same problem, in case you still need it the following code worked for me in desktop and mobile:

https://kaniwong.github.io/2023/01/04/How-to-remove-sort-by-option-Dawn-theme-Shopify/

Mike

[Mike5241]

Hi Paul,

Your advice works perfectly on desktop but I noticed that it doesn't work on mobile, on mobile I still see all the options in the drop down list, is there another liquid file to modify in addition to theme.liquid?

Thank you very much,

Mike