The debugger

Smootify's debugger on your .webflow.io address - how to turn it on, what its panel shows, what the status of each element means and what its checks point out.

v2.0 beta

Open .md

On this page

1. Turn it on
2. The panel
3. Elements: what each element is doing
4. Checks: what it points out
On the page
Where people get stuck

Smootify 2.0 has a debugger for your .webflow.io address. It lists the Smootify elements on the page and what each one is doing, and it checks the page for markup and settings that 2.0 does not read. Use it while you build, before you publish, and when you move a site from 1.x.

Note

The debugger exists on your .webflow.io address only. Visitors of your custom domain never download it, and it does not load in the in-app browsers of Instagram, Facebook and TikTok on iPhone.

1. Turn it on

Publish the site and open a page on its .webflow.io address.
Press Alt⇧ ShiftD (⌥ Option⇧ ShiftD on a Mac). On a phone, add ?smootify-debug to the end of the address instead.
A button marked Info appears at the bottom right of the page, with the debugger’s panel open. The button opens and closes the panel.

The browser remembers the choice: the button shows on every page of the site until you press Alt⇧ ShiftD again, or open a page with ?smootify-debug=off. It is saved in your browser only. Other people see the debugger only if they turn it on in theirs.

2. The panel

The panel has six tabs:

Elements

Every Smootify element on the page and what it is doing.

Checks

The problems found in the markup and the settings.

Config

The license (store, plan, add-ons, domains, end of the trial) and the options Smootify read.

State

The cart, the customer, the market and the money format, live.

Flow

A timeline of the requests to Shopify, the events and the changes, as they happen.

Performance

When the main content appeared (LCP), Smootify's loading steps, its files and their times.

It opens on State. For your markup, use Elements and Checks.

Rows that point to an element on the page are clickable. Hover a row to draw an orange box around the element, and click it to scroll the page to the element.

3. Elements: what each element is doing

Each row shows the element’s tag, what it shows (the product title and the variant, or its data-id), and its status, sometimes with more lines under it:

loaded: it has received its data from Shopify and shown it.

loading: it is still waiting for its data.

ready: it has no data to wait for, and it runs.

not found: Shopify did not return its product. The product is not published to the sales channel of your Headless storefront, or not sold in the visitor's market. See Set up the Shopify store.

not running: its code never started. Usually the add-on it belongs to is not included in the plan or not turned on in the Smootify dashboard. See Connect the Webflow project.

Under the status, a row can also show:

not visible on the page now: the element or a parent is hidden, for example in a closed Dropdown or by a combo class.

unknown: an attribute value inside the element that Smootify does not read, such as product="titel". Check the spelling against the Reference.

The element's state classes, such as is-available or loaded, and the attributes it recognized inside it.

“No Smootify element on this page” means Smootify found none of its elements on the page.

4. Checks: what it points out

Each check has a level: error (something does not work), warn (it probably does not work as you expect) or info (it works, but there is a better way). When nothing is found, the tab says “no problem found in the markup”.

Markup

a smootify-product without data-id, or with a data-id that is not a product id or one of the known sources;
attribute values that Smootify does not read, inside each element;
a skeleton value other than text, image, block, button or hide;
variation attributes, which 2.0 no longer reads, with how many are left;
product="images" and product="media", deprecated: product="gallery" replaces them.

Settings

account elements on the page without newCustomerAccountsPublicKey in the options: see Customer accounts;
the deprecated options showOnlyActiveImages and activeImagesMode, and the deprecated 1.x hooks for developers;
CSS in the page that still uses the 1.x cookie banner class is-shopify-cookie-banner-visible;
when the trial of the licence ends in less than 14 days, or has ended.

Analytics and apps

an analytics id that does not look like an id of that service;
a Meta, Google or TikTok pixel that the page loads by itself, before any consent: remove it and let Smootify load it;
analytics ids set on a page without smootify-consent, so visitors of regions that require consent are never tracked: see Analytics and pixels;
requests to Shopify app paths (/apps/…), which a Webflow site cannot answer: see Shopify apps on a Webflow site.

The checks run on the page you are on. Open each template page (product, collection, cart, search, account) to check them all.

On the page

On .webflow.io, a variant card (smootify-variant) whose product Shopify does not return shows a notice over the card, with a link to the product in your Shopify admin. On the custom domain the card is removed.

Where people get stuck

Check these first

The button does not appear. It stays off until you press Alt⇧ ShiftD, and it exists on .webflow.io only: not on your custom domain, and not in in-app browsers.
The shortcut does nothing on a phone. Add ?smootify-debug to the address.
An element says “not running”. Its add-on is not in the plan or not turned on in the Smootify dashboard. Magic Box must be turned on also on .webflow.io.
An element says “not found”. The product is not published to the Headless channel, or not sold in the market.
Analytics ids are set, but Europe shows no visits. The page has no smootify-consent, so those visitors can never give consent. Add the banner in a component present on every page.