Beyond the Default: Customizing 'Sort By' Options in Shopify's Prestige Theme

Hey there, fellow store owners! Let's talk about something that might seem small but can make a huge difference in how your customers browse your products: the 'Sort by' options on your collection pages. Getting these just right can streamline the shopping experience and highlight what you want your customers to see first.

Recently, a lively discussion popped up in the Shopify community about customizing these very options, specifically for stores using the popular Prestige theme. User ejonesss (Elizabeth) kicked things off, asking how to remove a whole list of 'Sort by' options from her site, including 'Most Relevant', 'Best Selling', and all the alphabetical and date-based sorting options. She was on Prestige 9.3.0 at the time (later clarified to 10.3.0) and had already tried a few different codes without luck.

Why Customize Your 'Sort By' Options?

While Shopify provides a robust set of default sorting options, not every option is relevant for every store. For example:

• A boutique selling unique, handcrafted items might not benefit from a 'Best Selling' option if inventory is limited or focus is on new arrivals.
• A store with a small, curated catalog might find 'Alphabetical' or 'Date, old to new' options redundant.
• Simplifying the choices can reduce decision fatigue and guide customers more effectively to products you wish to promote.

Tailoring these options allows you to create a cleaner interface and a more focused shopping journey, aligning with your brand's specific goals and product strategy.

The Initial Idea: Language Editor (and Why It Didn't Stick for Everyone)

The first suggestions from community members WebsiteDeveloper and efegokdemir pointed towards a neat, no-code solution: using the theme's language editor. This method is often a lifesaver for minor text tweaks without diving into Liquid code.

Here's how that method works:

1. From your Shopify admin, go to Online Store > Themes.
2. Find your Prestige theme, click the ... (three dots) button, and select Edit default theme content.
3. In the search bar, type "sort".
4. You'll see a list of labels for each sorting option. For any option you want to hide, replace its text with a single blank space (don't leave it completely empty!), then click Save.

This approach is generally safer because you're not touching the theme's core code. However, for Elizabeth, this didn't quite do the trick. As the conversation evolved, it turned out she was actually on Prestige 10.3.0, not 9.3.0, which can sometimes affect how these settings are interpreted or rendered by the theme. This highlights a crucial point: theme versions and specific theme implementations can influence the effectiveness of certain solutions.

Quick Fix: Hiding Options with CSS (Moeed's Solution)

When the language editor didn't work, community member Moeed offered a straightforward CSS solution. This method doesn't remove the options from the HTML structure but visually hides them from your customers. It's a quick and effective way to achieve the desired visual result without complex Liquid modifications.

How to Implement the CSS Solution:

1. From your Shopify admin, go to Online Store > Themes.
2. Find your Prestige theme, click the ... (three dots) button, and select Edit code.
3. In the file explorer, find the theme.liquid file.
4. Scroll to the very bottom of the file and paste the following CSS code right above the tag:

This code targets the specific buttons (or dropdown options, depending on your theme's HTML structure) by their value attribute and sets their display property to none, making them invisible. This worked perfectly for Elizabeth, providing an immediate visual fix.

Pros and Cons of the CSS Approach:

• Pros: Easy to implement, no complex logic, quick visual result.
• Cons: The options are still present in the page's HTML (DOM), which might affect accessibility tools or SEO in minor ways. It's a visual hide, not a true removal. Future theme updates or structural changes could potentially break this CSS.

The Robust Solution: Filtering with Liquid Code (efegokdemir & devcoders' Approach)

For a more robust and cleaner solution that truly removes unwanted sorting options from the page's HTML, modifying the Liquid code directly is the way to go. This is often the preferred method for developers and offers greater control and future-proofing.

Why Liquid Filtering is Superior:

By filtering the collection.sort_options loop, you prevent the unwanted options from ever being rendered in the HTML. This results in a cleaner codebase, better accessibility, and a more robust solution less prone to being affected by minor theme updates.

How to Implement the Liquid Filtering Solution:

Always duplicate your theme as a backup before making any code edits!

1. From your Shopify admin, go to Online Store > Themes.
2. Find your Prestige theme, click the ... (three dots) button, and select Edit code.
3. Use the code search bar (usually in the top left) and look for collection.sort_options.
4. You'll likely find this loop within files like snippets/facets.liquid or snippets/collection-toolbar.liquid, depending on your Prestige theme version.
5. Locate a loop similar to: {% for option in collection.sort_options %} or {% for sort_option in collection.sort_options %}.
6. Add the following code immediately before the loop:

{%- assign hidden_sort_values = 'most-relevant,best-selling,title-ascending,title-descending,created-ascending,created-descending' | split: ',' -%}

This line creates a Liquid array of the value attributes for the sorting options you want to hide.

7. Then, add this immediately after the opening for line:

{%- if hidden_sort_values contains sort_option.value -%}
  {%- continue -%}
{%- endif -%}

This conditional statement checks if the current sorting option's value is in your hidden_sort_values list. If it is, continue skips to the next iteration of the loop, effectively preventing that option from being rendered.

8. The completed section should look roughly like this:

{%- assign hidden_sort_values = 'most-relevant,best-selling,title-ascending,title-descending,created-ascending,created-descending' | split: ',' -%}

{%- for sort_option in collection.sort_options -%}
  {%- if hidden_sort_values contains sort_option.value -%}
    {%- continue -%}
  {%- endif -%}

  

{%- endfor -%}

Important: If your loop uses option instead of sort_option, remember to change sort_option.value to option.value accordingly.

If the search for collection.sort_options returns more than one loop (e.g., one for desktop and one for mobile sorting menus), apply the same filtering logic to each relevant loop to ensure consistency across all views.

Best Practices for Shopify Theme Customization

Whether you're making minor CSS tweaks or diving deep into Liquid, always follow these best practices:

• Duplicate Your Theme: Before making any code changes, always create a duplicate of your live theme. This provides a quick rollback option if something goes wrong.
• Test Thoroughly: After implementing any changes, test your collection pages extensively on different devices and browsers to ensure everything works as expected.
• Understand User Experience: Consider why you're removing certain options. Does it genuinely improve the customer journey, or could it frustrate some users?
• Document Your Changes: Keep a record of the modifications you've made. This is invaluable for troubleshooting or when applying future theme updates.
• Stay Updated: Shopify themes, especially popular ones like Prestige, receive updates. Custom code might need adjustments after an update.

Conclusion

Customizing the 'Sort by' options in your Shopify Prestige theme is a powerful way to refine your store's user experience and guide customers more effectively. While simple CSS can provide a quick visual fix, the Liquid filtering method offers a more robust and cleaner solution by truly removing unwanted options from your page's HTML.

By understanding these methods, you can take greater control over your Shopify store's functionality and presentation. If you're looking to start your own e-commerce journey or migrate an existing store, Shopify offers a powerful and flexible platform to build your dream business. And if you ever find yourself needing expert assistance with complex migrations or advanced Shopify development, remember that the Shopping Cart Mover team is here to help you navigate the intricacies of e-commerce with ease.