Shopify apps on a Webflow site

Your store keeps its Shopify apps when the storefront moves to Webflow. Apps that work in the Shopify admin or at checkout need nothing on the site. Apps that show something on the storefront need their code on the site, and many of them were written for Shopify themes. This page says which kinds of apps work and how to add their code.

Which apps work

It depends on where the app works:

Review apps have their own page: Product reviews. So does Shopify’s chat: Shopify Inbox chat. EU withdrawal apps draw their button inside a theme, so on a Webflow site their form goes on a page hosted by Shopify: see EU right of withdrawal.

Apps that turn on as App embeds

Some apps have no code to copy: you turn them on in your Shopify theme, as an App embed, and Shopify adds their code to the theme’s pages. On a Webflow site, the Smootify dashboard takes that code from your store:

1. In Shopify, open Online Store › Themes › Customize, then App embeds, and turn on the app.
2. In the Smootify dashboard, open your project’s App embeds. Click Read from the store, which works when the live theme is Smootify’s Redirect theme, version 1.1 or later; or save a page of your Shopify online store from the browser as an HTML file and drag it in, with any theme.
3. Paste the code the dashboard gives you in Webflow, where it says, as it is.

The Integrations page tags the apps that work this way. Shopify Inbox has its own page.

How theme apps work on Webflow

An app written for Shopify themes reads and changes the cart through the theme’s addresses, such as /cart.js and /cart/add.js. A Webflow site has no theme, so Smootify answers these calls on the page, with the answers Shopify would give. A product the app adds goes into the same cart as the rest of the site, and the cart on the page updates.

Most of these calls are answered, two are not:

The full list, for developers: Shopify AJAX API.

1. Get the app’s code

Take the code from the app’s guide for headless stores or other sites, or ask the app’s support. Code copied from a Shopify theme can hold Liquid, such as {{ product.id }}, which Webflow does not run: ask the app for code without it.

2. Paste it with type="smootify-load"

Smootify loads after the page’s own scripts. An app script that runs first calls /cart.js before Smootify can answer, and fails. To make it wait:

1. Paste the code where the app says: Site settings › Custom code for every page, the page settings for one page, or a Code Embed where the widget shows.
2. In every <script> tag of the code, set type="smootify-load". A script that already has type="module" gets type="smootify-load" and data-type="module".
3. Leave everything else as it is: the src, the other attributes, and the HTML parts of the code.

<script type="smootify-load" src="https://apps.example.com/widget.js" data-shop="your-store.myshopify.com"></script>

Smootify runs these scripts once it has loaded. A smootify-load script added after the page has loaded, for example by a tag manager, never runs: a developer can use the other ways in Run your scripts with Smootify.

3. Test it

Publish to your .webflow.io address and try the app: add a product through it, then open the cart. Turn on Smootify’s debugger with Alt+⇧ Shift+D (⌥ Option+⇧ Shift+D on a Mac): its panel names the app proxy pages the app asked for, which the site cannot serve. See The debugger.

Before you publish

Coming from 1.x

Calls to app proxy pages (/apps/…) no longer go through Smootify. They already failed in 1.x, and the debugger now names them.