How to Add Breadcrumbs in a Shopify Store Using window.referrer

Introduction

Breadcrumb navigation is an essential part of any well-structured website, including Shopify stores. It provides users with an easy way to trace their steps back through the site and understand their position within the site’s structure. This guide will walk you through how to add Shopify breadcrumbs dynamically using the window.referrer function in JavaScript, without including the collection name in the product page URL. This method improves user-friendly navigation and enhances Shopify UX by providing a clear, intuitive navigation path.

Why Use window.referrer for Breadcrumbs?

The window.referrer function provides the URL of the page the user was on before visiting the current page. By using this referrer data, you can dynamically display breadcrumbs that reflect a user’s previous navigation path. This is especially helpful on Shopify product pages, where users often land after browsing a collection or conducting a search.

By adding breadcrumbs for SEO and improving your Shopify store structure, you not only enhance the user experience but also make your store more search engine friendly. Breadcrumb navigation helps search engines understand your site’s content and improves internal linking, contributing to better search rankings.

Step 1: Include JavaScript for Breadcrumb Logic

To dynamically generate breadcrumbs based on the user’s navigation path, you need to add some custom Shopify code customization using JavaScript. This script will detect the window.referrer, fetch collection details, and append the relevant breadcrumb links.

Code:

Key Variables:

• referrer: This contains the previous page’s URL
• $breadcrumbContainer: Targets the container where the link for the breadcrumb will be added.
• defaultCollectionHandle is the alternative when fetching the referrer data fails.

Functions:

• addBreadcrumbLink(title, url): Adds link element to breadcrumb container,
• fetchCollectionTitle(handle, referrerUrl): Fetches collection title by accessing handle from JSON endpoint and afterwards adds breadcrumb link

Logic:

• If a valid referrer is found (same domain), the script fetches the collection title.
• If no referrer is found, it defaults to the first collection associated with the product.

By using this Shopify Liquid code and window.referrer function, you can create breadcrumbs that adapt based on the user’s navigation, improving Shopify store structure and enhancing Shopify UX.

Step 2: Modify Breadcrumb HTML in Your Shopify Theme

Add the below line of HTML code where you would like the dynamically created breadcrumb link to occur in the breadcrumb file within your Shopify theme:

Code:

This placeholder allows the JavaScript to dynamically insert the breadcrumb link into the page when the page loads.

Ready to launch your Shopify store? We will create a standout site with our development and optimization to build a store that sells.

Contact us now and get your store up and running fast!

Step 3: Styling Your Breadcrumbs with CSS

To create a clean, visually appealing breadcrumb layout, apply the following CSS styles. These styles ensure that your breadcrumbs are properly aligned and visually separated, enhancing the user experience.

Code

These styles will give your breadcrumbs an inline appearance with subtle separators between each breadcrumb item. Adjust the styles to match your Shopify store’s design and branding.

Step 4: Output

Final Remarks

• Fallback Handling: The script automatically ensures that even if the referrer data is not there or if the collection fetch fails, the default collection is rendered.
• Customization: You can customize the defaultCollectionHandle and fallback titles based on how your store classifies products, ensuring the breadcrumbs align with your Shopify navigation hierarchy.
• Testing: Test this code thoroughly in a staging environment to ensure the breadcrumbs work correctly across different user journeys, especially on Shopify product pages.

By using Shopify breadcrumbs with window.referrer, you can improve Shopify UX and make your store’s navigation more intuitive and SEO-friendly. Breadcrumb navigation enhances the overall site structure, making it easier for both users and search engines to understand the content and flow of your Shopify store.

Conclusion

Adding breadcrumbs to your Shopify store is a simple but powerful way to improve user-friendly navigation, enhance the Shopify UX, and contribute to better SEO. By leveraging the window.referrer function, you can create dynamic breadcrumb links that reflect a user’s navigation journey, making it easier for them to trace their steps and navigate between pages.

This approach allows for more flexibility and a smoother shopping experience, ensuring that your Shopify product pages are not only user-friendly but also well-optimized for search engines. By customizing the code and styling to match your store’s specific needs, you can create a seamless and intuitive browsing experience for your customers.