Customise Shopify's URL Structure
When it comes to choosing Shopify as your eCommerce platform it is often thought that it isn’t possible to update the URLs and site architecture. Which is why, generally speaking, Shopify websites follow one of two URL structures which we have outlined below:
domain.com/collections/example-collection/products/example-product
domain.com/products/example-product
While it is somewhat true that you can’t change a Shopify website’s URL structure as they always have to reference either /collections/ or /products/, you are able to pick which URL structure to use out of the two structures specified above.
When considering changing the URL structure that your Shopify website uses, you need to be aware of how this could impact your site's breadcrumbs for product pages. This is because Shopify relies on the URL to formulate the breadcrumbs (as in page.custom-name.liquid file), as it usually cross-references if the product page has a collection present within the URL. If it does, then the breadcrumbs will reference home, the collection and the product.
Whereas you will notice that if you implement this URL change by removing all traces of /collections/ from the product URLs, the product page breadcrumbs will automatically be updated. As a result, the breadcrumbs will go home and then to the product page.
Drawbacks to Using Collections in Product URLs
We usually find that product URLs that reference the collections (domain.com/collections/example-collection/products/example-product) are normally canonicalised back to the product URL variation without the collection (domain.com/products/example-product). This helps to reduce the likelihood of any duplicate content being created with both variations being live unknowingly.
However, it is common for Shopify’s internal linking to rely on the canonicalised variation which increases the possibility of search engines ignoring the canonical signal and instead choosing to index these pages. This isn’t ideal as it could result in keyword cannibalisation due to Google choosing between which variton to index.
Another drawback to using the URL structure that references both collections and products is that some products can fall within multiple categories, leading to multiple pages/URLs being created for these products in order to display them on the relevant collection pages. For very large eCommerce websites this can ultimately result in hundreds if not thousands of unnecessary pages from being created, making it increasingly difficult to manage products.
In addition to the potential risk of keyword cannibalisation occurring and product management becoming more time consuming, Shopify websites that structure their product URLs referencing the collection are less likely to have a good distribution of link equity across all indexable pages. This is because they are predominantly linking to product pages that are canonicalised within the collections.
Normally a site’s homepage has the highest link equity which then trickles down to the collections pages as they normally have navigational links pointing to them. Then, because the sites are linking to the canonicalised product pages, it means that the link equity is far less likely to be passed on to the indexable product page as sites that follow this URL structure typically don’t link to the product only URLs.
How To Remove Collections From Shopify Product URLs
It’s fairly quick and simple to update your Shopify website’s URL structure to remove all reference to the collection within the product URLs. To do this, simply follow these steps.
Once you have logged into the backend of your Shopify website, you will want to navigate to the online store in the left hand sidebar. Then select themes in the drop down below.
This will then state the theme version that is currently live and give you various options on the actions drop down. You’ll want to select ‘duplicate’ so that you can create a staging environment to create and test these changes without it causing any problems to the version users and search engines see.
After you have created the duplicate theme, scroll down to the theme library where you can access and name the duplicate version.
You’ll then want to select the actions drop down so that you can select edit code which will take you to a non-live theme editor.
After accessing the theme editor, you will want to navigate to the ‘snippets’ drop down on the left hand sidebar and select product-grid-item.liquid.
Once you’re in the product-grid-item.liquid file you will want to locate {{ product.url | within: collection }} in the code. This can be seen on line 51 in this example.
You will then need to update the specific line of code to remove ‘| within: collection’ so that it looks like the code below, making sure that both sets of the curly bracket remain.
Once you have done this, click ‘save’. Then preview your store and visit a product page so that you can confirm if the product URLs have been updated.. When this is successful, exit the test view code editor and publish and rename this variation by using the actions drop down.
This should now mean that all of your product URLs should no longer reference the collection. However, it does mean that any internal links you previously had on the site that followed that structure will need updating. This has the potential to be extremely time consuming, so we would recommend that you create and upload 301 redirects to Shopify so that search engines and users have a seamless experience (instead of encounting 404 errors).
Remember, we’re here if you have any questions or need some extra help getting this configured, just get in touch.