Create a Custom Menu or Navigation

Updated on 06th June 2023 in Existing Websites

Out of the box, Shoprocket can generate a "categories" menu for you, but you may want to create your own, in this tutorial, we will guide you through how to create your own custom menu or navigation for your online store using Shoprocket. This enables you to create a unique and user-friendly shopping experience for your customers.

An example custom menu using simple HTML text links to update the URL

Note: This tutorial assumes that you have already embedded our multi-product embed code into your website. If you haven't done so, please refer to our guide on embedding a multi-product code.

Step 1: Understand the URL Categories Parameter

Every category in your store corresponds to a parameter in the URL. For example, if you have a category called "plants", you can directly access it through the following URL:!/categories=plants

The #!/ part of the URL is mandatory. Following that, you add categories=, then the name of your category.

If you wish to display multiple categories at once, you can do so by separating the category names with a comma, like so:!/categories=plants,pots

Step 2: Plan Your Menu

The first step in creating a custom menu is to decide on the structure. Think about how you want to categorise your products. You might want to organize them by type, price, brand, or any other criteria that fits your business model.

Step 3: Create Your Menu Items

Now that you know how your menu will be structured, you can start creating the individual items. Each menu item should correspond to a category in your Shoprocket store.

Step 4: Link Your Menu Items to Your Categories

This process involves adding a link (or href) to each menu item, and setting its value to the URL of the category.

Here's how you would do this for a menu item that links to the "Plants" category:!/categories=plants

And here's an example for a menu item that links to both the "Plants" and "Pots" categories:!/categories=plants,pots

Additional URL Parameters

You can also include other parameters in the URL to create a filtered result. Here is an example:!/page=1&categories=plants&min_price=9&max_price=35&limit=10&sort=name_asc&currency=EUR&language=fr

This URL will show the "plants" category, with a minimum price of 9, a maximum price of 35, a limit of 10 items per page, sorted by name in ascending order, displayed in Euros (EUR), and in the French language (fr).

Can’t find what you’re looking for?

Chat with us 👋

or contact us on [email protected]

as featured in