Edit content, pages, and media
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
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 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
- Open your project and select Storefront.
- In normal Preview, select storefront links to reach the page you want.
- If you know the route, select the path field, enter a same-site path such as
/about, and press Enter. - Confirm the correct page is visible.
- Select Design Mode, then select the target element.
Media controls
Use 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
- Record the current page path so you can return to it.
- Select the element and check which controls appear. Controls vary by element.
- Make one change at a time, then use Undo, Redo, or image History to compare the result before you select Save.
- Wait for the chosen save or Runner request to finish.
- Close Design Mode, reopen the page, and review it in PC, Pad, and Phone layouts.
- 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. |