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:
https://your-site.com/#!/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:
https://your-site.com/#!/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:
https://your-site.com/#!/categories=plants
And here's an example for a menu item that links to both the "Plants" and "Pots" categories:
https://your-site.com/#!/categories=plants,pots
Additional URL Parameters
You can also include other parameters in the URL to create a filtered result. Here is an example:
https://your-site.com/#!/page=1&categories=plants&min_price=9&max_price=35&limit=10&sort=name_asc¤cy=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).
