> ## Documentation Index > Fetch the complete documentation index at: https://docs.frontic.com/llms.txt > Use this file to discover all available pages before exploring further. # Building an experience Everything about an experience happens on one screen: chat on the left, canvas on the right. This page covers what the canvas can do, how work moves through stages, and the settings that shape what the design agent builds. ## Waking the workspace An experience opens **static-first**. You land on the latest saved version, rendered from storage with no sandbox running - fast, and cheap enough that browsing your experiences costs nothing. Click **Start editing** to open a live session. Frontic wakes the workspace, connects the design agent, and the canvas switches to the live build. From then on, every change the agent makes appears as it happens. Workspaces don't stay up forever. Leave an experience alone long enough and its workspace goes to sleep; the card on the Designer overview shows the state. | State | What it means | | - | - | | **Ready** | Running and serving the live canvas | | **Sleeping** | Idle - start editing to wake it | | **Starting** / **Provisioning** | Coming up; the chat shows the two steps (reserving the workspace, waking the agent) | | **Archived** | Moved to cold storage; reopening restores it, which takes a little longer | | **Error** | Provisioning failed - the chat offers a retry | Sleeping never costs you work. The workspace keeps everything the agent authored through both sleep and archive, and saved versions live outside it entirely - so waking one back up brings the experience back exactly as you left it. ## The canvas The canvas renders your real storefront with the experience mounted in place of the container it replaces. The toolbar above it controls what you're looking at. **designer/workspace** Experience Designer workspace - chat with the design agent on the left, the live storefront preview with the experience mounted on the right ### Viewport and zoom Switch between **desktop** and **mobile**, and toggle between auto-zoom (fit the frame) and actual size. The agent checks its own work at phone, tablet, and desktop widths before calling anything done - this is how you check it yourself. ### Languages When your shop sells in more than one language, the experience is built in all of them. To see it in another language, switch languages the way a shopper would - with your shop's own language switch on the canvas. The experience re-renders in the language the shop switched to. If the experience wasn't built in that language, it shows its primary language instead - on the canvas and on your live storefront alike. On a [blank canvas](https://docs.frontic.com/designer/overview.md#the-designer-surface) there's no shop and so no language switch of its own. The Designer adds a **Language** dropdown to the toolbar instead, next to the version picker, showing the code of the language on screen - `en-GB`, `de-DE`. Pick another and the canvas re-renders the experience in that language. ### Staying on the experience The canvas is a real browsing session, so clicking a link in your shop's header navigates away from the experience. The **track** toggle governs what happens next: * **Pinned** - the canvas snaps back to the experience whenever you drift off it * **Browsing freely** - you can click through the shop; the toolbar shows where you are and offers a one-click way back When the experience replaces existing shop content, **Show original** swaps the experience out for the markup underneath, so you can compare the two directly. ### Selecting elements Turn on **Select elements** and click parts of the canvas to hand them to the agent as context. Selected elements show up in the chat input, so "make this tighter on mobile" refers to something specific instead of something described. You can also attach a **comment** to a selection - a short note pinned to that element. Comments stay visible while you're selecting and can be toggled on and off from the toolbar. > [!NOTE] > > Selection works against the **live build** only. Pick a saved version in the version picker and select mode switches off - a pinned version renders different markup than the one the agent is holding. ### Build status A status pill next to the version picker reports the current build: the build number and how long ago it landed, or the failure message when a build is red. The canvas keeps showing the last good render while a build is broken, so a failure never leaves you staring at a blank frame - but it's worth checking the pill before you publish. ## Where the experience lives The settings button at the left of the toolbar decides which page of your shop the canvas loads and where on it the experience mounts. When the project has domains served by an active Shopware sales channel, the settings list them under **Domain** - grouped by scope, or by sales channel when several are synced. The domain you pick sets the language, currency and sales channel the preview renders in. A pick saves right away and keeps the page you're on. Like the other settings, only the owner can change it. If the page you need isn't on one of those domains, **Not listed? Use a custom URL or slot** opens the two fields below. They're open from the start when either is already set, and always shown when the project has no such domains. > [card] Preview URL > > The page on your shop the canvas loads. Set it to the actual > campaign URL so you're building against the right page. With no > domain picked and no URL set, the canvas loads your project's > first domain. > [card] Slot to replace > > The container on that page the experience takes over. Left empty, > the experience mounts on its Shopware CMS slot, or on the page's > only Frontic element, and on the main content area when neither > is there. When you save a preview URL, Frontic checks it first and tells you what it found - reachable, redirecting somewhere else, or blocked. A redirect gets a one-click fix that stores the final URL, so the canvas loads directly instead of bouncing. The page Shopware opens for an experience's CMS slot is the exception: it redirects to a real page that uses the layout by design, so it gets no fix. A shop behind basic auth or in maintenance mode can't be loaded without some setup on your side - see [Maintenance mode and password-protected shops](https://docs.frontic.com/connectors/shopware.md#maintenance-mode-and-password-protected-shops). To set the slot without knowing CSS selectors, use **Pick the slot in the preview**: the canvas switches into picking mode and you click the container you want. The toolbar warns you when the configured container isn't on the page (the experience then mounts as if the slot were empty) or when the container holds no content of its own - a sign the experience isn't actually replacing anything. A Shopware CMS slot doesn't get that second warning: it stays empty until you publish. > [!NOTE] > > Experiences created from Shopware need no setup here - the CMS slot is the container, and the preview opens the layout on one of your shop's domains. See [Frontic Experiences in Shopware](https://docs.frontic.com/connectors/shopware.md#frontic-experiences-in-shopware). ### Previewing as a category or product An experience in a Shopware category or product layout shows the category or product of the page it's on, so the canvas has to render one. The toolbar then shows a **Preview as…** picker with the record on screen. Search for a category, or for a product by name or product number, and the canvas reloads as that record's page. The picker lists every active category or product of the layout's kind, not only the ones that already use the layout. A record that uses the layout opens its own page; any other opens with this layout in place for the preview only, without touching your live store. So you can build a product-page experience before you assign the layout to anything. Your pick applies to your own view. **Back to the saved record** returns to the experience's default, and the owner can make a pick that default with **Use for everyone**. Without a saved record, the preview starts on the first record that uses the layout, or on any record of its kind while nothing uses it yet. Changing the preview domain resets the pick, since another sales channel can offer other records. Landing pages and other Shopping Experience layouts have no page record, so they don't show the picker. See [Experiences on category and product pages](https://docs.frontic.com/connectors/shopware.md#experiences-on-category-and-product-pages). ## Working with the agent The chat is a normal conversation, with a few structured moments. * **Questions** - when the agent needs a decision only you can make, it asks as a structured choice rather than a wall of text. * **Plans** - for larger work the agent writes a plan and waits. **Approve** to let it build, or **Request changes** to send it back. * **Approvals** - a few actions pause for a yes rather than proceeding on their own. You get **Allow** or **Deny**; most of a session runs without ever hitting one. To stop the pauses, switch the shield toggle in the chat input to **Skip approvals**; it applies only to you, in this project and this browser. * **Interrupting** - **Stop** halts the agent mid-run. Use it freely; steering by interruption is the intended way to work. ### Adding images Attach images to a message with the image button in the chat input. The agent uses them directly rather than sourcing stock imagery. With a shop connected to the project, the button opens the **Add media** menu: * **Upload from computer** - attach an image file from your machine, up to 10 MB. * **Select from Shopware media** - opens the **Add Images** dialog, where you search your shop's media library and add one or more images to the message. Without a connected shop there's no menu: the button opens the file picker on your computer directly. > [!NOTE] > > The media library is read from the shop connected to the project. If your Shopware media library doesn't show up, check whether the shop is in maintenance mode or behind basic auth - see [Maintenance mode and password-protected shops](https://docs.frontic.com/connectors/shopware.md#maintenance-mode-and-password-protected-shops). ### Linking to products and categories When the agent puts a product or category into an experience, it links to the real page on your shop rather than composing a URL from the record's name. The paths come from the shop's own data - see [storefront SEO paths](https://docs.frontic.com/connectors/shopware.md#storefront-seo-paths) - so links keep resolving after the experience is published back into a Shopware layout. Projects onboarded through the Shopware plugin wizard have the paths already. Where they were never imported, the agent renders the product or category without a link and tells you why, rather than inventing an address that resolves to nothing. ## Stages Every experience carries a **stage** - where it sits in your team's workflow, independent of whether its workspace is running and independent of whether it's published. It's a label you and your team maintain, not something the system derives - an experience can sit in **Complete** with a sleeping workspace and a published version, and all three are saying different things. | Stage | Meaning | | - | - | | **Draft** | Created, not really started | | **Working** | Actively being built | | **Needs input** | Waiting on a decision from you | | **Needs approval** | Waiting on a sign-off | | **In review** | Handed over for review | | **Complete** | Done | | **Archived** | Parked | > [!NOTE] > > **Archived** means two different things depending on where you see it. As a *stage* it means you parked the work. As a *workspace state* it means the sandbox moved to cold storage. Neither implies the other. Move the stage from the badge on the experience. Not every move is allowed - **Working** is the hub, so most stages route back through it, and **Archived** is reachable from anywhere but only reactivates to **Working**. Only the experience's owner can move the stage. One transition happens on its own: send a message or answer a plan while the experience sits in **Draft**, **Needs input**, or **Needs approval**, and it advances to **Working**. Everything else is a deliberate move you make. ## Ownership and read-only viewing Each experience has one **owner** - the person whose workspace runs the latest build. Everyone else on the team opens it read-only. As a viewer you still get the full canvas: the latest saved version, every earlier version in the picker, and the share link. You see the chat too, so you can follow the conversation, but only the owner can send to it - two people can't drive one agent. To watch the build as it happens, pick **Show live preview** in the version menu and you follow the owner's edits as they land. When the owner's workspace is offline, the menu says so. Below the chat you see whether the owner's workspace is starting, failed to start, or not running; only the owner can start it again. Settings belong to the owner as well. Anyone can rename an experience; only the owner can change its preview URL, its slot, or its [stage](#stages). ## Working alongside other experiences Experiences in the same project share some code - components, translation helpers, design tokens. When a teammate saves or publishes a change to that shared code from another experience, your workspace takes it in on its own, and a notice tells you whose changes were loaded and what they touched. While changes are coming in, **Save** pauses for a moment. When a shared file changed in the same place on both sides, the agent resolves the conflict for you. ## Designer settings **Designer → Settings** holds two project-level documents that shape every experience in the project. They're the Designer's counterparts to [Studio's Prompt and Project Rules](https://docs.frontic.com/studio/settings.md) - same idea, separate documents, so the two surfaces can diverge. > [card] Designer Prompt > > How the Designer builds for this shop - visual direction, campaign > voice, and what it must never do. Appended to the Designer's > system prompt in every session. > [card] Designer Project Rules > > What the Designer should know about the project - business context, > assortment, terminology, and the rules that apply to every > experience. Synced into the workspace on every boot. [Context Setup](https://docs.frontic.com/context-base/setup.md) writes both from your storefront and switches them on. Here you can read them, but not type into them, and their **Active** switch is locked. To change one, ask the Designer, Studio, or [Buddy](https://docs.frontic.com/essentials/buddy.md) in chat: each asks you to approve the change, and the new text applies from the Designer's next session. [Settings → Agents](https://docs.frontic.com/project-settings/agents.md) shows the same documents next to Studio's and Buddy's. These are **project-scoped, not per-user** - everyone building experiences in the project gets the same prompt and the same rules. > [!TIP] > > Rules that should apply everywhere an agent works - the styleguide, tone of voice, accessibility baselines - belong in [Context Base rules](https://docs.frontic.com/context-base/rules.md), not here. Those reach the Designer, Studio, and your IDE agents at once. Reserve Designer Project Rules for things that only make sense while designing an experience. ## Related > [card] [Publishing](https://docs.frontic.com/designer/publishing.md) > > Saving versions, going live, rollback, and sharing. > [card] [Design Library](https://docs.frontic.com/context-base/design-library.md) > > The brand tokens every experience is built from. > [card] [Context Base rules](https://docs.frontic.com/context-base/rules.md) > > Guardrails shared across every build surface. > [card] [Experience Designer](https://docs.frontic.com/designer/overview.md) > > What experiences are and how to create one. This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.