Task IntentTheme

Generate Breadcrumb Navigation

Build a breadcrumb navigation component with Schema.org markup, customizable separators, and automatic page hierarchy detection.

What This Sidekick Query Does

Build a breadcrumb navigation component with Schema.org markup, customizable separators, and automatic page hierarchy detection.

Prompts

Copy, adapt, and run this directly in Shopify Sidekick.

Run on Shopify Sidekick

Create a breadcrumb navigation block for my Shopify theme:

Features:

  Auto-detect page hierarchy (Home > Collection > Product)
  Schema.org BreadcrumbList markup for SEO
  Customizable separator icon (arrow, slash, chevron)
  Current page shown as non-linked text
  Truncate long breadcrumb titles on mobile


Settings:

  Separator style (arrow / slash / chevron / dot)
  Text color
  Font size
  Show on homepage toggle
  Background color (transparent option)


Requirements:

  Works on product, collection, blog, article, and custom pages
  Mobile responsive with horizontal scroll if needed
  Accessible ARIA navigation landmark
  Generate as a theme snippet included in theme.liquid

Expected Output

Build a breadcrumb navigation component with Schema.org markup, customizable separators, and automatic page hierarchy detection.

Tips to Improve Results

Copy the prompt above

Open Shopify Sidekick in your Shopify admin

Paste the prompt and replace the bracketed placeholders with your details

Review Sidekick's response and apply the suggestions