# Shopify apps on a Webflow site

> Which Shopify apps work on a Webflow store, and how to add the code of an app written for Shopify themes so that it runs after Smootify.

Status: Ready (Smootify 2.0)  
1.x page: https://docs.smootify.io/docs/apps/blocks  
URL: https://www.smootify.io/docs/features/theme-apps  
Updated: 2026-10-10

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:

| The app | On a Webflow site | What to do |
|---|---|---|
| works in the Shopify admin or at checkout | works | nothing |
| has widgets for any website | works | paste its code as its guide for other sites says |
| was written for Shopify themes | may work | paste its code with `smootify-load` (step 2), then test |
| calls its own pages through the store (`/apps/…`) | does not work | ask the app for a version for other sites |

Review apps have their own page: [Product reviews](https://www.smootify.io/docs/features/reviews). So does Shopify’s chat: [Shopify Inbox chat](https://www.smootify.io/docs/features/shopify-inbox). 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](https://www.smootify.io/docs/features/eu-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](https://www.smootify.io/docs/start/domains), 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](https://www.smootify.io/integrations) page tags the apps that work this way. [Shopify Inbox](https://www.smootify.io/docs/features/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:

| Theme calls | Answered by Smootify on the page? |
|---|---|
| the cart, such as `/cart.js` and `/cart/add.js` | yes |
| products | yes |
| recommendations | yes |
| search suggestions | yes |
| the change of country or language | yes |
| shipping rate estimates before the checkout | no: on a Webflow site, shipping rates exist only at checkout |
| app proxy pages, on paths such as `/apps/…`, `/a/…`, `/community/…` or `/tools/…` | no: they reach the app's own server through Shopify's online store, which a Webflow site does not have |

The full list, for developers: [Shopify AJAX API](https://www.smootify.io/docs/developers/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.

```html
<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](https://www.smootify.io/docs/developers/scripts).

## 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](https://www.smootify.io/docs/start/debugger).

## Before you publish

> [!STUCK]
> - **The app's widget shows, but its cart buttons do nothing.** Its script runs before Smootify. Set `type="smootify-load"` on it.
> - **The debugger names paths such as `/apps/…`.** The app needs its app proxy, which a Webflow site cannot serve. Ask the app for its version for other sites.
> - **A module script stops working.** It lost its type. Keep it with `data-type="module"` next to `type="smootify-load"`.
> - **A shipping estimate shows an error.** Shipping rates exist only at checkout on a Webflow site.
> - **The app's code never runs.** A tag manager added it after the page loaded. `smootify-load` only works for scripts on the page when it loads.

## 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.