Sleek
Try Sleek freeResourcesOther solutions
  • What is Sleek theme
  • Changelog
  • Refund policy
  • Support policy
  • Getting started
    • Install Sleek theme
    • Set up my store as Sleek demo
    • Update Sleek theme
    • Theme license & Transfer
  • BUILD FOR SUCCESS SERIES
    • Homepage for Health & Beauty 🔥
  • Page's global sections
    • General settings
    • Announcement bar
    • Cart drawer
    • Header
      • Mega menu
      • Use Country/ Region selector
      • Use Language selector
    • Footer
    • Mobile navigation bar
    • Pop-up
    • Quick view
  • Theme sections
    • Before/ After image slider
    • Blog post
    • Card images
    • Collage tabs
    • Collapsible tabs
    • Collection image showcase
    • Collection list
    • Collections showcase
    • Collections slider
    • Contact form
    • Countdown timer
    • Custom content
    • Custom liquid
    • Email signup
    • Favorite products
    • Feature list
    • Featured product
    • Featured collection
    • Featured products tab
    • Highlight text with image
    • Image gallery
    • Image with text
    • Image with text columns
    • Image with text overlay
    • Layered images with text
    • Lookbook banner
    • Lookbook cards
    • Lookbook slider
    • Media with collection
    • Multicolumn
    • Press
    • Products bundle
    • Product tabs
    • Product showcase
    • Recently viewed products
    • Rich text
    • Scrolling promotion
    • Slideshow
    • Store locator
    • Testimonials
    • Video
    • Video hero
    • Video with text
  • Theme settings
    • General 🔥
    • Animations
    • Buttons
    • Custom CSS
    • Blog cards
    • Cart
    • Collection cards
    • Color swatches
    • Colors
    • Currency format
    • Layout
    • Logo
    • Product cards
    • Search behavior
    • Social media
    • Typography
  • Collections & Products
    • Product page
      • Product template
      • Page sections
        • Breadcrumbs
        • Product information
        • Related products
        • Sticky add to cart bar 🔥
    • Collection page
      • Collection template
      • Collection sections
        • Collection banner
        • Product grid
    • Collections list page
  • Other pages
    • 404 page
    • Blogs
    • Blog posts
    • Cart
    • Password
    • Search page
  • FAQs
    • Generic
      • Add gift wrap option to my cart
      • Combined listings app
      • How to add custom fonts in Sleek? 🔥
      • JavaScript events for developers
    • Product
      • Set up quantity rules and volume pricing 🔥
      • Add custom badges using product tags
      • Set up Local Pickup option
      • Show dynamic content for Products using Metafields 🔥
Powered by GitBook
On this page
  • How to configure the Breadcrumbs
  • How to creat custom breadcrumbs for individual products
  1. Collections & Products
  2. Product page
  3. Page sections

Breadcrumbs

A secondary navigation scheme to identify visitors' location

PreviousPage sectionsNextProduct information

Last updated 11 months ago

Breadcrumb is a type of secondary navigation scheme that reveals the customers’ location on the website.

Breadcrumbs can improve how a user and Google navigate a website, especially if your website has many products or pages.

Furthermore, breadcrumbs have been proven to decrease bounce rates, keeping users on a website longer.

Lastly, the best benefit of breadcrumbs is SEO-boosting. Google bots use breadcrumbs to categorize and contextualize content in search results more efficiently.

How to configure the Breadcrumbs

Steps

  1. In the theme editor (Customize), open the template selector

  2. Select the product template you want to add breadcrumbs to.

  3. Locate the Breadcrumbs section.

  • Text alignment: Set how the breadcrumbs are aligned: Left/Center/Right.

  • Remove, hide, or reorder the section if you want

By default, breadcrumbs display the name of the collection that comes first in alphabetical order (if that product is included in multiple collections).

How to creat custom breadcrumbs for individual products

In Sleek, you can set a custom product breadcrumbs for each of your products using metafields.

Steps:

1. Define a Product Metafield in Shopify admin > Settings > Custom data.

  • Click the button Add definition to create a new product definition.

  • Use any Name you want, and insert the Namespace and key as 'breadcrumb.primary_collection'.

  • Select the metafield type as Collection.

  • Click Save.

2. In the Product setup, select a collection from a list to display a custom product breadcrumb.

  • From Shopify admin > Products, select a product you want to add custom breadcrumbs.

  • In the Metafields section, select a collection from your collection list.

  • Click Save.

3. Enable the breadcrumbs on your theme editor.

Make sure the Breadcrumbs section is added to your product template and the dynamic data source is linked.

An example of breadcrumbs in Zest theme