The Store Modal component is a self-contained shopping experience containing a directory of fonts to browse, and integrates the cart and checkout.
Ensure this component is present on every page, by putting it in your site’s layout template.
<fontdue-store-modal></fontdue-store-modal>
import StoreModal from "fontdue-js/StoreModal";
// In your layout component
<StoreModal />
No other properties. Just add the element to your page, right before your Fontdue.js snippet.
The Store Modal takes no data props – it’s always lazy, loading the catalog and cart in the browser per visitor, so there’s nothing to preload. Import it and add it to your layout once; theme and behavior come from the provider’s config.
Linking to the store
The modal has no address of its own – it opens over whatever page the visitor is already on. To link to it, add a store parameter to any URL on your site that loads the Store Modal, and the modal opens as the page does.
| Parameter | Opens |
|---|---|
?store=open |
The store, wherever it normally opens |
?store=product/{slug} |
A collection’s product page |
?store=cart |
The cart |
So https://yourfoundry.com/?store=open opens the store over your homepage, and https://yourfoundry.com/about?store=open opens it over your about page.
A product takes either the collection’s slug or its ID, so ?store=product/example-sans and ?store=product/Rm9udENvbGxlY3Rpb246MTIzNDU2Nzg5MA== open the same page. The slug is the one to hand someone; the ID is on the Widget codes tab of the collection in the admin, and is what the Buy Button attributes take. A slug that matches nothing – or that names an article or a designer rather than a collection – opens the modal on Collection not found.
?store=open deliberately doesn’t name a route – it opens the modal wherever it would have opened anyway, so a store that skips the browse page with hideAllCollections opens on the cart rather than a directory its visitors were never meant to see.11Any other store value is ignored, so a store parameter your own site already uses won’t open the modal.
Parameters are read once, when the Store Modal first loads. Changing the query string later – a client-side route change in a single-page app, say – won’t reopen the modal; to open it from something already on the page, use the fontdue-click attributes or a Cart Button.