---
title: Edit content, pages, and media
description: Navigate to a storefront page, update visible content or images, and save the result.
---

**Entry path:** Workspace → select a store → **Storefront** → open the target storefront page → **Design Mode** → select an element

![Runner storefront preview and controls](https://ixft9x6szo.ufs.sh/f/Cc8uxBgAYTzgzyPnD9dvQbMAZ2hlg7w6ye8S5vnLIHkGPOqr)

## What this covers

Open the exact storefront page you want to change, edit one supported text, layout, or media element, and verify the saved result before publishing.

## Why and when to use this workflow

Use this workflow for page-level polish: correct copy, change typography, adjust spacing, replace a photo, generate an alternative image, or remove an unnecessary element. It keeps the target page and the selected element clear.

For changes to navigation behavior, product data, checkout, or several pages at once, send a regular request to Runner instead of relying only on the visual controls.

## Availability and prerequisites

- [Use Design Mode](./design-mode) covers how to open the editor, the desktop-layout requirement, and when the control is unavailable.
- Some generated or dynamic elements cannot be edited inline. Runner shows fewer controls for those elements.
- AI image generation can use credits. Runner shows the applicable notice in the image panel before you run it.

## Open the page and editor

1. Open your project and select **Storefront**.
2. In normal Preview, select storefront links to reach the page you want.
3. If you know the route, select the path field, enter a same-site path such as `/about`, and press **Enter**.
4. Confirm the correct page is visible.
5. Select **Design Mode**, then select the target element.

## Media controls

[Use Design Mode](./design-mode) documents the shared **Ask Runner AI**, **Spacing**, **Text**, **Delete Element**, **Undo**, **Redo**, and **Save** controls. The controls below appear only when the selected element supports media.

| Control | What it changes | What happens when you use it |
| --- | --- | --- |
| **Image → Upload** | A selected image or supported background image. | Select **Upload Image**, choose an image file, and Runner replaces the selected media after upload succeeds. The current limit shown by the product is 5 MB per image. |
| **Image → AI-generated** | A generated replacement image. | Enter a prompt and select **Run It**. After the first result, **Run Again** requests another result and **History** opens results from this editing session. |
| **History** | Generated images from the current image-editing session. | Select an item to inspect it. **Restore this version** applies that image and its prompt; the download icon downloads an individual result. |

## Edit one page safely

1. Record the current page path so you can return to it.
2. Select the element and check which controls appear. Controls vary by element.
3. Make one change at a time, then use **Undo**, **Redo**, or image **History** to compare the result before you select **Save**.
4. Wait for the chosen save or Runner request to finish.
5. Close Design Mode, reopen the page, and review it in **PC**, **Pad**, and **Phone** layouts.
6. Repeat for the next page only after the first page is correct.

## States, limits, and troubleshooting

| What you see | Meaning | What to do |
| --- | --- | --- |
| A selected element has only some controls | Runner exposes controls supported by that element. | Use the available control or ask Runner in chat for a broader change. |
| Upload rejected | The file is missing, is not an image, exceeds the displayed limit, or the upload failed. | Choose another image and try again. |
| **Generating…** | Runner is creating the requested image. | Keep the panel open until it finishes or reports failure. |
| **History** is absent | No AI-generated image exists in this editing session yet. | Generate the first image, or upload your own instead. |
| The route does not open | The path is invalid, external, or not part of the preview. | Return to `/`, use a visible storefront link, or ask Runner to create or repair the page. |
| The saved page differs on mobile | The edit affected a responsive layout. | Reopen Design Mode or ask Runner for a device-specific correction before publishing. |

## Related guides

- [Use Design Mode](./design-mode)
- [Preview your store](./preview-your-store)
- [Publish and republish](./publish-and-republish)