Order Search Bar Suggestions/Results Alphabetically - Dawn Theme

Store Design
, , , ,

Topic summary

A user is experiencing random ordering of search results in the Dawn theme’s search bar when searching for pages. They need the suggestions to display alphabetically.

Proposed Solution:

  • Access the theme code editor (Online Store → Edit Code)
  • Locate the en.default.json file
  • Modify the search suggestion fetch function to include sorting logic
  • Add JavaScript code to sort results alphabetically by title using localeCompare()

The solution involves intercepting the search API response and applying a .sort() method to the results array before rendering. The user is working on an unpublished theme and has provided a preview link for reference.

Summarized with AI on November 4. AI used: claude-sonnet-4-5-20250929.
1

Hey All

I’m using the search bar on the Dawn theme to search pages, but the suggestions/results show in a random order. Does anyone know how to sort them alphabetically? Thanks in advance :slightly_smiling_face:

LINK TO PREVIEW (We are working on an unpublish theme)

Screen Shot 2024-11-15 at 3.01.29 PM.png
Screen Shot 2024-11-15 at 3.01.29 PM.png262×541 42 KB

2

Hello, @teoias

  1. Go to Online Store
  2. Edit Code
  3. Find en.default.json file
fetch('/search/suggest.json?q=' + query + '&resources[type]=product')
  .then((response) => response.json())
  .then((data) => {
    let results = data.resources.results.products;

    // Sort results alphabetically by title
    results.sort((a, b) => a.title.localeCompare(b.title));

    renderSearchResults(results); // Function to display sorted results
  });

Thanks!