Hub/Theme/Breadcrumb Navigation with Schema Markup
Task IntentTheme

Breadcrumb Navigation with Schema Markup

Free Shopify Sidekick prompts & skills for merchants

What This Sidekick Query Does

Free Shopify Sidekick prompts & skills for merchants

Prompts

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

Build a breadcrumb navigation section for my Shopify theme that displays a hierarchical path trail on product, collection, page, blog, and article templates. The breadcrumb should start with a Home link pointing to the root URL, followed by intermediate links determined by the current template context: for products, show Home then the product vendor or first collection then the product title; for collections, show Home then the collection title; for articles, show Home then the blog title then the article title; for pages, show Home then the page title. Use a configurable separator character [SEPARATOR] such as a forward slash or chevron between each breadcrumb item. The last item in the trail should be plain text, not a link. Include JSON-LD structured data output using the BreadcrumbList schema type with proper itemListElement entries so search engines can display breadcrumbs in results. Add section settings for text color [TEXT_COLOR], link color [LINK_COLOR], link hover color [HOVER_COLOR], font size [FONT_SIZE], separator color [SEPARATOR_COLOR], vertical padding [VERTICAL_PADDING] pixels, horizontal alignment [ALIGNMENT] (left, center, or right), and background color [BG_COLOR]. Include a toggle to show or hide the breadcrumb on mobile below [MOBILE_BREAKPOINT] pixels. Wrap the breadcrumb in a nav element with aria-label set to Breadcrumb. Provide the complete Liquid section file with schema and CSS.

Expected Output

Free Shopify Sidekick prompts & skills for merchants

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