This page exists in one language only. Some pages here are English, some Swedish.
Installing Stockisto on Shopify
There are two ways to put the widget on a Shopify Online Store 2.0 theme. Pick one.
- Custom Liquid section. Paste your embed snippet into Shopify's own Custom Liquid section. Nothing to install, no app review.
- The Stockisto Widget app block. A theme app extension with a dropdown for every widget mode. It is a custom app, installed from a link your Stockisto contact sends you. It is not in the Shopify App Store.
Both render the same widget from the same CDN bundle.
Before you begin
- You have a Stockisto account and at least one retailer imported
- Your store uses an Online Store 2.0 theme (all current Shopify themes, for example Dawn)
- You can edit your theme in the Shopify admin
Path A: Custom Liquid section
Step 1: Copy your embed snippet
In your Supplier Admin, open Install → Install on Shopify, choose a placement and copy the snippet. The Store page / footer placement gives you a full store finder:
The id below is an example. Use the saved embed id your admin supplies.
<script
src="https://cdn.test.stockisto.com/widget.js"
data-api-base="https://api.test.stockisto.com"
data-embed="we_0123456789abcdef0123456789abcdef"
async></script>
Keep the generated embed id
Leave data-embed and data-api-base as generated. The id identifies your
saved widget; its settings are read on the next page load.
Step 2: Open your theme editor
- In your Shopify admin, go to Online Store → Themes
- On your live theme, click Customize
Step 3: Add a Custom Liquid section
- Open the page or template where the locator should appear. A regular page or your footer works well for a store finder.
- Click Add section
- Select Custom Liquid
- Paste your snippet into the Custom Liquid box
Step 4: Save
Click Save. The locator appears where you added the section.
Product-page placement (Shopify fills in the SKU)
To show a "where to buy" card on every product page, choose the Product page placement in the dashboard. Add the Custom Liquid block to your Products template and paste the product snippet:
<script
src="https://cdn.test.stockisto.com/widget.js"
data-api-base="https://api.test.stockisto.com"
data-embed="we_0123456789abcdef0123456789abcdef"
data-sku="{{ product.selected_or_first_available_variant.sku }}"
async></script>
Keep the Liquid exactly as written
Shopify replaces {{ product.selected_or_first_available_variant.sku }}
with the current product's SKU when the page renders. This only happens in a
Custom Liquid block on the product template. Do not edit the braces.
Other widgets
The Shopify panel offers the store finder and the product card. For any other widget (installer finder, store card, stock alert and the rest), generate the snippet under Install → Advanced and paste it into a Custom Liquid section the same way. The Integrations & embed guide lists all eight.
Path B: the Stockisto Widget app block
- Ask your Stockisto contact for the install link and open it while signed in to your store
- In the theme editor, click Add block → Apps → Stockisto Widget
- Fill in the block settings and click Save
| Setting | What it sets |
|---|---|
| Embed id (new installs) | The saved we_... id copied from your admin |
| Brand slug | Your public brand slug |
| Widget type | One of the eight widgets; Where to buy is the default |
| Where to buy view | Full list, inline panel, button, pill or corner launcher |
| SKU source | Auto reads the current variant's SKU on a product template; Manual takes a code you type |
| Manual SKU list | Up to six codes that narrow the map widget's search |
| Store id, Retailer slug, Installer id | The keys the store, retailer and installer widgets need |
| Theme, radius, density, shadow, font | The same styling options as the snippet |
A widget that lacks a required input renders nothing rather than an empty frame. Store availability needs the retailer slug and a SKU, store card needs a store id, back-in-stock alert needs a store id and a SKU, and installer card needs an installer id.
Copy the saved embed id from your admin's Install panel. Keep data-api-base as generated.
The we_... id identifies the saved widget; changes in the admin reach the snippet on its next load.
New snippets need no slot div. Page keys such as data-sku still come from the current product.
Snippets installed today keep working
Existing snippets with data-stockisto-slug, type and view remain supported. Omitted settings use
the owner's default embed, with the existing attribute behaviour as fallback when that lookup fails.
<script
src="https://cdn.test.stockisto.com/widget.js"
data-api-base="https://api.test.stockisto.com"
data-stockisto-slug="YOUR-BRAND-SLUG"
data-widget-type="where-to-buy"
async></script>
Allow https://api.test.stockisto.com in connect-src and https://cdn.test.stockisto.com in script-src on TEST.
For production use the generated https://api.stockisto.com and https://cdn.stockisto.com origins.
A blocked API connection shows a load-failed state for a named embed; it cannot use cached results.
Allow your store domain
In Install → Embed script → Allowed origins, add your Shopify domains, one per line: your
your-store.myshopify.com domain and your custom domain if you have one.
https://your-store.myshopify.com
https://www.yourbrand.com
The widget loads without this list. Analytics events and lead attribution are only credited to your account from a listed origin, and Install Health reports the domains it hears from.
Confirming the install
Open a page where you added the widget. The locator should render. Then return to Install in Supplier Admin: the Install Health panel shows Script detected once your store reports in, and lists each widget's last render outcome.
Do not judge the render in the theme-editor preview
The theme editor's preview sandboxes scripts, so the widget may not paint there. Check a real storefront page instead.
Troubleshooting
| Problem | Likely cause | Fix |
|---|---|---|
| No Custom Liquid section | Vintage (pre-OS 2.0) theme | Update to a current theme, or use the app block |
| Widget not visible | Embed resolve failed | Keep the generated embed id and allow the API origin in connect-src |
| Nothing renders in the preview | Theme-editor sandbox | Open the storefront page itself |
| Product card shows the wrong stock | SKU Liquid edited | Keep {{ product.selected_or_first_available_variant.sku }} exactly as generated |
| "Loads, but refused" | Locator set to Private, or plan gate | Set the locator to Public, or check the widget type against your plan |
| Events missing in Install Health | Store domain not on Allowed origins | Add your myshopify.com and custom domains |
| CSP error in the console | Content-Security-Policy blocks the script | Allow https://cdn.test.stockisto.com in script-src (rare on default Shopify) |
FAQ
Do I need to install a Shopify app?
No. The Custom Liquid path needs nothing installed. The app block is a convenience for merchants who prefer theme-editor fields to a pasted snippet.
Does it slow down my store?
The script loads with async. It resolves the saved widget immediately and fetches store data when it scrolls into view.
Can I show it on every product?
Yes. Add the product snippet or the app block once to your Products template. Shopify fills in each product's SKU.