Preview and stage theme changes

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.

Choose how to preview

The route depends on whether the store already uses the theme.

:::warning Editing 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.

A 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. :::

Preview a theme

1. Open the Theme record.

2. Select Click to Preview on Site.

   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.

   A bar across the top of the store reads Previewing Theme: followed by the theme name.

3. Browse the pages you changed. The preview stays on as you move between pages.
4. (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.
5. When you finish, choose Close Preview from Options…, or add ?theme-preview=close to any page address.

Only 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.

If 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.

The 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.

Stage changes to a live theme

A 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.

Before you start

• 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.
• 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.

Stage, preview, and publish

1. 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:
   • 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.
   • Website Builder — edit, add, or delete templates from the Themes icon in the sidebar. See edit your site with the Website Builder.

   • StoreConnect CLI — push your local theme files. Each push creates a new content change. See the end-to-end store build sequence.

     ```bash

     sc theme push my-theme ```

   Staged edits to existing templates and new templates both render in the preview, and the live theme is unchanged.

2. 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.

   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.

   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.

   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.

3. Check every page the change touches, then submit the change for review.
4. An approver reviews the field-level diff, then approves and publishes the change. See Review and approve a content change.

By default, you cannot publish a change you authored. Someone else with an Approver role publishes it.

Once published, the change moves to the Published tab of the content changes queue, and the live storefront shows the updated theme.