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.

Prompt / Skill

Run on 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

1
Copy the prompt above
2
Open Shopify Sidekick in your Shopify admin
3
Paste the prompt and replace the bracketed placeholders with your details
4
Review Sidekick's response and apply the suggestions

Sidekick Skills & Magic Prompt

Create & manage AI skills for Sidekick. Discover skills from other merchants.