Storefront — Layout

The frame for every storefront page, plus the search overlay the header's search icon opens. All are built from semantic tokens only, so they restyle across all 19 themes — pair them with the clay theme for the original Mercato look.

Preview

Install

bun x bosia@latest add block storefront/header
bun x bosia@latest add block storefront/footer
bun x bosia@latest add block storefront/search-overlay
bun x bosia@latest add block storefront/mega-menu

The header and search overlay depend on storefront/store. All pull @lucide/svelte for icons.

Usage

<script lang="ts">
	import Header from "$lib/blocks/storefront/header/block.svelte";
	import Footer from "$lib/blocks/storefront/footer/block.svelte";
	import SearchOverlay from "$lib/blocks/storefront/search-overlay/block.svelte";
	import { createCart } from "$lib/blocks/storefront/store/store.svelte.ts";

	const cart = createCart();
	let searchOpen = $state(false);
</script>

<Header
	{cart}
	nav={["New In", "Shop", "Collections", "Sale"]}
	onSearch={() => (searchOpen = true)}
/>
<!-- page sections -->
<Footer />
<SearchOverlay bind:open={searchOpen} />

Header accepts nav, announcements, an optional shared cart (wires the bag and saved counts and opens the cart drawer) and an onSearch callback for the search icon. Pass cartCount / favCount directly if you aren't using the store. The mega menu opens on hover over the second nav item.

search-overlay binds open, autocompletes over its products (name and category) with full keyboard navigation, shows popular chips while the query is empty, and fires onSelect(product) or onSubmit(query) for free-text searches.

The header ships a built-in hover mega menu; mega-menu is the standalone, configurable version for custom headers — pass sections ({ title, links }), a featured product for the spotlight column, and control visibility with open (defaults open so it renders standalone).

Source

src/lib/blocks/storefront/{header,footer,search-overlay,mega-menu}/block.svelte