--- title: "Preview and stage theme changes" source: https://support.storeconnect.com/articles/preview-and-stage-theme-changes type: article format: markdown site: StoreConnect Support — product and developer documentation for StoreConnect site_index: https://storeconnect.com/llms.txt docs_index: https://support.storeconnect.com/llms.txt note: Append .md to any page or article URL on this site to get its Markdown form. --- # 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. | You are | Use | Visitors see | |---|---|---| | Building a new theme, or one no store uses yet | [Preview a theme](#preview-a-theme) | The store's current theme | | 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 | :::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](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](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](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](update-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](website-builder). - **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). ```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](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. --- ## Follow StoreConnect - [Email Newsletter](https://storeconnect.com/c/lp-newsletter) - [LinkedIn Newsletter](https://www.linkedin.com/build-relation/newsletter-follow?entityUrn=7444956928444862464) - [YouTube](https://www.youtube.com/channel/UCngKdP2x8l1wcbAKW3tvU8g) - [LinkedIn](https://www.linkedin.com/company/storeconnect) - [X / Twitter](https://x.com/storeconnecthq) ## Popular Links - [Partners](https://storeconnect.com/partners) - [Become a Partner](https://storeconnect.com/become-a-partner) - [News](https://storeconnect.com/articles/news) - [Events](https://storeconnect.com/articles/events) - [Feature Comparison](https://storeconnect.com/how-we-compare) - [Download a free trial](https://appexchange.salesforce.com/appxListingDetail?listingId=a0N3A00000FMkeKUAT) - [Book a Demo](https://storeconnect.com/contact) ## Documentation - [Help documentation](https://support.storeconnect.com/help-documentation) - [AI agents](https://support.storeconnect.com/ai) - [Videos & tutorials](https://support.storeconnect.com/videos-tutorials) - [Developer reference](https://support.storeconnect.com/developer-reference) - [Release notes](https://support.storeconnect.com/release-notes) - [Troubleshooting](https://support.storeconnect.com/troubleshooting) - [Trust Center](https://trust.getstoreconnect.com/) - [Status Page](https://status.storeconnect.com/) ## Contact - info@getstoreconnect.com - US +1 415 745 3230 - AUS +61 2 8365 2308 100 S Ashley Dr, Suite 600-2461 Tampa FL 33602-600 USA Level 22, Sydney Place 180 George Street Sydney, NSW, 2000, AUS ## Machine-readable - [Site index for agents](https://storeconnect.com/llms.txt): curated map of the StoreConnect site in llms.txt format - [Documentation index for agents](https://support.storeconnect.com/llms.txt): full technical and product documentation map Every page and article on this site has a Markdown rendering: append `.md` to its URL. Continue in Markdown: [Help documentation](https://support.storeconnect.com/help-documentation.md) · [Developer reference](https://support.storeconnect.com/developer-reference.md) · [Videos & tutorials](https://support.storeconnect.com/videos-tutorials.md) · [Release notes](https://support.storeconnect.com/release-notes.md) --- StoreConnect Support — https://support.storeconnect.com/articles/preview-and-stage-theme-changes