Run a Storesynk storefront from a single script tag: no bundler, no framework.
Load one script, write the tags. Every tag registers itself when the script loads. This works in a hand-written .html file, a static-site generator, or any site builder that accepts custom HTML and a script tag.
Add the script tag
Section titled “Add the script tag”<script type="module" src="https://cdn.storesynk.io/elements/0.1/storesynk.js"></script>- It must be
type="module". Module scripts are deferred, so end of<body>is fine. - The
0.1path is a rolling channel that always serves the latest 0.1 release.
To freeze behaviour until you deliberately upgrade, pin an immutable version:
<script type="module" src="https://cdn.storesynk.io/elements/0.1.0-beta.8/storesynk.js"></script>See Go live for how channels relate to npm releases.
Wrap your storefront in a store
Section titled “Wrap your storefront in a store”<storesynk-store> is the root provider: credentials, API client, money formatting, and the cart for everything inside it. It needs your *.myshopify.com domain and your public Storefront API token, never an Admin token.
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>My Store</title> </head> <body> <storesynk-store domain="your-store.myshopify.com" token="your-public-storefront-token">
<storesynk-product handle="classic-snowboard" class="product"> <h1 class="product__title"><show-title></show-title></h1> <div class="product__prices"> <show-price></show-price> <show-compare-price></show-compare-price> </div> <show-media main class="product__media"><img alt="" /></show-media>
<change-option group="1" class="product__option"> <show-option-label></show-option-label> <option-value class="pill"><show-option-title></show-option-title></option-value> </change-option>
<change-quantity min="1" class="product__qty"> <decrease-quantity>−</decrease-quantity> <input-quantity></input-quantity> <increase-quantity>+</increase-quantity> </change-quantity>
<add-to-cart><button type="button">Add to cart</button></add-to-cart> </storesynk-product>
</storesynk-store>
<script type="module" src="https://cdn.storesynk.io/elements/0.1/storesynk.js"></script> </body></html>You own structure, classes, and CSS. Two rules: custom elements always need a closing tag (<show-title></show-title>, never <show-title/>), and there is exactly one <storesynk-store> per page.
No credentials yet? Connect your store.
Configure beyond attributes
Section titled “Configure beyond attributes”Site-wide settings can live in one inert JSON block, a direct child of <storesynk-store>:
<storesynk-store domain="your-store.myshopify.com" token="your-public-storefront-token"> <script type="application/json" data-storesynk-config> { "pixels": { "enabled": true, "client": ["meta", "ga"] }, "cart": { "openOnAdd": true, "closeOnOutside": true, "noteDebounce": 500 } } </script> <!-- …storefront… --></storesynk-store>- It is data, not code. There is no
window.storesynkConfigglobal on this path. - It carries the same config shape as the Astro and Next.js packages:
domain,token,country,language,persistLocale, the customer-account fields, and the nestedpixelsandcartgroups. - Precedence: tag attribute, then config block, then built-in default.
- A malformed block is silently ignored. If config-driven behaviour does nothing, check the JSON first.
Self-host the bundle
Section titled “Self-host the bundle”Install the package and copy the entire dist/ folder:
npm install @storesynk/elements@betacp -R node_modules/@storesynk/elements/dist/ public/storesynk/<script type="module" src="/storesynk/storesynk.js"></script>storesynk.js lazy-loads its sibling chunks relative to its own URL, so the files must stay together. Copying storesynk.js alone 404s the collection and analytics modules. The @beta tag is required while Storesynk is pre-1.0.
Optional modules load on tag presence
Section titled “Optional modules load on tag presence”collection.jsloads when a<storesynk-collection>appears on a page.pixels.jsloads when<storesynk-store>hastrack-events, orpixels.enabled: truein the config block.customer.jsloads when<storesynk-store>has acustomer-client-id.
Using a site builder
Section titled “Using a site builder”Paste the script tag once per page (or in the site-wide footer slot), then author the tags inside custom-HTML blocks. The engine never depends on class names, so the builder’s styling keeps working.
Gotchas
Section titled “Gotchas”- Injecting credentials from a script? Order matters. Set
domain/tokenon the element before the bundle script runs; put your credential script above it. A store that boots without credentials fetches nothing. - Blank page but the markup validates? Usually Shopify-side: a missing Storefront API scope, or products not published to the token’s sales channel. See Troubleshooting: setup.
- Misnested components render nothing, silently. A
show-priceoutside its<storesynk-product>stays empty with no console error. See nothing renders. - Keep HTML comments out of start tags. A comment between attributes becomes a bogus attribute.
- Framework, but no SSR? This script-tag path works inside React, Vue, or Svelte, as long as the framework does not re-render the DOM the engine mutates. For server-rendered data use Astro, Next.js, or React SSR.