{"title":"Preview and stage theme changes","slug":"preview-and-stage-theme-changes","url":"https://support.storeconnect.com/articles/preview-and-stage-theme-changes","url_markdown":"https://support.storeconnect.com/articles/preview-and-stage-theme-changes.md","subtitle":null,"summary":"Preview a theme on your live store before visitors see it, and stage changes to the theme a store already uses as a content change, so they are reviewed and approved before they are published. Use this when building a new theme or editing a live one.","type":"Developer_Documentation","video_url":"","keywords":"theme preview, preview theme, preview a theme, click to preview on site, theme-preview, preview bar, theme bar, close preview, stage theme changes, staged changes, content change, theme draft, sc theme push, sc theme preview, themes write scope, website builder theme templates, preview url, preview on several stores, multi-store preview, approve theme changes, publish theme changes, staging site, staging theme, test theme before going live, try a new theme, redesign preview, draft changes, see changes before publishing, share preview link, reviewer link, origin store, store parameter, preview another store, ai agent preview, get_preview_url, preview link expired, preview 404, preview page not found, rejected content change","last_modified":"2026-10-28T03:56:00+0000","body_markdown":"You preview a new theme using your live store, with your real products and content, before any visitor sees it. This topic shows you how to preview a new theme, and how to stage changes to the theme a store already uses so they are reviewed before they go live.\n\n## Choose how to preview\n\nThe route depends on whether the store already uses the theme.\n\n| You are | Use | Visitors see |\n|---|---|---|\n| Building a new theme, or one no store uses yet | [Preview a theme](#preview-a-theme) | The store's current theme |\n| Changing the theme a store already uses | [Stage changes to a live theme](#stage-changes-to-a-live-theme) | The current theme, until the change is published |\n\n:::warning\nEditing a **Theme Template**, **Theme Asset**, or **Theme Variable** record directly in Salesforce has no review step. If a store uses that theme, the edit goes live as soon as Salesforce syncs it to your store.\n\nA change to a **Style Block** cannot be staged or previewed. Style blocks belong to the store, not the theme, so a saved change goes live as soon as Salesforce syncs it, and a blank **Channels** value loads it on every channel, the POS included. To review storefront CSS before it goes live, have an AI agent stage it in the **Custom Styles** field on the **Store** record instead. See [adding custom CSS](adding-custom-css).\n:::\n\n## Preview a theme\n\n1.  Open the **Theme** record.\n2.  Select **Click to Preview on Site**.\n\n    The link opens the store at the root of your org's StoreConnect address, whichever store uses the theme. To preview on a different store, add `?theme-preview=` and the **Theme** record's ID to that store's own address instead, for example `https://shop.example.com/kids?theme-preview=a34QE00001XEHofYAH`. This works on a custom domain, on a store mounted on a path, and with any theme in your org.\n\n    A bar across the top of the store reads **Previewing Theme:** followed by the theme name.\n\n3.  Browse the pages you changed. The preview stays on as you move between pages.\n4.  (Optional) Compare against another theme. Open **Options...** on the preview bar and choose **Normal theme** for the store's current theme, or **Built-in theme** for the base theme. **Recent Themes** lists the other themes you have previewed.\n5.  When you finish, choose **Close Preview** from **Options...**, or add `?theme-preview=close` to any page address.\n\nOnly the browser that opened the link sees the preview. Other visitors keep seeing the store's current theme. Anyone who opens the link sees the preview without signing in, so share it only with people who should see the theme before launch.\n\nIf your theme overrides the layout, keep `{{ theme_bar }}` in it. Without it the preview bar does not render, and you cannot switch themes or close the preview. See [theme layouts and pages](theme-layouts-and-pages).\n\nThe store now shows the theme in your browser only. To make it live, set **Theme** (`s_c__Theme_Id__c`) on the **Store** record to this theme.\n\n## Stage changes to a live theme\n\nA staged change is held as a draft content change. You preview it on the storefront, someone reviews and approves it, and it reaches the live theme only when it is published.\n\n### Before you start\n\n-   A `Content Changes` store role for the store at `Editor` level. To stage through the CLI or an AI agent, the role also needs the `Themes (Write)` API scope. See [Store roles](store-roles).\n-   Someone with an `Approver` level role to publish the change. A change made in the Website Builder needs an approver whose role has a **Store Scope** of `All`.\n\n### Stage, preview, and publish\n\n1.  Stage the change. A staged change can set theme variables, replace theme assets, or edit templates. Where a theme variable controls what you want to change, set the variable instead of overriding a template. Use whichever route suits the work:\n    -   **AI agent** — ask an agent connected to your store to make the change. An agent can stage theme variables, assets, and templates. See [update your store design with AI](update-store-design-with-ai).\n    -   **Website Builder** — edit, add, or delete templates from the **Themes** icon in the sidebar. See [edit your site with the Website Builder](website-builder).\n    -   **StoreConnect CLI** — push your local theme files. Each push creates a new content change. See the [end-to-end store build sequence](agent-store-build-sequence).\n\n        ```bash\n\n        sc theme push my-theme\n        ```\n\n    Staged edits to existing templates and new templates both render in the preview, and the live theme is unchanged.\n\n2.  Open the preview. Run `sc theme preview my-theme`, or select **Preview on storefront** on the change in the StoreConnect Console's content changes queue. If an AI agent staged the change, ask it for the preview link. The preview bar appears at the top of each page.\n\n    Unlike a theme preview link, the link from the CLI or the Console is signed and expires. When it expires, request a new one. The link an AI agent returns is the change's **Preview URL**, described below, and does not expire.\n\n    The **Content Change** record also holds a **Preview URL** (`s_c__Preview_URL__c`) that does not expire. It opens the preview on the change's **Origin Store**. To check the same change on another store, such as one that shares the theme, add `?store=` and that store's Salesforce ID to the link, for example `https://shop.example.com/_sc/share/05453311-33ee-43f4-8ffc-1de9e7216736?store=a2qQE00000BBMdBYAX`. A change with no **Origin Store** needs `?store=`, or the link returns a page not found error.\n\n    Anyone with the **Preview URL** can open the preview without signing in while the change is in draft, review, or approved. Share it only with reviewers.\n\n3.  Check every page the change touches, then submit the change for review.\n4.  An approver reviews the field-level diff, then approves and publishes the change. See [Review and approve a content change](review-and-approve-a-content-change).\n\nBy default, you cannot publish a change you authored. Someone else with an `Approver` role publishes it.\n\nOnce published, the change moves to the **Published** tab of the content changes queue, and the live storefront shows the updated theme."}