Theme
💎 Built for Sidekick
✍️ Sidekick drafts it — you apply it
shopify
sidekick
theme
navigation
seo
Breadcrumb Navigation with Schema Markup
Add breadcrumb navigation with BreadcrumbList JSON-LD schema across product, collection, blog, and page templates.
Sidekick writes it — you put it live
Sidekick produces the content or code for this, but doesn't apply it to your store itself. You'll paste or publish the result yourself — the prompt tells Sidekick to explain exactly where it goes.
📋 Prompt
Generate the Liquid, CSS, and JSON-LD for a breadcrumb navigation snippet that I can paste into my theme — a hierarchical path trail displayed 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. Finally, tell me exactly which file(s) to create or edit (likely a snippet included via each template, or a section) and how to add it via the Shopify theme editor or code editor.
How to Use
- 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