> 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/catalyst.md).
# Catalyst, the Pages assistant
Catalyst researches your product and builds a product page with you, step by step. It is the AI assistant of ShopperOS. It reads your catalog and your Stackline data, such as Atlas, Beacon, and Shopper Analytics. You can also ask it questions, edit a page, or make images. Start a page from **Pages → Pages → New page**.
```mermaid
flowchart LR
A["Setup"] -- "Start research" --> B["Research steps"]
B -- "Continue to Sections" --> C["Sections"]
C -- "Write the copy" --> D["Copy"]
D --> E["Images"]
E --> F["Edit the draft"]
F -- "Publish" --> G["Published"]
```
*Notice that research comes before the build. A page moves from the setup, through eight research steps, to the build: sections, copy, and images. You then edit the draft and publish it.*
On screen, the assistant's panels are labelled **ShopperOS**. Every project can use Catalyst. Your chats belong to the project, so your team can work on them together.
## Open Catalyst from any screen
You can open Catalyst in a box beside your work, or on its own full page.
The full Catalyst page. The three starters sit under the chat box.
| Way in | What opens |
| ---------------------------------------------------------------------- | ------------------------------------------------------------------------ |
| **Ask anything**, or the chat button at the bottom right of any screen | The assistant, in a box beside the screen you are on. |
| Command K (Mac) or Control K (Windows) | Opens or closes the same box. |
| **Pages → Pages → New page** | The full Catalyst page, on a new page setup. |
| **Pages → Agent** | Your project's chats. Click a chat to open it on the full Catalyst page. |
The box keeps your chat when you close it. In the box:
| Control | What it does |
| --------------------- | -------------------------------------------------------------------------------- |
| **Open in a new tab** | Opens the same chat on the full Catalyst page. |
| **New chat** | Starts a new chat in the box. |
| **Create a page** | Opens a page setup on the full Catalyst page. The box has no room for the setup. |
### The full page starts with three starters
The full page opens on **What's on the agenda today?**. Type in the chat box, or click a starter: **Create a page**, **Edit a page**, or **Generate images**.
The left sidebar holds:
* **New chat** and **Chat history**.
* **Recent chats**, your project's newest chats.
* Your name at the foot. Click it to open **Settings** or **Sign out**.
Click the ShopperOS mark to go back to the console home.
## Start a page with six questions
**Create a page** opens the setup card in the middle of the screen. The card shows one step at a time. You can also tell Catalyst the setup in your own words, in the chat or in a voice call. It fills in the steps for you.
**Before you start:** a theme of your project has a design for the page. If not, [add a theme](/pages-studio/pages.md#add-a-theme).
**Pages → Pages → New page**
Click **Next** to go on, or **Back** to change an earlier answer. Each step saves its answer when you click **Next**. Long lists, such as many products or variants, scroll inside the card.
{% stepper %}
{% step %}
### Pick the platform
**Where will this page go?** Pick your own site or a retailer, such as Amazon or Walmart. Your own site shows its domain, such as example.com. The page follows the rules of the place you pick.
{% endstep %}
{% step %}
### Pick a template
**What are we building?** Each card shows a page and the look it takes, with a picture of the design. Pick one card. The look of the live theme has a **Live** pill.
{% endstep %}
{% step %}
### Pick the product
**Which product is the page for?** Search your catalog by name, SKU, or ASIN. Only products you can sell show. A retailer page, such as an Amazon A+ page, shows only the products you sell there, each with its ID there, such as its ASIN. A page for your own site shows the whole catalog, with each product's ASIN and SKU. You can also type a page address, a SKU, or the product in words.
{% endstep %}
{% step %}
### Pick the variants
**Which variants, and which is the default?** Tick the variants the page sells. Click **Set as default** on the one the page opens on.
{% endstep %}
{% step %}
### Set the goal
**What should this page do?** Catalyst writes a suggested goal. Keep it, edit it, or click an idea: **Improve SEO and AEO** or **Improve conversion rate**. The research needs a goal.
{% endstep %}
{% step %}
### Check and start the research
**Check your answers.** The step lists the platform, the page type, the look, the product, the variants, and the goal. Click **Start research**. The screen shows **Initializing the page** while Catalyst saves the setup and opens the first step.
{% endstep %}
{% endstepper %}
Done. Your new page is a draft. Shoppers do not see it until you publish it. Next, [review the research](#research-builds-the-case-for-the-page).
### Each platform has its own templates and looks
Each platform has its own product page.
| Platform | Page |
| ------------- | --------------------------------------------------- |
| Your own site | **Product detail page** |
| **Amazon** | **A+ product detail page** |
| **Walmart** | **Product detail page**, in the Walmart page design |
| Card label | Meaning |
| ---------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Coming soon** | Other retailers and other kinds of page, such as editorial pages. |
| **Not installed** | ShopperOS has the page, but no theme of your project has a design for it. Add a theme with that design first. See [Add a theme](/pages-studio/pages.md#add-a-theme). |
The setup never picks a look for you. When the live theme has a design for the page, its look is the only card. When it does not, each staged theme with the design is a card, with no pill. A theme made for one retailer shows only on that retailer's platform.
## Research builds the case for the page
After the setup, Catalyst researches the page in steps. The bar at the top shows each step. A check marks a done step. A ring with a dot marks the step under way.
| Step | The question it answers |
| -------------------- | ------------------------------------------- |
| **Product facts** | What makes this product worth buying? |
| **Journeys** | How do people find it? |
| **Sources** | Where will visitors come from? |
| **Competitors** | Who is it up against, and what do they own? |
| **Audience** | Who is the page for? |
| **Customer type** | New buyers, or people who know the brand? |
| **Brand and voice** | How should the brand sound and look? |
| **Hooks and angles** | What story should the page tell? |
While a step works, the canvas shows each source it reads, such as Atlas or AI Visibility. Each source gets a check when Catalyst has read it. Click a source that read data to see that data in the **Sources** panel.
Some steps ask a question first:
* **Sources** asks: **All journeys**, **A platform**, or **A campaign**. This step only asks. It has no findings.
* **Audience** asks: **Suggest from my data**, or **I'll describe them**.
### What the research reads
Four steps read your data. Ratings and sales are evidence, never claims on the page.
| Step | What Catalyst reads |
| ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Product facts** | The product's listing at each retailer: the catalog offers, the linked listings, product matches, and listings that the AI finds are the same product. For each retailer, it reads the price, rating, review count, and four weeks of units and sales from Atlas. It also reads the copy each retailer shows, the words on the product images, and the reviews. |
| **Journeys** | The Atlas search terms of every listing, and the questions shoppers ask AI assistants. When a retailer has no unbranded term for the product, it adds the brand's terms in the same subcategory. |
| **Competitors** | Products in the same subcategory, products with shared keywords, products from Shopper Analytics, products in the same AI answers, and similar products. Catalyst keeps only products of the same form and use, ordered by how much they are like yours. |
| **Audience** | Your brand's AI audiences, shaped by the product facts, journeys, and competitors that you kept. |
To run one of these steps for a product outside a page, use the product's **Research** section. See [Research](/catalog/product-details.md#research).
### Review the findings
Each step ends with its findings, in groups. For example, **Product facts** shows **Key features**, **Benefits**, and **Claims**. Under its title, **Built on** names each source that read data for the step.
| To | Do this |
| -------------------------- | ------------------------------------------------------------------------------------------------------ |
| Keep or drop a finding | Click the card to tick or untick it. **Select all** ticks the whole group. |
| Change a finding | Click its pencil, and change the fields. |
| Add a finding | Click **Add your own** at the end of a group. Or click **Or describe it**, and tell Catalyst in words. |
| Remove a finding you added | Click its bin. |
| Go on | Click **Continue to** *next step*. |
Your choices save at once. Catalyst uses only the findings you keep.
When Catalyst asks a question, a card opens above the chat box. Pick an option, or type in **Type your own…**, then click **Continue**.
Click **Hide** on a card above the chat box to fold it away. A pill in the chat box opens it again. A dot on the pill means a question waits for your answer.
### Brand and voice
This step shows your logos, colors, fonts, and voice. To add a style reference, type a page address and click **Read page**. Catalyst reads the page's colors and fonts.
### Hooks and angles
The last step builds the story of the page from your findings.
{% columns %}
{% column %}
**Angle**
One reason to buy. Each card shows what shoppers want, what the page promises, who it is for, and its proof.
{% endcolumn %}
{% column %}
**Hook**
An opening line for an angle.
{% endcolumn %}
{% endcolumns %}
Tick the angles and hooks you want. One hook has **Opens the page**. Use a hook's menu to choose another. Click **Suggest more angles** or **More hooks** to get more ideas. Then click **Continue to Sections**.
## The build writes sections, copy, and images
The build has three steps. A panel at the right shows where each step stands.
| Step | What happens |
| ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Sections** | The canvas shows the page's design. Turn off the sections this page does not need. For a section with several parts, choose **Keep as is** or **Write new** for each part. Then click **Write the copy**. |
| **Copy** | Catalyst writes each section from your research. Each row shows **Waiting**, **Drafting**, **Writing**, **Saving**, or **Done**. Open a row to see why Catalyst wrote the section that way. |
| **Images** | Catalyst plans and makes the pictures for the written copy, then places them. Each row shows **Planning**, **Making**, **Placing**, or **Placed**. A picture shows blurred while Catalyst makes it, then sharpens. |
The copy and the images run one after the other with no stop. If a run ends with work left, click **Finish the copy** or **Finish the images**.
Use **Desktop** and **Phone** in the header to see the page at each size.
## Edit the draft by clicking what to change
Click any part of the page: a picture, some words, a value, or a section. Catalyst outlines what you clicked and adds it to the chat box as a pill. Type what to change, or use the tools. The tools show in a bar under what you clicked. On a phone, they show in a row above the chat box.
Click **Select section** to pick the whole section that holds what you clicked. You can also click a row in the build panel. The page moves to that section and picks it.
| You picked | Tools |
| --------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| A picture | **Replace**: **Upload an image**, **Pick from product photos**, or **Make a new one with Catalyst**. **Edit with Catalyst** puts the cursor in the chat box, so you can say what to change. **Alt text** sets what the picture shows, in words. **Crop** and **Adjust** change how it looks. |
| A picture in the product gallery | **Replace**, **Edit with Catalyst**, **Crop**, and **Adjust**. **Move left**, **Move right**, and **Remove** change the gallery. The gallery keeps at least one picture. |
| Words | A format row: font, **Smaller** and **Bigger**, **Bold** and weight, text color from the theme colors, and alignment. **Reset to design** returns to the theme's style. **Edit words** opens the words in a field. **Rewrite** and **Shorten** ask Catalyst to change only those words. |
| A value from your data, such as a price or a rating | The bar names where the value comes from, and links to the screen that changes it: **Change it in the catalog**, **Open reviews**, or **Open in Assets**. The link opens in a new tab. You can change the value's format, but not the value. |
| A whole section | **Edit section**, **Rewrite**, **Shorten**, **New image**, **Move up**, **Move down**, and **Remove**. You cannot remove a section that every page of this type shows. |
When the same style shows in several places, the bar says **Style applies to all** with the count.
To edit a page outside Catalyst, use the Pages editor. See [Edit a page](/pages-studio/pages.md#edit-a-page).
### Crop and adjust a picture
{% tabs %}
{% tab title="Crop" %}
**Crop** opens **Crop image**. Drag the frame, or move it with the arrow keys. Pick a **Shape**: **Free**, **Original**, **Square**, **4:5**, **4:3**, or **16:9**. Use **Zoom** to crop closer. The reset button shows the whole picture again.
{% endtab %}
{% tab title="Adjust" %}
**Adjust** opens **Adjust image**. Change **Brightness**, **Saturation**, **Contrast**, **Gamma**, and **Exposure**, or turn on **Grayscale**. The reset button removes the adjustment.
{% endtab %}
{% endtabs %}
Click **Save** to keep the change. A crop or an adjustment of a gallery picture applies to every gallery picture. The dialog says so. **Crop** and **Adjust** show only for pictures that ShopperOS stores.
### Edit a section in the panel
**Edit section** opens an **Edit** tab beside the transcript. It shows:
* The section's purpose, and its fields. Change a field to change the page.
* Its pictures, each with **Replace**.
* The data it shows, with a link to where each value comes from.
* **Show on the page**. Turn it off to drop the section. A lock means every page of this type shows the section.
* **Layout, spacing and background**. The theme design sets these, so you cannot change them here.
### Each change saves at once
A change from the tools saves at once to the draft. The bar then shows **Saved · Undo**. Click **Undo** to take the last change back. Some changes cannot be taken back, and the bar shows only **Saved**.
{% hint style="warning" %}
A change to the product gallery reaches shoppers at once when the page is published. Catalyst first asks **This page is live**. Click **Save** to go on, or **Cancel** to stop.
{% endhint %}
## Talk to Catalyst, or call it
You can type, listen to replies, or talk in a live voice call.
| Control | What it does |
| ---------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ |
| **Start a voice call** button, beside **Send** | Starts a live voice call. Your browser asks to use your microphone. Catalyst can take the same steps as in a typed chat. |
| **Read aloud**, under a reply | Reads that reply aloud. |
| Stop button, in place of **Send** | Stops the reply in progress. |
### During a voice call
The chat box becomes the call bar. Its line shows **Connecting…**, **Listening…**, **Speaking**, **Working on it…**, or **Speak any time**.
| Control | What it does |
| --------------------- | -------------------------------------------------------------- |
| **Mute** / **Unmute** | Turns your microphone off or on. |
| **Attach sources** | Adds a file, an image, a note, or a link for Catalyst to read. |
| **Type a message** | Opens a box to type in, while the call goes on. |
| **End call** | Ends the call. What you said stays in the chat. |
In a call, Catalyst works the screen with you:
* It moves to the next step only when you ask it to. An edit or a choice does not move the step. "Go on" with no step named only asks Catalyst to keep talking.
* When a step waits for an answer, Catalyst reads you the question and its options.
* In the setup, Catalyst names the choices in words. It keeps your page goal in your own words.
* Catalyst hears what you do on the screen, such as a tick or a click. It does not answer each one.
* When a step fails or stops, Catalyst tells you and asks whether to try again.
* A call that starts before the page exists learns the draft when the research starts.
## Your whole team shares the chats
Every operator of your project can open, continue, rename, and delete the project's chats. Each message shows the name of the operator who sent it, or **You**.
| Where | What you see |
| ----------------- | -------------------------------------------------------------------------- |
| **Chat history** | Each chat, when it last had a message, and who started it. Search by name. |
| **Pages → Agent** | Every chat, with its type: **Page**, **Chat**, or **Voice**. |
Each chat's menu has **Rename**, **Copy link**, and **Delete**. A copied link opens the chat for any operator of the project.
## Catalyst has three settings
Click your name at the foot of the sidebar, then **Settings**.
| Setting | Default | What happens |
| ---------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------ |
| **Manage skills** | — | Opens the instructions Catalyst follows for each page type, with your project's changes. |
| **Read replies aloud** | Off | Reads each reply aloud when it finishes. |
| **Developer mode** | — | Shows technical detail for the team that builds Catalyst. You do not need it to build a page. Your browser remembers it. |
## Publish the page
When the page is ready, publish it from the header. **Publish** waits while Catalyst works or your changes save. A line beside the button says why.
{% stepper %}
{% step %}
### Click Publish
At the end of the header, click **Publish**. **Publish "…"?** names the page and the address shoppers reach it at.
{% endstep %}
{% step %}
### Confirm
In the dialog, click **Publish**. The button shows **Publishing…**, then **Published**.
{% endstep %}
{% step %}
### Open the live page
Click **View live page**. The live page opens.
{% endstep %}
{% endstepper %}
Done. The page is published. It is also in **Pages → Pages**, with its versions. Next, to publish later, preview, or unpublish, see [Publish and go live](/pages-studio/publishing.md).
## What if…?
What if the product already has a live page of the same kind?
The product step says so. A product shows shoppers one such page, so publishing the new page replaces the old one.
What if I pick a look from a staged theme?
The page can go live only after that theme is live. See [Make a theme live](/pages-studio/publishing.md#make-a-theme-live).
What if I change an earlier research step?
A later step shows **Out of date**. Click **Update this step** to read it again, or **Keep as is**.
What if I close the tab while Catalyst works?
Work goes on. Open the chat again to see where it stands.
## Troubleshooting
| Message | What to do |
| --------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- |
| **The catalog search failed. Try again.** | Search for the product again. |
| **The variants did not load. Go back and pick the product again.** | Go back to **Product**, and pick it again. |
| **The goal was not written. Type it, or pick an idea.** | Type the page goal yourself, or click an idea again. |
| **The storefronts of this app did not load, so this step cannot show. Try again soon.** | Wait a moment, then open the setup again. |
| **No storefront of this app renders a product page or an A+ page yet.** | Add a theme with a product page design. See [Add a theme](/pages-studio/pages.md#add-a-theme). |
| **The media service does not serve this image, so it cannot be changed here.** | You cannot crop or adjust this picture. Use **Replace**, or tell Catalyst what to change. |
| **This page is live** | A gallery change reaches shoppers at once. Click **Save** to go on, or **Cancel** to stop. |
| **Allow the microphone to start a voice call.** | Allow the microphone in your browser, then start the call again. |
| **That did not save. Try again.** | Make the change again. |
| **The copy did not finish.** | Click **Finish the copy** to write the rest. |
## Next step
{% content-ref url="/pages/N4TXA3unBM980pw0Zval" %}
[Publish and go live](/pages-studio/publishing.md)
{% endcontent-ref %}
