How To Add Breadcrumbs To Shopify theme?

Adding breadcrumbs can contribute to a better user experience and may ultimately help drive more conversions on your Shopify store.

In Shopify, adding breadcrumbs typically involves modifying your theme's code to include breadcrumb navigation elements. While this may require some technical expertise, many Shopify themes offer built-in support for breadcrumbs, making implementation easier.

In this post we will add a breadcrumbs snippet. This snippet allows you to show breadcrumbs on all pages (account, product page, collection page, search, search results, etc.).

Let's add the snippet into three simple steps.

How to Add Breadcrumbs in Shopify

Step 1: Preview the Breadcrumbs

Before implementing breadcrumbs, it’s helpful to see how they will look on your site. In the Dawn theme, breadcrumbs appear at the top of product and collection pages, showing the path from the homepage to the current page. For example, if you are on a product page, the breadcrumbs might display as:

• Home > Collection > Product

Step 2: Access Your Shopify Admin Panel

To begin adding breadcrumbs, log into your Shopify admin panel. Navigate to the Online Store section and select the theme you wish to edit.

Step 3: Download the code

You can find a bunch of ready to use Shopify snippets. I'll use the SS&T breadcrumbs snippet. Once you purchase it, you will have a link to the document with the source code.

Shopify Breadcrumbs Snippet

This snippet allows you to show breadcrumbs on all kind of pages in Shopify, except homepage and 404 page (not found page).

Shop

Step 4: Create a New Snippet

1. In the theme editor, locate the Snippets folder.
2. Click on Add a new snippet and name it breadcrumbs.
3. Paste the Liquid code for breadcrumbs that you have copied from the step 3.

Step 5: Add CSS for Styling

To ensure your breadcrumbs look good, you will need to add some CSS:

1. Create a new CSS file named breadcrumbs.css in the Assets folder.
2. Copy and paste the necessary CSS styles into this new file.

Step 5: Update the Main Theme File

1. Open the main theme file, typically named theme.liquid.
2. Search for the main content section, often labeled as main or content.
3. Insert a <div> with a class of page-wrapper to prevent content from sticking to the edges of the page (only if you are using an official Shopify theme).
4. Include the breadcrumbs snippet you created earlier in this section.

Step 6: Add Translations

To ensure that your breadcrumbs display correctly in different languages, you will need to add translations:

1. Locate the locales folder and open the default.json file.
2. Add the necessary translation keys for breadcrumbs, such as "breadcrumbs": { "home": "Home", "collections": "Collections" }.
3. Save your changes and refresh your site to see the updates.

Step 7: Customize your theme

Theme editor

Conclusion

Adding breadcrumbs to your Shopify store is a straightforward process that can greatly enhance user navigation and experience. By following the steps outlined above, you can implement this feature effectively, making it easier for your customers to explore your products and collections.

With improved navigation, you can expect a more satisfying shopping experience for your users, potentially leading to increased sales and customer loyalty.