Install Dialog on Shopify

This guide is for merchants whose store runs on Shopify — if that’s you, the Shopify app is always the right install, whatever your theme. Go to your Shopify back office, search Dialog on the Shopify App Store, install it, and follow the onboarding.

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

App block isn’t rendering correctly

A theme can be labelled Online Store 2.0 and still fail to support app blocks correctly in its product section. If the Dialog block appears in the theme editor but is missing on the storefront — or renders outside the product area / inside a generic Apps wrapper — the section doesn’t fully support Shopify app blocks.

For the block to render at all, the product section must explicitly support app blocks: declare a {"type": "@app"} block in its schema and actually output it with {% content_for 'blocks' %} or {% render block %}, inside the product layout. A section that declares @app but never renders the blocks will accept Dialog in the editor yet show nothing on the storefront.

Ask your theme developer to fix the product section, or fall back to the manual snippet below. See App block added, but isn’t rendering correctly for the full diagnosis.

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.

Add the translation keys

instant.liquid renders its labels through Shopify translation keys ({{ 'blocks.instant.…' | t }}), so you must add a blocks key to your theme’s locale files (locales/*.json) — otherwise the widget shows blank labels. Add this to locales/en.default.json:

{
  "blocks": {
    "instant": {
      "ask-anything": "Ask anything...",
      "your-expert": "Your expert",
      "any-question": "Any questions on this product?",
      "diagnostic-cta": "Make your personal diagnostic"
    },
    "ai-input": {
      "your-question": "Ask your question"
    }
  }
}

Then add the translated version to each other locale file you support — for example locales/fr.json:

{
  "blocks": {
    "instant": {
      "ask-anything": "Posez n'importe quelle question...",
      "your-expert": "Votre expert",
      "any-question": "Une question sur ce produit ?",
      "diagnostic-cta": "Faites votre diagnostic personnel"
    },
    "ai-input": {
      "your-question": "Posez votre question"
    }
  }
}

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">

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. Run the checks in Add to cart issues first; if the standard snippet there doesn’t fix it, that’s theme-specific glue we write for you — email paul@askdialog.com with your theme name, typically handled within 48 hours.

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.