Install Dialog on Shopify

Go to your Shopify back office and search Dialog on the Shopify App Store. Install Dialog and follow the onboarding.

If anything blocks you, email paul-arthur@askdialog.com.

The Shopify app handles both concerns: it syncs your catalog automatically (data ingestion), and it provides the frontend embed for your theme. How the frontend embed works depends on your theme:

Online Store 2.0 theme → use the app block in the theme customizer.
Legacy theme (< Online Store 2.0) → paste Dialog’s instant.liquid snippet plus the JS / CSS files into your theme manually.
Headless Shopify (Hydrogen or a custom storefront) → install the app for catalog sync, then embed the assistant on your frontend via the SDK or React / Vue components. The app block isn’t usable outside the Online Store renderer.

Theme compatible with Online Store 2.0

This is the easy path. Add the Dialog app block to your product page through the Shopify theme customizer. Follow the in-app onboarding after installing the app — it walks you through it.

English walkthrough
French walkthrough

Theme not compatible with Online Store 2.0

If your theme isn’t Online Store 2.0 compatible, you can’t use app blocks. You’ll need to add the Dialog snippets manually.

You’ll also need to activate the Dialog script in the Shopify customizer (Embed apps section, top-left).

Download the snippets

instant.liquid Place in your theme's snippets/ folder.

instant.js Place in your theme's assets/ folder.

instant.css Place in your theme's assets/ folder.

Use them in your theme

Render the instant snippet where you want the widget on your product page:

{% render "instant" %}

Include the JS and CSS:

<script src="{{ 'instant.js' | asset_url }}" defer="defer" type="module"></script>
<link rel="stylesheet" href="{{ 'instant.css' | asset_url }}" type="text/css" media="all">

Need help? Email support@askdialog.com.

Verify the cart UI refreshes

This is the one thing that breaks most often on Shopify. After install, open Dialog on a product page and add a product — make sure your cart icon / bubble / mini-cart updates without a reload. If it doesn’t, that’s a theme-specific glue we handle for you in under 48 hours — email support@askdialog.com with the theme name. See Add to cart issues for the full story.

Headless Shopify (Hydrogen, custom storefronts)

If your storefront isn’t rendered by the Online Store (Hydrogen, custom Next.js / Remix / Nuxt frontend, mobile app), the Shopify app still handles catalog sync — install it normally. But the app block won’t render on your custom frontend because it’s an Online Store extension.

For the frontend embed in a headless setup:

React / Hydrogen → use @askdialog/dialog-react.
Vue / Nuxt → use @askdialog/dialog-vue.
Anything else (Svelte, server-side templating, vanilla JS) → use @askdialog/dialog-sdk.

You’ll wire addToCart and getProduct callbacks against the Storefront API (or whatever cart / product APIs you already use). See the developers section for the full setup.

Next step

Once the app is installed, verify your install to make sure everything works end-to-end.