Using the editor

The editor is where you change a page. Your live store opens on the right, your changes are listed on the left, and nothing reaches visitors until you save and publish.

The store preview

The right side shows your real store, with your unsaved changes applied as you type.

• Select lets you click an element to change it. Browse lets you click through the store normally, to reach the page you want.
• The page bar shows which page you are on. Use it to open another page.
• Use the desktop and mobile icons above the preview (Desktop width, Mobile width) to check both.

If the preview shows This preview link expired, choose Reconnect.

Make a change

The fastest way: in Select, click the element on your store. Proa creates the change for it, with what to change and where already filled in, and shows how many elements on the page it matches.

You can also choose Add edit and pick the element afterwards with Pick.

Each change has a type:

| Type | What it does | |---|---| | Text | Replaces the element's text and keeps the theme's styling. Turn on Find & replace to change one phrase and leave the rest | | Image | Swaps an image | | Hide | Keeps the element on the page but does not show it. Use this rather than Remove unless removal is the point | | Remove | Takes the element out of the page | | Attributes | Changes a property of the element, such as where a button links to | | HTML | Replaces the element, or adds new content before, after or inside it. Needs HTML | | CSS only | Changes styling with CSS. Needs CSS |

A new change starts as HTML. Switch the type to Text or Image for changes that need no code.

If a change should apply to every matching element (every product card, for example), turn on Apply to all matches.

If the theme redraws an area after the page loads (swatches, carousels) and your change disappears, turn on Keep this edit if the page redraws. Do not use it on elements that change when a visitor clicks them, such as a thumbnail swapping into the main image: it would undo the visitor's click.

Bring in a section from Studio

Import from Studio turns a section designed in Proa Studio into a change on this page. Choose where it goes, then save.

Studio is opening to brand accounts; until then, your Proa team can prepare sections for you.

Styling for the whole version

Global CSS applies styling on every page where this version runs, even where no change finds its element. Write specific selectors so it only touches what you mean.

Save

Choose Save version. The saved version becomes the active one, and Undo and Redo work until you leave. Saving does not publish. Your changes reach visitors only when you publish. See Preview, publish, and roll back.

Share a preview

On the customization's page, under the version, choose New link to share a preview with your team or your client. A link shows the version as it was when you made it, and is marked Outdated once you save again, so make a new one after changes. Links last seven days by default. You can choose a shorter time when you create one.