Remove collection from Shopify URLs

One of the most frustrating things about Shopify's collection URL structure is that you can't change it. Ask any SEO consultant and they will find this frustrating.

Even more agonizing for this technical SEO conundrum, is that every time you add a product to a collection, a new URL is created, plus the main product URL. When the collection and collection name is included in the URL, that's called a collection-aware URL.

Including the collection in the URL is not a huge issue. I think this is more of a preference to keep links easy to read and keep potential 404 errors at bay.

Notice the /collections/ in the URLs below:

• collection-aware URL: /collections/mens-watches/products/example-1234
• collection-aware URL: /collections/diving-watches/products/example-1234
• collection-aware URL: /collections/digital-watches/products/example-1234
• collection-aware URL: /collections/clearance/products/example-1234
• product-only URL: /products/example-1234

The product-only URL should be the canonical URL or the official, main page where this product is located. In other words, the first four URLs all point to the last product URL.

To be more precise:

• Non-canonical URL path: /collections/mens-watches/products/example-1234
• Canonical URL path: /products/example-1234

Though JSON-LD for SEO doesn't futz with your URLs, I get asked about the collection URls all the time because it's confusing. We only use the canonical URL for your structured data.

Most of the more modern themes don't allow Google to index the non-canonical collection product pages. Older themes may still have the issue. Not to say that newer themes don't have this problem, it's just not as common.

Duplicate content is another common reason for wanting to remove collection-aware URLs. If we look back at the examples above, all 4 collection URLs and the product URLs have the same end content, the product description. If Google is indexing all 5 URLs, you may run into Google Page Index reporting issues for "Alternate page with proper canonical tag" and "Duplicate, Google chose different canonical".

Shopify has it configured in the robots.txt file that the collection-aware URL should not be indexed, only the product-only URL should be indexed. However the robots.txt file is a recommendation, not a fact so it’s still possible to index collection-aware URLs.

Are there risks to remove the collection-aware URL from Shopify?

Yes! Removing the collection-aware URL could impact your breadcrumbs both visually and in your structured data.

When a customer navigates to your product from a collection, they may use the visual breadcrumb to navigate back to the collection. By removing your collection-aware code (as shown below) that will likely remove the visual breadcrumb.

There are some apps in the Shopify App store that can create breadcrumbs even without the collection-aware code, but I can't speak to them.

With recent search result changes in Google, the benefits of breadcrumb structured data are diminished. Google's algorithm is able to figure things out and visually those automatic results look nearly identical to actual Breadcrumbs.

So it's entirely up to you if you want to enable the breadcrumb structured data for products, either way you likely won't see a significant impact to your traffic from this change alone.

In other words, you can't have your cake and eat it too.

You'll need to decide if the collection-aware URL is worth removing.

Remove the collection from the product URL

Frustrating as it is, we can remove the collections and collection name from the URL. This would be to ensure that Google only uses the product URL when indexing the page.

Fortunately for you, we're deleting a small bit of code but you'll want to take some precautions here. Anytime you edit the code, if you update your theme, your code edits are overridden. Additionally, you're mucking with how Google sees your pages, so make sure you're absolutely confident that this is what you want to do. Though you can undo your edits, the SEO impact of going back and forth may be challenging for you to endure.

Step 1: Back up your theme!

First, you’ll want to take a backup copy of your theme. Just in case.

Step 2: Find the code to remove

For this example, I'm using an old version of Turbo (6.2) by Out of the Sandbox.

In the Shopify admin, go to Online Store -> Themes -> select the ... -> Edit Code. Search your theme files for within: collection.

This part can be a bit tricky to locate because Shopify doesn't have a theme-wide search. So you have to go file by file. For this version of Turbo, the code I need to edit is in the snippets/product-details.liquid file and the snippets/product-thumbnail.liquid file.

Since each theme is different you may need to find the file for the product-grid or product-loop. If you still aren't sure where this code is, you can search through each snippet file. There are Chrome extensions to search through your Shopify theme files, but I avoid using Chrome which is a story for another day.

Once you've found the within: collection we want to remove only that part.

We'll end up with something like this:

Before:

{{ product.url | within: collection }}

After:

{{ product.url }}

You may need to search a few times for that line of code to make sure the | within: collection is removed for multiple spots. Many themes have the same piece of code duplicated.

Save the files you've edited and check on your results.

Step 3: Test the pages

Anytime you edit the theme files, you'll want to check right away to make sure you didn't break anything.

Shopify caches pages LIKE CRAZY so it may take a few minutes for your changes to reflect on the live site.

To test your changes, select a collection and navigate to a random product. In your URL bar, it should not have the collection or collection name.

Step 4: Create redirects

Assuming your site is live and you've already had your collection base product URLs indexed, don't forget to create URL redirects. Forgetting to do this important piece will cause potential customers to land on an error page.