Custom URLs on Shopify Headless and Hydrogen

Learn how to use custom URLs in your Shopify Headless architecture using Hydrogen, the brand new headless framework by Shopify.

One of the main reasons merchants opt to use Hydrogen is to have more flexibility to improve their performance and SEO. An example of the essential and most effective benefits you can apply is using custom URLs on Shopify Headless. If you want to learn Shopify Headless development using Hydrogen, check out the course I created for it.

Custom URLs on Shopify Headless

The key takeaway you can get from this post is that your custom headless URL doesn’t depend on your backend. You can have completely custom URLs in the front to improve your SEO since the content will be fetched independently.

Custom Category URL

Our initial first step is you change the routes folder. The name defines the URL accepted, and let’s start by changing the collections to categoria in Portuguese.

You can find the folder routes inside your src folder. By changing the URL you will be able to access it right away.

Shopify Headless with Hydrogen and custom URLs

Ok, the URLs are working but now we need to adjust the links in our theme. As you can see below, I just changed the static link inside my Navigation file.

Shopify Headless with Hydrogen and custom URLs

In case you want to use a multi-language approach that are more configurations to complete, but at least now you know where to start. Thank you for checking this article and don’t forget to check out my Shopify Hydrogen course.

About me

Picture of Rafael Corrêa Gomes

Rafael Corrêa Gomes

Senior e-commerce developer and architect based in Montreal, Canada. More than ten years of experience developing e-commerces, saas products and managing teams working with Magento, Shopify, PHP, JavaScript, and NodeJS.