Creating Breadcrumbs Metafield for Product Pages

Introduction

Breadcrumbs are essential for improving the navigation and SEO of your eCommerce site. In this tutorial, we’ll cover how to use metafields to create breadcrumbs for your product pages on Shopify and WooCommerce.

Shopify: Using Metafields for Breadcrumbs

1. Using product metafields for breadcrumbs in Shopify involves a few steps. Breadcrumbs are navigational aids that help users understand their location within your store and can also improve SEO. Here’s a step-by-step guide:
   

   Step 1: Define Metafields

   1. Log in to your Shopify Admin:
      • Go to your Shopify store’s admin panel.
   2. Go to Metafields:
      • Navigate to Settings -> Custom data -> Metafields.
   3. Create a New Metafield Definition:
      • Click Add definition.
      • Choose Products as the content type.
      • Name the metafield something like breadcrumb_path or breadcrumbs.
      • Choose the type of metafield, typically a Text field or a Single line text if you only need simple breadcrumbs.

   Step 2: Populate Metafields for Products

   1. Access Product Metafields:
      • Go to Products in the Shopify admin.
      • Select a product for which you want to add breadcrumbs.
   2. Add Metafield Data:
      • Scroll down to the Metafields section.
      • Find the metafield you created (e.g., breadcrumb_path).
      • Enter the breadcrumb data, which could be a string like Home > Category > Subcategory > Product.

   Step 3: Edit Your Theme to Display Breadcrumbs

   1. Access Your Theme Code:
      • Go to Online Store -> Themes.
      • Click Actions -> Edit code for the theme you are using.
   2. Locate the Product Template:
      • Find the product template file, typically product.liquid or main-product.liquid within the Templates or Sections folder.
   3. Add Breadcrumbs Code:
      • Insert the following code where you want the breadcrumbs to appear:

        {% if product.metafields.custom.breadcrumb_path %}
          <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
              {% assign breadcrumbs = product.metafields.custom.breadcrumb_path | split: '>' %}
              {% for crumb in breadcrumbs %}
                <li class="breadcrumb-item">{{ crumb | strip }}</li>
              {% endfor %}
            </ol>
          </nav>
        {% endif %}
        

        Adjust the HTML structure and CSS classes as needed to fit your theme’s styling.

   Step 4: Style Your Breadcrumbs

   1. Add CSS:
      • Go to Assets and open your CSS file (e.g., theme.css or styles.css).
      • Add styles for your breadcrumb navigation to ensure it matches your site’s design.

        .breadcrumb {
          list-style: none;
          display: flex;
          gap: 0.5rem;
        }
        .breadcrumb-item {
          margin-right: 5px;
        }
        

   Step 5: Test Your Breadcrumbs

   1. Check on Frontend:
      • Go to a product page on your store.
      • Ensure the breadcrumbs are displaying correctly and navigating as expected.

   By following these steps, you can effectively use product metafields to manage and display breadcrumbs in your Shopify store, enhancing navigation and potentially improving SEO.

WooCommerce: Using Custom Fields for Breadcrumbs

1. Using product metafields for breadcrumbs in WooCommerce involves a few steps similar to Shopify. Here’s a detailed guide on how to do it:
   

   Step 1: Install a Metafield Plugin

   WooCommerce doesn’t support custom metafields out-of-the-box, so you’ll need a plugin. One popular choice is Advanced Custom Fields (ACF).

   1. Install ACF:
      • Go to Plugins -> Add New.
      • Search for Advanced Custom Fields.
      • Install and activate the plugin.

   Step 2: Create Custom Metafields

   1. Create a Field Group:
      • Go to Custom Fields -> Add New.
      • Name your field group something like Product Breadcrumbs.
   2. Add Fields:
      • Click Add Field.
      • Name the field Breadcrumb Path (or any name you prefer).
      • Choose Text as the field type.
      • Under Location, set the rules to Show this field group if Post Type is equal to Product.
   3. Publish the Field Group:
      • Click Publish.

   Step 3: Populate Metafields for Products

   1. Edit a Product:
      • Go to Products -> All Products.
      • Edit a product.
   2. Add Metafield Data:
      • Scroll down to the Product Breadcrumbs section you created.
      • Enter the breadcrumb path in the Breadcrumb Path field, such as Home > Category > Subcategory > Product.
   3. Update the Product:
      • Click Update.

   Step 4: Edit Your Theme to Display Breadcrumbs

   1. Access Theme Files:
      • Go to Appearance -> Theme Editor.
      • Find the single-product.php file or the appropriate template file where you want to display the breadcrumbs.
   2. Add Breadcrumbs Code:
      • Insert the following code where you want the breadcrumbs to appear:

        <?php
        // Check if the ACF plugin function exists
        if( function_exists('get_field') ) {
            // Get the breadcrumb path value
            $breadcrumb_path = get_field('breadcrumb_path');
            if( $breadcrumb_path ) {
                // Split the breadcrumb path into an array
                $breadcrumbs = explode('>', $breadcrumb_path);
                echo '<nav aria-label="breadcrumb"><ol class="breadcrumb">';
                foreach( $breadcrumbs as $crumb ) {
                    echo '<li class="breadcrumb-item">' . trim($crumb) . '</li>';
                }
                echo '</ol></nav>';
            }
        }
        ?>
        

        Adjust the HTML structure and CSS classes as needed to fit your theme’s styling.

   Step 5: Style Your Breadcrumbs

   1. Add CSS:
      • Go to Appearance -> Theme Editor.
      • Open your CSS file (e.g., style.css).
      • Add styles for your breadcrumb navigation:

        .breadcrumb {
          list-style: none;
          display: flex;
          gap: 0.5rem;
        }
        .breadcrumb-item {
          margin-right: 5px;
        }
        

   Step 6: Test Your Breadcrumbs

   1. Check on Frontend:
      • Go to a product page on your WooCommerce store.
      • Ensure the breadcrumbs are displaying correctly and navigating as expected.

   By following these steps, you can effectively use custom metafields to manage and display breadcrumbs in your WooCommerce store, enhancing navigation and potentially improving SEO.

Conclusion

By following these steps, you can effectively use metafields in Shopify and custom fields in WooCommerce to create breadcrumbs for your product pages, enhancing both user experience and SEO.