> 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/publishing.md).

# Publish and go live

Your edits reach shoppers through two acts. **Publish** makes one draft live. **Make live** switches your whole store to another theme. Preview first, then act. Publish pages in **Pages → Pages**. Make a theme live in **Pages → Themes**. Set the address and pixels in the **Publishing** settings, at **Pages → Publishing**.

```mermaid
flowchart LR
    P1["Publish a page"] --> R1["That page"]
    P2["Publish a design"] --> R2["Every page of that type"]
    P3["Publish Site Styles"] --> R3["Every published page"]
    M["Make live"] --> R4["The whole store"]
```

*Notice how far each act reaches. A publish in a staged theme reaches nobody until you make that theme live.*

## Both acts change what shoppers see at once

Both acts are immediate. You do not need to publish anything again afterwards.

| Act           | What it changes                                                        | Where                                                |
| ------------- | ---------------------------------------------------------------------- | ---------------------------------------------------- |
| **Publish**   | Makes the draft of one page, one design, or your **Site Styles** live. | The page list, the page editor, or the theme editor. |
| **Make live** | Switches your whole store to another theme.                            | **Pages → Themes**                                   |

What each publish reaches:

| You publish                                  | Shoppers see the change on                                            |
| -------------------------------------------- | --------------------------------------------------------------------- |
| A **page**                                   | That page.                                                            |
| A **design** for a page type                 | Every page of that type. The pages keep their own words and pictures. |
| **Site Styles** (header, footer, and colors) | Every published page of your store.                                   |

{% hint style="info" %}
A design or **Site Styles** in a staged theme reaches nobody when you publish it. Shoppers see it when you make that theme live.
{% endhint %}

## Publish a page

Publishing a page makes its draft live at the address the dialog names.

**Pages → Pages → actions menu → Publish draft**

1. On **Pages → Pages**, open a draft page's actions menu.
2. Choose **Publish draft**. **Publish this page?** names the address shoppers reach the page at.
3. Click **Publish**.

In the editor, the same **Publish** is in the actions menu, to the right of **Preview**. Its dialog also names the address.

{% hint style="warning" %}
**Items to review.** If the page still holds sample content from its theme, the dialog lists **Items to review**. Replace each item on the page. Or select **Keep as-is** for each item, or **Keep all as-is**, and publish.
{% endhint %}

Done. The page's status changes to <mark style="color:green;">**Published**</mark>. Each publish adds a version to the page's **Versions** tab. Next, open the live page with **View published page** in its actions menu.

### Save a version without publishing

**Save version** in the editor's actions menu saves the draft as a checkpoint. It does not publish. Shoppers see no change.

**Version checkpoints** lists the saved versions. Open a version to view it, restore it into your draft, publish it, or copy a preview link for it. Restoring a version changes your draft only. It does not change what is live.

### Unpublish or archive a page

| Action        | Result                                                                                                             |
| ------------- | ------------------------------------------------------------------------------------------------------------------ |
| **Unpublish** | The page stops serving. The page, its drafts, and its versions stay in ShopperOS. Publish it again to put it back. |
| **Archive**   | A live page is unpublished first. The page then moves to **Archived**.                                             |

## Publish a design or Site Styles

A design publish changes every page of a type. A **Site Styles** publish changes the header, footer, and colors of every page.

{% stepper %}
{% step %}

### Open the theme

On **Pages → Themes**, click **Edit** on a theme. The theme editor opens.
{% endstep %}

{% step %}

### Pick what to change

In the left list, click a page type, or click **Site Styles**. The canvas shows it.
{% endstep %}

{% step %}

### Make your changes

Edit the design, or the **Site Styles**.
{% endstep %}

{% step %}

### Publish

In the actions menu, click **Publish**. The dialog says what the publish reaches.
{% endstep %}
{% endstepper %}

| Dialog text                                                                           | Meaning                                                          |
| ------------------------------------------------------------------------------------- | ---------------------------------------------------------------- |
| **Every page of this type changes now.**                                              | The theme is live. Shoppers see the new design at once.          |
| **This changes the header, footer and colours on every published page of your store** | The theme is live. Shoppers see the new **Site Styles** at once. |
| **This theme is staged.**                                                             | Shoppers see the change only when you make this theme live.      |

**Publish all** publishes every page in the theme that has unpublished edits.

Done. If the theme is live, shoppers see the change now. Next, if the theme is staged, [make it live](#make-a-theme-live).

## Make a theme live

One click switches the whole store to a staged theme.

**Before you start:** preview the staged theme. See [Preview links](#preview-links).

**Pages → Themes → Draft themes → Make live**

{% stepper %}
{% step %}

### Pick the theme

On **Pages → Themes**, under **Draft themes**, click **Make live** on the theme you want. **Make "…" live?** opens.
{% endstep %}

{% step %}

### Confirm

Click **Make live**. Shoppers see the new theme at once.
{% endstep %}
{% endstepper %}

Done. Your published pages keep their own content. They take this theme's page designs, header, footer, and colors. The theme that was live stays in your store, so you can make it live again. Next, if something looks wrong, [undo the theme change](#undo-a-theme-change).

### When a theme cannot go live

ShopperOS checks the theme first. If it is not ready, you see **… can't go live yet**, and nothing changes. The message names what is missing:

| Message                            | What to do                                                                                    |
| ---------------------------------- | --------------------------------------------------------------------------------------------- |
| **It has no page template for …**  | The theme has no design for that page type. Choose another theme, or ask your Stackline team. |
| **It has no published page for …** | Create and publish a page of that type, then try again.                                       |

### Undo a theme change

| Action                             | Where                         | Result                                                                           |
| ---------------------------------- | ----------------------------- | -------------------------------------------------------------------------------- |
| **Make live** on the earlier theme | **Draft themes**              | Your store goes back to the earlier theme.                                       |
| **Roll back to** *N*               | The theme's actions menu      | The theme's designs go back to the version before its last update.               |
| **History**                        | The live theme's actions menu | Lists every install, update, and restore. Click **Restore** on an earlier point. |

## Preview links

A preview shows your storefront as the editor shows it. You see the current draft of each page, design, and **Site Styles**. A save shows on your next page load.

To open a preview:

* In the page list, click a draft's **Draft** pill, or choose **Preview** in its actions menu.
* In the editor, click **Preview**.

The preview opens in a new tab with a bar at the bottom.

| On the bar                                                | What it means                                                                          |
| --------------------------------------------------------- | -------------------------------------------------------------------------------------- |
| Theme name and version                                    | The theme this preview shows.                                                          |
| **Unpublished changes. Sample data may not appear live.** | You are looking at a draft.                                                            |
| **Link expires …**                                        | When this preview link stops working.                                                  |
| **Copy preview link**                                     | Copies the link, so a teammate can review the same preview.                            |
| **Human** / **Machine**                                   | Switches to the page as AI assistants read it. Shows when the page has a machine view. |
| **Minimize to bubble**                                    | Shrinks the bar to a bubble you can move.                                              |
| **Exit preview**                                          | Leaves the preview and shows your live store.                                          |

Click any link in the preview. Each page you open stays in the same preview.

A preview changes only the design and the page content you see. Everything else is real.

{% hint style="danger" %}
Sign-in, the bag, checkout, and orders work as they do on your live store. An order placed in a preview is a real order and a real charge.
{% endhint %}

## Publishing settings set the address and the pixels

**Pages → Publishing** has two tabs: **Domains** and **Tracking**.

### Domains

**Page address** chooses where shoppers open your published pages.

<figure><img src="https://489913050-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FblcXcPwOUg5osGsERflQ%2Fuploads%2Fgit-blob-c4d977a6e3f17900be98ad8b065f578f6ec848c5%2Fpages-publishing-domains.jpg?alt=media" alt="Pages → Publishing → Domains"><figcaption><p>Pages → Publishing → Domains, with the two page address options.</p></figcaption></figure>

| Option               | What it is                                                |
| -------------------- | --------------------------------------------------------- |
| **ShopperOS domain** | A domain we manage. It works with no store.               |
| **Shopify store**    | Your Shopify store, with its cart, checkout, and sign-in. |

When you change the page address, your pages and previews move to the new address. The concierge, checkout, and shopper sign-in move too. This is the same setting as **Main link** in **Settings → Hosting**. To add your own domain, see [Domains and hosting](/pages-studio/hosting.md).

#### Show your pages at the store's product addresses

**Store product pages** shows your product pages at the store's own product address, such as `/products/<handle>`.

**Before you start:** your pages are on your Shopify store. The section shows only then.

**Pages → Publishing → Domains → Store product pages**

{% stepper %}
{% step %}

### Turn it on

Turn on **Store product pages**. ShopperOS syncs your pages to your store.
{% endstep %}

{% step %}

### Check each preview

Each product starts in **Preview**. In its actions menu, choose **Open preview** to check it.
{% endstep %}

{% step %}

### Select the products

Select one or more products, and click **Go live**.
{% endstep %}

{% step %}

### Confirm

Confirm in the dialog. The status changes to <mark style="color:green;">**Live**</mark>.
{% endstep %}
{% endstepper %}

Done. Shoppers see your page at the product address. If a product shows **Sync failed** or **Out of sync**, choose **Re-sync**. Next, [add tracking pixels](#tracking).

| Status                                                  | Meaning                                                                                               |
| ------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
| <mark style="color:orange;">**Preview**</mark>          | Synced, but shoppers still see the store's own product page.                                          |
| <mark style="color:green;">**Live**</mark>              | Shoppers see your page at the product address.                                                        |
| <mark style="color:blue;">**Syncing…**</mark>           | ShopperOS is sending the page to your store.                                                          |
| <mark style="color:orange;">**Out of sync**</mark>      | The store does not have the latest version of this page. Choose **Re-sync**.                          |
| <mark style="color:red;">**Sync failed**</mark>         | The sync did not finish. Choose **Re-sync**.                                                          |
| <mark style="color:orange;">**Template changed**</mark> | Someone changed this product's template in Shopify admin. Choose **Go live** to show your page again. |

**Back to preview** gives the product its earlier template back. Turning off **Store product pages** does this for every product.

### Tracking

**Tracking** connects ad platforms to your pages. Pixels run only on your live pages, and only when the shopper's cookie choice allows it.

**Pages → Publishing → Tracking**

{% stepper %}
{% step %}

### Add a pixel

Click **Add Tracking**.
{% endstep %}

{% step %}

### Choose the platform

Choose the **Platform**: **Meta**, **Google Ads**, **Amazon Ads**, or **The Trade Desk**.
{% endstep %}

{% step %}

### Fill in the fields

Each field says where to find its value.
{% endstep %}

{% step %}

### Save

Click **Save**.
{% endstep %}
{% endstepper %}

Done. The pixel runs on your live pages. Next, choose a **Default cookie consent**.

To remove a pixel, choose **Remove** in its actions menu. To add a pixel to one page only, use **Page pixels** on that page's **Settings** tab.

**Default cookie consent** sets what pixels do before a shopper makes a cookie choice:

| Option                             | Result                                         |
| ---------------------------------- | ---------------------------------------------- |
| **Track by default**               | Pixels track shoppers who have not chosen yet. |
| **Wait until the shopper opts in** | Pixels track only after the shopper opts in.   |

If your site shows its own cookie banner, the shopper's choice there always wins.

## What if…?

<details>

<summary>What if I unpublish a page? Who gets its address?</summary>

For some page types, another published page of the same type can take the address. The dialog tells you what happens to the address.

</details>

<details>

<summary>What if the preview bar says "Preview unavailable. This is the live store."?</summary>

The link has expired or cannot open. You see your live store. Open a new preview from ShopperOS.

</details>

<details>

<summary>What if I place an order in a preview?</summary>

It is a real order and a real charge. Sign-in, the bag, checkout, and orders work as they do on your live store.

</details>

## Troubleshooting

| Message                                                                     | What to do                                                                                             |
| --------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ |
| **Publish first to preview on the storefront**                              | **View published page** needs a published version. Publish the page, or use **Preview** for the draft. |
| **No Pages hosting domain configured**                                      | Set up hosting. See [Domains and hosting](/pages-studio/hosting.md).                                   |
| **Opened a preview at the store product address**                           | The product is still in **Preview**. Go live with it in **Publishing → Domains**.                      |
| **The live theme changed while this page was open**                         | Someone else changed the live theme. Choose to make your theme live anyway, or keep the current one.   |
| **No hosting domain set up yet.**                                           | Click **Open Hosting settings**, and set up hosting.                                                   |
| **Turn off store product pages first.**                                     | Turn off **Store product pages** before you move your pages off your Shopify store.                    |
| **Connect your Shopify store first. Go to Catalog → Sources.**              | Connect your store. See [Connect your Shopify store](/selling-and-checkout/shopify-integration.md).    |
| **Someone else changed hosting. We loaded the latest settings. Try again.** | Choose the page address again.                                                                         |
| **Preview unavailable. This is the live store.**                            | The preview link has expired or cannot open. Open a new preview from ShopperOS.                        |

## Next step

{% content-ref url="/pages/AA1846IUSQFcJvdVaLuk" %}
[Domains and hosting](/pages-studio/hosting.md)
{% endcontent-ref %}