Change the options in the sort by dropdown menu - Dawn theme

Ulalala
New Member
16 0 0

Hi,

How can I put "Latest Arrivals" option on the very top of the sort by dropdown menu?

I'm using Dawn theme.

Thank you so much for your help in advance!

スクリーンショット 2024-02-01 23.14.15.png

 

Website: https://vintage.kyoto/

Password: kvw2525

Reply 1 (1)

BSS-Commerce
Shopify Expert
3376 447 494

Hi @Ulalala ,

You can follow these steps:

Step 1: Go to admin -> Themes -> Edit code

view - 2024-02-06T110843.643.png

Step 2: Find the theme.liquid file and base.css file

Add this code near the end of the theme.liquid file before the </body> tag

<script>
    let sortEl = document.querySelectorAll("select[name='sort_by']")
    sortEl.forEach((sortItem) => {
        sortItem.addEventListener("click", function () {
            let elementsSort = Array.from(sortItem.children);
            elementsSort.reverse();
            sortItem.innerHTML = '';
            elementsSort.forEach(function(element) {
                sortItem.appendChild(element);
            });
        })  
    })
</script>

view - 2024-02-06T110946.919.png 

This CSS code goes at the end of the base.css file:

      select#SortBy > option {
          background-color: #ffffff !important;
      }

view - 2024-02-06T111042.411.png 

Result:  https://www.loom.com/share/ede9a838a24349ab94f16a2b7e8c4ccf?sid=68692547-c51e-4659-92ab-8971809781b7

Hope it helps @Ulalala 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development