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
Run in Sidekick
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

  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