Skip to content

Ask the docs beta

Answers come from this documentation only, with sources. For account-specific issues, the docs route you to the right owner.

Dialog not visible on store

If the Dialog widget isn’t showing on your store, the fix differs by install path. Jump to the section matching yours — and if you’re not sure which path your store uses, identify it first: every check below depends on it.

These checks apply to Shopify stores only (Shopify app install — Online Store 2.0 or legacy theme).

  • Dialog app embed is toggled on. In the Shopify theme customizer, check the Embed apps section (top left).
  • App block is added to the product page template. Edit your theme, open the product template, verify the Dialog app block is present.
  • No CSS conflicts. Open browser devtools on the product page and inspect the widget area. Something might be hiding it (display: none, visibility: hidden, a z-index conflict).

App block added, but isn’t rendering correctly

Section titled “App block added, but isn’t rendering correctly”

You added the Dialog app block in the Shopify theme editor, but on the storefront it either doesn’t render at all or renders in the wrong place. Typical signs:

  • it’s visible in the editor but completely absent on the live product page
  • it appears above or below the expected product area
  • it renders in a generic Apps wrapper instead of inside the product section
  • the storefront placement doesn’t match the section location you chose in the editor

This is usually a theme issue, not a Dialog issue. A theme can look like Online Store 2.0 and still fail to support app blocks correctly in its product section. The editor lets you add the block as soon as the section schema allows it, but the block only renders if the section’s Liquid actually outputs app blocks.

The most common cause is a missing render call. If the product section never includes {% content_for 'blocks' %} (or a per-block {% render block %}), the block is accepted in the editor but renders nowhere on the storefront — this is the case people most often mistake for a Dialog bug. If that render call exists but sits outside the product layout, the block renders in the wrong place instead.

Per Shopify’s app block requirements, the product section must:

  • declare a generic block of {"type": "@app"} in its schema — so the editor can add the block
  • actually render those blocks with {% content_for 'blocks' %} or {% render block %} — so they appear on the storefront
  • keep that render call inside the product layout, not in a separate statically rendered section

Quick check. In the theme editor, open the product template and try to add Dialog inside the main product section — not as a top-level section — then save and preview the storefront. If Dialog is missing on the storefront even though it’s added inside the product section, the section declares @app blocks without rendering them. If it only lands in the wrong place, the render call exists but sits outside the product layout. Either way, the theme doesn’t fully support app blocks for that area.

What to do next — choose one path:

  • Theme / agency fix. Ask your theme developer to update the product section so it properly supports Shopify app blocks (Shopify reference). They should confirm the relevant section declares {"type": "@app"} in its schema, actually renders those blocks with {% content_for 'blocks' %} (not just declares them), and isn’t relying on a static section pattern for that placement.
  • Manual Dialog snippet fallback. If the theme can’t support app blocks correctly, use Dialog’s manual theme integration instead (instant.liquid, instant.js, instant.css). This is the recommended fallback for legacy themes, partially compatible themes, and custom themes that expose app blocks in the editor but don’t render them correctly on the storefront.
  • The Dialog module is enabled in Module Manager.
  • The module’s configuration shows valid API keys (re-paste them if in doubt).
  • Open a product page with browser devtools and confirm Dialog’s script tag is in the HTML.
  • The Dialog tag is published in your GTM container (not just in preview).
  • The tag’s trigger matches your product URL pattern.
  • Dialog Product ID resolves to a real value on the page (Variables panel in GTM preview).
  • The component (<DialogProductBlock>, <DialogInput>) is rendered on the page — confirm in your dev console.
  • The SDK was instantiated with a valid public API key.
  • The productId you’re passing matches a product in your uploaded catalog.