> For the complete documentation index, see [llms.txt](https://docs.shopperos.stackline.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.shopperos.stackline.com/pages-studio/pages.md). # Pages and themes In the Pages studio, you build your storefront. You write pages, choose the look of your store, and publish both to shoppers. A page holds the words and pictures. A theme holds the look. Open **Pages** in the top navigation. The studio opens on your list of pages.
Two lanes lead to what shoppers see. In the One page lane, a draft page goes through Publish and becomes a published page. In The whole store lane, a staged theme under Draft themes goes through Make live and becomes the live theme. Publish changes one page. Make live changes every page.

Notice the two lanes. Publish changes one page. Make live changes the look of the whole storefront. Each act is immediate.

## A page holds the words, a theme holds the look ShopperOS keeps what a page says apart from how it looks. {% columns %} {% column %} **Page** The words and pictures of one page, such as one product page or one article. Change it in **Pages**. {% endcolumn %} {% column %} **Theme** Your store's whole look: header, footer, colors, and one design for each page type. Change it in **Themes**. {% endcolumn %} {% endcolumns %} A page does not choose its own design. The live theme's design for that page type shows every page of that type. This has two results: * When you change a theme's design for a page type, every page of that type changes. You do not edit each page. * When you make another theme live, your published pages keep their words and pictures. They take the new theme's designs, header, footer, and colors. One theme is live at a time. The other themes are staged. You can edit and preview a staged theme. Shoppers see no change until you make it live. ## Read the four pages in this order
Pages and themesThis page. The studio, the page list, the editor, and your themes.Pages and themes
Catalyst, the Pages assistantResearch a product and build its page with the AI assistant.Catalyst, the Pages assistant
Publish and go livePublish pages and designs, make a theme live, preview, and add pixels.Publish and go live
Domains and hostingThe address where shoppers reach your pages, and your own domains.Domains and hosting
## The studio menu has eight areas Each item in the Pages studio menu opens one area. | Menu item | What you do there | | -------------- | ---------------------------------------------------------------------------------------------------------- | | **Pages** | Create, edit, preview, and publish your pages. | | **Agent** | Open the Catalyst chats of this project. See [Catalyst, the Pages assistant](/pages-studio/catalyst.md). | | **Themes** | Add themes, edit their designs, and choose the live theme. | | **Insights** | See pageviews, orders, and sales across all your pages. | | **Knowledge** | Add knowledge, policies, and guidelines that ShopperOS uses when it writes your pages. | | **Modules** | Turn shopping features on or off on your pages, such as **Add to Bag** and **Where to Buy**. | | **Branding** | Set the colors and typography that new themes start from. | | **Publishing** | Choose your page address, and add tracking pixels. See [Publish and go live](/pages-studio/publishing.md). | ## Create a page Catalyst, the AI assistant, builds a new page with you. **Before you start:** * Your catalog has products. See [Your catalog](/catalog/catalog.md). * You have at least one theme. If **New page** shows **No page types yet**, [add a theme](#add-a-theme) first. * Your hosting is set up. See [Domains and hosting](/pages-studio/hosting.md). **Pages → Pages → New page** {% stepper %} {% step %} ### Start a new page On **Pages → Pages**, click **New page**. Catalyst opens on the page setup. {% endstep %} {% step %} ### Answer the setup Pick the platform, the template and its look, the product and its variants, and the page goal. {% endstep %} {% step %} ### Build the page with Catalyst Catalyst researches the page with you, then builds its sections, copy and images. For each step, see [Catalyst, the Pages assistant](/pages-studio/catalyst.md). {% endstep %} {% endstepper %} Done. The new page is a draft. Shoppers do not see it until you publish it. Next, [publish the page](/pages-studio/publishing.md#publish-a-page). To change the goal of an existing page and build it again, use **Regenerate** in the editor. See [Edit a page](#edit-a-page). ## The page list shows the status of each page **Pages → Pages** lists every page in your project. Use **Search pages by name or ID**, or click the filter button to filter by **Page types**, **Status**, **Creators**, or **Editors**. Click a page's name to open it in the editor. | Status | Meaning | | -------------------------------------------------------- | ---------------------------------------------------------------------------------- | | **Draft** | Not published. Shoppers do not see it. Click the pill to preview the draft. | | **Published v***N* | Live. *N* is the published version. Click the pill to open the published page. | | **Unpublished edits** | Shows under **Published** when the draft has changes that are not live yet. | | **Archived** | Off air and out of the list. Choose **Archived** in the filter to see these pages. | | **Building…** | ShopperOS is writing the page. Click the name to watch the build. | | **Build failed** | The build did not finish. Click the name to see the build. | ### Each row has an actions menu Click the actions menu at the end of a row. | Action | What it does | | ----------------------- | ----------------------------------------------------------------------------------------------- | | **Edit page** | Opens the page in the editor. | | **Preview** | Opens a preview of the draft. See [Preview links](/pages-studio/publishing.md#preview-links). | | **View published page** | Opens the live page. | | **View page insights** | Opens the page's details, on the **Summary** tab. | | **Settings** | Opens the page's **Settings** tab. | | **Publish draft** | Publishes a draft. The dialog names the address shoppers reach it at. | | **Unpublish** | Takes a live page down. The page and its versions stay in ShopperOS. | | **Duplicate** | Makes a new draft copy of the page. | | **Rename** | Changes the page's name. For some page types, you can also change the last part of its address. | | **Archive** | Moves the page to **Archived**. A live page is unpublished first. | | **Unarchive** | Moves an archived page back to your pages as a draft. | ## Edit a page In the editor, you change the page's words and pictures. The design comes from the theme. To change the design of every page of a type, [edit the theme](#edit-a-theme). To open the editor, click a page's name, or choose **Edit page**. The page shows inside its theme's design. The editor saves your changes to the draft as you work. The top bar names the theme you edit with. A green dot means the live theme. Click **Preview** to open a preview of the draft on your storefront. The actions menu, to the right of **Preview**, holds the other controls: | Control | What it does | | ----------------------- | --------------------------------------------------------------------------------------------------------------- | | **Version checkpoints** | Lists your saved versions. Open one to view it, restore it into your draft, publish it, or copy a preview link. | | **Regenerate** | Writes the page's content again from its goal, and opens the build view. | | **Save version** | Saves the draft as a version checkpoint. It does not publish. You can add a label. | | **Publish** | Makes the current draft live. See [Publish and go live](/pages-studio/publishing.md). | {% hint style="warning" %} **Items to review.** A page can hold sample content that came with the theme. **Publish** then shows **Items to review**. Replace each item on the page, or select **Keep as-is** to keep it. {% endhint %} ### Ask the assistant in the editor The assistant changes the draft for you. Open **Chat** in the editor's left rail, and tell the assistant what to change. * The assistant saves each change to the draft as it makes it. There is no step to apply or discard a change. * The chat shows a record of each change, such as new words or a new picture. * At the end of the turn, a line says what happened. For example, **Done — applied 3 changes.**, or a line that names a check that failed. * **Undo this turn** takes back every change of that turn. It shows only while the draft still holds those changes. * **Regenerate** takes the turn back and runs it again. * While the assistant works, you cannot edit the page by hand. You can edit again when it stops. ## Each page has its own details The page details show the metrics, versions, and content of one page. Choose **View page insights** or **Settings** in a page's actions menu. The left side shows the page's **URL**, **Page ID**, **Last Edited**, and **Created** date. | Tab | What it shows | | ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------- | | **Summary** | The page's metrics, such as **Pageviews**, **Orders**, **Conversion Rate**, and **Retail Sales**. A table shows each product featured on the page. | | **Versions** | Each published version, with its label. The live version has a **Live** pill. | | **Modules** | The shopping features on this page only. These override the studio-wide **Modules** settings. | | **Assets** | The page's media and content: **Featured variations**, **Carousel images**, **Videos**, **Questions**, **Testimonials**, and **Meta Fields**. | | **Settings** | The page's details and status. **Page pixels** adds tracking pixels that run on this page only, in addition to your site pixels. | | **Runs** | Each time ShopperOS built the page, and the result. | ### Meta field names save under your app's field names A meta field is a named list, such as specs, ingredients, or usage, for one variation. Edit them in **Assets → Meta Fields**. * Type one value per line. A field that you do not name keeps the product's values. * The name field suggests the product fields of your app. A name that matches a field's key or label saves under that field. Case, spaces, and punctuation do not matter. For example, "Care instructions" can match a field labelled **Care Instructions**. * Any other name saves in camelCase, such as `careInstructions`. It must start with a letter and have 2 to 40 characters. * If ShopperOS refuses a name, **Meta Fields not saved.** shows with the reason. For example, the name is too short, or the platform already uses it. Two names that save as the same field on one variation are also refused. * After a save, a warning can show under a field: **No section of the live product page shows "…". It is saved, and a design that reads it will show it.** The save is kept. Use a name that the live design reads, or change the design. ## Themes give your store its look **Pages → Themes** lists the themes in your store. The live theme is first. The other themes are listed under **Draft themes**. | Label | Meaning | | -------------------------------------------------------- | ------------------------------------------------------ | | **Live** | Shoppers see this theme now. | | **Update available** | A newer version of this theme is ready. | | **New brand content** | Your brand content changed after you added this theme. | ### Add a theme You copy a theme from the library into your store. You can add the same theme more than once. Each copy has its own edits. **Pages → Themes → Add theme** {% stepper %} {% step %} ### Open the library On **Pages → Themes**, click **Add theme**. The library opens. {% endstep %} {% step %} ### Choose a theme Choose a theme from the library, and click **Continue**. **Name this theme** opens.
Add theme: choose a look from the library

Each row is one theme in the library, with its version number.

{% endstep %} {% step %} ### Name it Keep the **Theme name**, or type a new one. Only your store sees this name. {% endstep %} {% step %} ### Add it Click **Add theme**. ShopperOS copies the theme into your store, with your brand's content. {% endstep %} {% endstepper %} Done. The new theme is staged. Shoppers do not see it until you make it live. Next, [edit the theme](#edit-a-theme), then [make it live](/pages-studio/publishing.md#make-a-theme-live). ### Edit a theme The theme editor changes the design of a page type, or the parts every page shares. On **Pages → Themes**, click **Edit** on a theme's row. The left side lists the theme's page types. Click a page type to edit its design. Click **Site Styles** to edit the header, footer, and colors that every page shares. A dot on a page type means it has changes that are not published. See [Publish a design or Site Styles](/pages-studio/publishing.md#publish-a-design-or-site-styles). The canvas shows a design with sample data. Two menus above the canvas show the design in other cases. They change only the preview, and save nothing. | Menu | What it does | | ------------------ | ---------------------------------------------------------------------------------------------------------------------------- | | **Sample product** | Search your catalog, and pick a real product to show in the design. Choose **Sample product** to go back to the sample data. | | **States** | Shows the page in another state, such as another buy state or missing data. **Show the data as it is** clears your choices. | ### Each theme has an actions menu Click the actions menu on a theme's row. | Action | What it does | | ----------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | | **Make live** | Makes this theme the one shoppers see. Shows on staged themes only. | | **Review theme defaults** | Compares your copy with the theme's own defaults for the version you are on. | | **Rename** | Changes the name only your store sees. | | **Duplicate** | Makes a new staged copy of this theme, with its edits. | | **Apply new brand content** | Updates the theme's pages with your newest brand images and text, and publishes them. Your other edits stay. | | **Version** *N* **available** | Opens the update review. It shows what is new and what merges with your edits. Click **Apply** to update. | | **Roll back to** *N* | Returns the theme's designs to the version before the last update. Your pages keep their own content. | | **History** | Lists every install, update, and restore of the live theme. Click to restore an earlier point. | | **Delete** | Removes a staged theme from your store. Type the theme name to confirm. Its edits cannot be recovered. You cannot delete the live theme. | ## Modules turn shopping features on or off **Pages → Modules** sets the shopping features on all your pages. Each switch asks you to confirm. | Group | Features | | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | | **Checkout** | **Add to Bag**, **Where to Buy**, and **Store Locator**. With **Store Locator** on, **Show online retailers** lists online retailers above the stores. | | **Shopping Assistant** | **Concierge**: shoppers get help from your AI concierge. | A feature that is not set up for your project shows a link to its settings instead of a switch. Set it up there first. For example, see [Turn on checkout and payments](/selling-and-checkout/checkout-and-payments.md). When checkout is on, **Commerce served by** chooses where the bag, checkout, sign-in, and account open: | Option | What shoppers get | | ------------ | --------------------------------------------------------------------------------------------------------------------- | | **Shop app** | The bag, checkout, sign-in, and account open in the shop app. The home page and search open on your store's own site. | | **Pages** | Your theme shows them. | ## Branding, Knowledge, and Insights feed and measure your pages | Area | What it does | | --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Pages → Branding** | Sets display colors and typography. These **Style Defaults** start from the values in Settings → Branding. | | **Pages → Knowledge** | Holds facts, policies, and guidelines that ShopperOS follows when it writes your pages. Click the add menu to add an entry. When two entries conflict, the entry for the more specific catalog level wins. | | **Pages → Insights** | Shows metrics across all your pages, such as **Pageviews**, **Unique Users**, **Orders**, and **Retail Sales**. Click a metric to see its trend. For one page, use that page's **Summary** tab. | On **Pages → Branding**, a value that you set overrides the app value, and **Inherit from app** removes that override. You can do this for one property, one group or all of them. ShopperOS copies the result into each new theme, unless the theme keeps its own colors or fonts. A theme you already have keeps its own styles. In its Site Styles, **Reset to Style Default** copies one property, and **Reset all to Style Defaults** copies a group or all of them. A font file that you upload on either screen goes to the app font library. It changes no style until you select it. ## What if…?
What if the live theme has no design for my page type? The page uses a staged theme instead. The editor's top bar names the theme you edit with.
What if the editor cannot load my store's header, footer, and colors? A note says so over the canvas. Click **Retry** to load them again.
What if I make another theme live? Your published pages keep their words and pictures. They take the new theme's designs, header, footer, and colors. See [Make a theme live](/pages-studio/publishing.md#make-a-theme-live).
## Troubleshooting | Message | What to do | | ----------------------------------------------------------------- | -------------------------------------------------------------------------------------------- | | **No page types yet** | Add a theme with a page design. See [Add a theme](#add-a-theme). | | **Install a theme with a design for this page type to continue.** | Add a theme that has a design for that page type, or pick another page type. | | **Tell the agent your goal to get a page plan.** | On the **Goal** step, type what the page should do, then send it. | | **We couldn't draft a plan. Try again.** | Click **Draft plan** again. | | **Pick at least one variation to continue.** | On **Variations**, select one or more variations. | | **Mark the variation shoppers land on to continue.** | Select **Shoppers land on this variation** on one variation. | | **The page was created, but the build didn't start** | The page is saved, and the editor opens. In the editor's actions menu, click **Regenerate**. | | **This theme has no page templates on the site yet** | Add the theme again with **Add theme**, then edit the new copy. | | **Meta Fields not saved.** | Read the reason. Rename the field, or remove a second field that saves under the same name. | ## Next step {% content-ref url="/pages/N4TXA3unBM980pw0Zval" %} [Publish and go live](/pages-studio/publishing.md) {% endcontent-ref %}