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

[Ulalala]

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!

Website: https://vintage.kyoto/

Password: kvw2525

[BSS-Commerce]

Hi @Ulalala ,

You can follow these steps:

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

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>

 

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

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

 

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

Hope it helps @Ulalala