Skip to main content
Shop Canvas Docs

Checkout test before publish

On the published (or publish-preview) storefront, add-to-bag increases cart count, reload persists quantity, and Shopify checkout opens — card entry stays on Shopify, not on Framer pages.

Outcome: On the published (or publish-preview) storefront, add-to-bag increases cart count, reload persists quantity, and Shopify checkout opens — card entry stays on Shopify, not on Framer pages.

When to use

  • Cart & checkout snippet pasted into Custom Code but checkout not verified yet.
  • Agency console may show no checkout test on file until you record one manually.
  • Before client handoff or domain cutover.

Prerequisites

  • Live Shopify connection (not demo-only for real checkout).
  • Runtime pasted: the snippet from Store → Cart & checkout setup → Copy snippet saved once in Framer Site Settings → Custom Code (Runtime docs).
  • Site published at least once (or use production preview URL from Framer publish info).
  • Client aware checkout is Shopify-hosted (no card fields on Framer canvas).

Steps

  1. Confirm runtime
    In plugin: Store → Cart & checkout setup. After publishing, choose Show published site, open the link and look for the script in the page source. Keep one Shop Canvas commerce script.

  2. Record cart baseline
    Open the published product URL (from Framer publish or Store → Test your published store). Note cart badge/count: before = 0 (or current).

  3. Add to bag in Preview or published site
    Use the product page Add to bag control. Cart count should go up by one (for example, from empty to one item).

  4. Reload
    Hard reload the page. Cart quantity should persist (same count).

  5. Open checkout
    Proceed to checkout from the cart UI. Browser should navigate to Shopify checkout (shop domain or checkout.shopify.com).
    Stop before entering real card data unless using a designated test store.

  6. Record result
    Note before/after counts and whether checkout URL is Shopify. Agency console cannot store this yet — keep notes in your run log or handoff doc.

  7. Optional plugin record
    Store → Test your published store saves a manual check in-project (not synced to agency console in MVP).

Success checklist

  • Snippet present once; the script shows in the published page source (Show published site gives the link).
  • Cart before and after add-to-bag documented (for example, empty to one item).
  • Reload preserves cart quantity.
  • Checkout opens on Shopify; no card form embedded in Framer page.
  • Client domain/market matches connection country settings.

Known footguns

  • Preview vs published: Framer Preview can differ from production Custom Code — smoke the published URL for handoff.
  • Demo store: Demo bag does not validate Shopify checkout.
  • Console: Checkout smoke status stays not_available in agency API until a future provider stores events — absence is not a pass.
  • Analytics: GA4 and conversion tracking remain in Framer site settings; Shop Canvas does not duplicate analytics.
  • Billing: Per-store subscription billing does not change checkout behavior in this MVP.

Human review (Typesafe-style)

If checkout redirects fail, markets mismatch, or the runtime fingerprint differs between plugin and published site, stop and escalate — do not publish domain cutover until a human reconciles connection, markets, and Custom Code.

On this page