Setting up redirects in Shopify for pages that exist

Shopify is an exceptional piece of software for store owners looking for a simple eCommerce solution. It’s for the most part plug and play, and the themes generally offer extensive customisation options.

There are however times when you need to implement something that sits outside of the bounds of what Shopify offers, and this can be difficult when you are tied into their ecosystem. One example is redirects: Shopify does not have an easy option for setting up redirects for existing pages. This means that you cannot set up a custom redirect unless the page you are redirecting from results in a 404. This is by design and redirecting a live page is really an edge-case that most users do not often need to address.

There are however niche scenarios where this might become applicable. I recently was tasked with improving SEO for a client and after my initial audit, I realised that one of their apps had created separate pages for product information. This particular app needed these pages to exist on their own as it was using Liquid to pull the content into tabs. Those that know a bit about SEO will understand that having duplicated content is not ideal. Another issue with this particular scenario is that all these pages were also searchable on the front-end which means visitors were landing on random pages of product information without actual products.

My primary goal was to add permanent redirects as these pages should not be accessible under any circumstances. There are several Shopify apps that allow you to manage and monitor redirects but none of them seemed to solve for my particular use case. Another consideration was having a solution that’s free, and the community is in fact quite vocal about the fact that this should be a standard feature within Shopify.

After a lot of trial and error I’ve landed on what I believe to be a pretty solid solution to this problem and it involves only two simple steps:

1. Using the bulk editor to add a Redirecturl metafield
2. Editing your template to add a script, where the URL stored within Redirecturl is added to a window.location JavaScript function

The one caveat with this solution is that the redirect is not server-side, which is the preferred solution, but it’s worked really well for my particular use case. If you are after a server-side solution then the rest of this guide isn’t for you.

Using the bulk editor to add metafields

If you already know about metafields then you can skip to the last two paragraphs of this section.

I only discovered metafields in Shopify recently and the simple capability opened up a world of possibility. I will be releasing a lot more metafield related content, but here’s the short primer from Shopify on what they are:

Don’t worry too much if you don’t understand exactly what this means – the important bit is that it allows you to store additional information on essentially any piece of content within Shopify. This additional information can be anything: Product information, related content pieces, or even a URL. We’ll be storing our destination URLs for the redirects as metafields for this solution.

Accessing metafields is strangely vague and requires you to add some parameters to your Shopify backend URL. These URLs are not easy to access and I recommend you save them as a bookmark so they don’t go missing! The structure of a metafield URL looks like this:

Metafields are initiated in the backend by visiting /admin/bulk and adding the following URL parameters:

1. resource_name: The type of content or resource you want to assign fields to. This could be page, product, collection etc.
2. edit: The metafields you want to edit. In our case we want to modify the global metafields as we want these to be accessible within our theme

With the above in mind, we want to create a metafield called Redirecturl. Metafields are always converted to lowercase, and the first letter capatilised. It’s important to remember this rule as you will need to reference the metafield correctly within your theme. We want to add redirects to pages which means we need to add page as a resource or content type. Our final URL thus looks like this:

When you hit this URL you will be presented with a list of all of your Shopify pages, as well as a second column called Redirecturl. You can now click into the cells in this second column to add redirect URLs. Save your changes and the metafields are now saved globally for all of the pages you modified.

Adding metafields to your page template

Metafields can be accessed within theme templates using Liquid, the coding language used within Shopify themes. You don’t need to know much about Liquid to follow along for this section, but keep in mind that you will be editing your theme code and mistakes can potentially cause your website to break.

For this particular solution, we will be using JavaScript to redirect the browser on the front-end as we do not have access to redirect from the server-side. JavaScript redirects have been shown to work with Google’s crawler, which makes this a good option for dealing with this use case. Alternatively, you can also use an HTML meta refresh tag, but this has been shown to be less effective from an SEO perspective.

You can add this redirect to your page template, or add it at a theme level. I chose to go with the latter as I ultimately want this JavaScript to fire immediately when the page loads, meaning the code needs to be as high up in your HTML code as possible. We will be adding this to the theme.liquid file which can be accessed by going to Themes > Live Theme > Actions > Edit Code. It’s important that you do a back-up of your theme before you attempt this if you are not comfortable with editing theme files.

The code we will be adding looks like this:

{%- if pages[handle].metafields.global.Redirecturl -%}
    <script>
         window.location = "{{ pages[handle].metafields.global.Redirecturl }}";
     </script>
{%- endif -%}

The logic is really simple:

1. We use a Liquid if statement to see whether or not the metafield exists
2. We use pages[handle] to check metafields for the page resource type. [handle] references the current handle (i.e. the URL or slug) of the current page. This ensures we are checking the metafield for the current page only
3. We reference metafields.global.Redirecturl which is where our metafield is stored
4. We add a <script> tag with a window.location function (which is used to do a redirect)
5. We then reference the metafield as the value of window.location

In summary, this script will add the URL you want to redirect to, to a window.location function, if the page you are on has the Redirecturl metafield. I added this right below the opening <head> tag within theme.liquid and the final code looks like this:

I hope this helps someone – it’s not an ideal solution but it certainly helped me out of a pinch. Metafields are really powerful and I encourage you to think about other scenarios where they might be useful.