How to Add "Shop by Price" Links to Shopify Menu (No Code)

Creating a seamless user experience is critical for e-commerce success. One effective way to improve navigation is by allowing customers to filter products by price directly from your site's header menu.

Imagine a customer landing on your site with a specific budget in mind. Instead of navigating to a collection and manually adjusting filters, they can simply click a "Shop under $20" link in your navigation bar.

In this tutorial, I'll show you how to implement this feature. The best part? It requires zero coding.

Prerequisites: Online Store 2.0

Before we begin, it is important to note that this method relies on the native filtering capabilities of Shopify's Online Store 2.0 themes.

Most modern themes (like Dawn) have this feature implemented by default. If your theme supports filtering collections by price on the collection page, this tutorial will work for you.

How It Works: Leveraging URL Parameters

When you filter a collection by price on your storefront, Shopify automatically updates the URL in your browser's address bar to reflect that specific range.

For example, if you filter a collection to show items between $0 and $20, the URL might append parameters that look like this:

/collections/all?filter.v.price.gte=0&filter.v.price.lte=20

We can treat this generated URL like any standard link and add it directly to your site's main navigation. Here is the step-by-step process.

Step-by-Step Guide

1. Generate the Filtered URL

First, we need to get the specific URL for the price range you want to feature.

1. Navigate to your Shopify storefront (as a customer would).
2. Go to any Collection page.
3. Locate the price filter sidebar.
4. Enter your desired values (e.g., $0 to $30, or $20+).
   • Note: You can leave one field blank to create an "Over $20" style filter.
5. Apply the filter. You will see the products update to show only those in the range.
6. Copy the full URL from your browser's address bar.

2. Add to Shopify Navigation

Now that you have the link, we need to add it to your header menu.

1. Log in to your Shopify Admin dashboard.
2. Go to Online Store > Navigation.
3. Select the menu you want to edit (usually the Main menu).
4. Click Add menu item.
5. Name: Enter a descriptive name for the link (e.g., "Under $20" or "$0 - $20 USD").
6. Link: Paste the URL you copied in the previous step.
   • Tip: Ensure you click on the result that appears in the dropdown to verify the link hook.
7. Click Add and then Save menu.

3. Test the Implementation

Go back to your live storefront and refresh the page. You should now see your new link in the navigation bar.

When you click it, the site should route you to the collection page with the price filters automatically applied. This provides a fast, curated shopping path for your budget-conscious customers.

Summary

This is a powerful, low-effort way to leverage existing Shopify functionality to improve your store's UX. By simply copying the URL parameters generated by your theme, you can create custom navigation paths without touching a single line of Liquid code.

If you found this tutorial helpful and want to level up your Shopify development skills, be sure to subscribe to the channel for more technical tips and tricks.