How to implement breadcrumbs with Yoast SEO for Shopify

Depending on the theme you are using, there are two ways to add Yoast SEO breadcrumbs in Shopify. For older themes, you will need to edit your theme code manually. You’ll need to do that for all the content types where you want to see breadcrumbs appear. In newer themes, on the other hand, you won’t need to use any code. All you’ll need to do is add the Yoast SEO breadcrumbs to a template via the customizer. However, you will also need to repeat that for all the templates where you want to have breadcrumbs. Below, we explain the two ways you can implement breadcrumbs with Yoast SEO for Shopify.

Adding Yoast SEO breadcrumbs to templates via the customizer

If you have a newer Shopify theme, you can easily add breadcrumbs to your templates without touching any code. To do that, follow these steps.

  1. In your Shopify admin, go to Online store and then Themes.

  2. Click the green Customize button (top right corner in the image above).

    The themes customizer will open.

  3. Select the template you want to edit by using the dropdown menu at the center of the screen.

    In this case, we’ll add breadcrumbs to the Default collections template.

  4. Click the Add Section button located in the menu on the left to expand it. Then, click Show more to find the Yoast SEO breadcrumbs menu item.

  5. Click on the Yoast SEO breadcrumbs to add them to the template.

    You will be able to see how the breadcrumbs appear in the preview screen on the right side. Note, the breadcrumbs may be added to the bottom of your page. To move them to the top of the page, grab the Yoast SEO Breadcrumbs item and drop it to the desired location in the menu. In this case, we dropped it above the Collection banner item. (see image below).

  6. Repeat these steps for all the templates you want to add breadcrumbs to.

Manually adding Yoast SEO breadcrumbs to a Shopify theme

To add breadcrumbs to an old theme in Shopify, you’ll need to edit the code of your theme. You will need to do that for each content type separately. In this example, we’ll add the breadcrumbs code to blog posts. Follow the steps below to learn how.

  1. In your Shopify admin, go to Online store and then Themes.
    The Themes screen will open.
  2. Click the Actions button and then select Edit code.
    The theme’s code editor will open.
  3. To add breadcrumbs to your blog posts, open the article.liquid template (outlined in the image below).
    Click on the article.liquid template to access the code. The code will appear on the right side.
  4. Add the code to the template.
    You will need to add the following code snippet: {% section 'yoast-seo-breadcrumbs' %} (see like 15 in the image below) under <article> (line 14 in the image below).
    Note: In this example we use the debut theme which has its own unique code. Depending on the theme you are using, you may see something different. Therefore, where you add the code to your theme will differ. If you are not sure where to add the code, contact a developer.
  5. Click Save and check if the changes were implemented.
    The breadcrumbs should be visible on your blog post page (see example below). Note that, the way the breadcrumbs appear can also be tweaked by editing the theme’s code. If you are not sure how to do that, contact a developer.

Have some questions?

Don’t hesitate to contact our support team!

Related articles

Get free SEO tips!