Breadcrumb Navigation with Schema Markup

What This Sidekick Query Does

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

Tips to Improve Results