Skip to content
Browse the guides

Edit pages

Using the visual editor

Everything you change on your website happens here. Tell Mirin what you want in Chat, or open a section and edit it by hand, and the page beside you follows. Preview it at any size, then publish when it looks right.

On this page

Move around your workspace

Navigation sits beside your work and stays out of the way until you need it.

Content

  • Pages
  • Redirects
  • Content Lists
  • Design Library

Media

Leads

  • Chat2
  • Forms
  • Contacts

Insights

Settings

Navigation pinned beside the work. Click the Mirin mark to put it away, then hover the mark to open navigation over your work without moving it. The website selector switches websites.

Hover over the Mirin mark to open navigation without moving your work. Click the mark to keep navigation open beside your workspace. The Mirin name appears above the website selector while navigation is pinned open, and clicking the brand control again collapses it. Your choice carries between pages and survives a refresh when browser storage is available.

  • Content. Groups page tools, reusable components and Media: Pages, Redirects, Content Lists and the Design Library. Pages opens page management inside the builder.
  • Leads. Contains Chat, Forms and Contacts when available. Chat shows unread visitor messages.
  • Insights. Holds analytics for your website, sales, email and chat.
  • The website selector. At the top, showing the site icon or an initial when there is none. Select it to search and switch websites; opening it again keeps loaded icons in place. Website settings and Plan & billing live in that menu. My websites, then Continue editing, resumes your last available page on this device.
  • Your name. At the bottom, opening your account menu: Profile, permitted team controls, Mirin Support, help and sign out. A separate indicator there shows unread support replies.

The same navigation is available in the page builder, Redirects and Content Lists. Content links stay visible, longer categories expand inside the column, and the current destination has a filled highlight. Navigation uses neutral colors so your website and editing controls remain the focus, in both Light and Dark appearance. Use Tab to move between controls, Enter to open a destination, and Escape to dismiss a temporary menu.

In a guest preview

A guest preview uses the same navigation layout. Homepage returns to the draft, and Plans and pricing in the website menu opens the available hosting plans. The Guest menu at the bottom contains email verification and support access. Destinations that need a verified account or hosting plan explain that requirement when selected.

The editor layout

The editor places controls on the left and your live preview on the right.

1Salt & Stone Pilates
2
5
Draft saved
8Homepagesaltandstone.example.com
Salt & Stone PilatesBook a session

Private sessions

One on one,
at your pace.

Fifty five minutes with an instructor who knows your body and your goals, in a quiet studio by the harbor.

  • Studio session55 minutes · one on one
    $150
  • Duet session55 minutes · two people
    $90
  • Intro session45 minutes · first visit
    $60
Studio hours · Monday to Saturday12 Harbor Street
  1. Website menu, your site's name; open it to switch designs or websites.
  2. Chat and Sections, the left panel: talk to Mirin, or edit by hand.
  3. History, saved versions of this page, in the left panel.
  4. Expand preview, hides the editing panel until you bring it back.
  5. Preview, Design and Settings, the page, then your site's design, then this page's settings.
  6. Undo and Redo, the last change, with a tooltip naming it.
  7. Publish, makes the draft live. The state beside it tells you where you stand.
  8. Page name and device sizes, above the preview, with the site's address.
Every control in this picture works. Switch Chat and Sections, open a section and change a field, open History and preview a saved version, undo the chat’s change, change the preview size, publish.

On narrow screens the controls open over the preview instead of squeezing it into a smaller column, and the dashboard starts with those controls tucked away on phones. The dashboard remembers your rail width, expanded preview and device size when browser storage is available. Phone panel visibility is remembered separately from your desktop layout.

Above the preview

The current page name opens a searchable menu with an Editing row and foldable groups. Recent starts open; Pages and Repeating pages start folded after a refresh. Closing and reopening the menu keeps your fold choices. Find a page by name or path, then select it or press Enter. Arrow keys move through visible rows. Escape steps back from a full list before closing the menu. Manage pages opens the Pages panel, even with one page. The nearby controls change device size, refresh the preview, or open it in a new tab.

Pages sits beside Chat and Sections. Search, add a page, or open another page while keeping your preview in place. Expand the manager for status, update details, cache controls and bulk actions. Opening and closing it preserves your current editor and unfinished chat message. Switching pages saves current work first. If saving fails, stay on the page and retry. The Manage pages guide covers the rest.

When you switch pages in the dashboard, navigation, the website menu, toolbar, chat composer and preview frame stay in place while the selected page loads. Page controls pause until it is ready. The previous page’s unsent chat text, selected references and attachments clear so they cannot carry into another page. The address updates to the selected page, so you can open it directly or use your browser’s Back and Forward buttons.

Website name and design drafts

Your website name stays above Chat and Sections. Open that menu to see the current page’s designs. The website selector inside navigation changes the website itself. New draft saves your current work and makes an editable copy. Rename a draft with its pencil button, or select another draft to return to it. The checkmark identifies the design you are editing.

10Designs per page

Longer lists scroll inside the menu.

5Drafts before search appears

Search appears once you have more than five drafts.

  • Credits. Copying a design uses no AI credits. AI changes still use the website’s existing allowance, shared across all drafts.
  • What a design keeps. Each design keeps its own sections and content. Page settings, site styling and reusable component definitions remain shared.
  • Your live website. Switching does not publish a design or change the live website.
  • Saving. Finish an AI edit before switching. If another tab has changed the active draft, Mirin refuses an older save rather than overwriting it.
  • Guest drafts. They remain separate from the account’s website until email verification, which preserves your designs and opens the selected one in your account.

Open the website in a new tab

Use the external arrow beside the page name. In a guest homepage, Mirin saves your current draft first and opens it on hosting without publishing or asking you to sign in. Keep the builder open to continue editing.

15 minutesA guest viewing link

If it expires, open a fresh preview from the builder.

1 dayA private preview tab

Refreshing that tab keeps the same preview. Open a new one to see later edits.

After verifying your email, Homepage, refresh and the external arrow remain available. Before activation, the external arrow opens your current content and design, including unsaved edits, in a private preview tab. This preview does not publish your website, and its address cannot be shared with another browser.

While the editor loads

When opening or refreshing the dashboard builder, the loading view reserves your saved navigation and rail layout from the first render. Header placeholders reserve space for the editing tools and page controls. Chat’s conversation graphic eases in and out while messages load. The preview has its own loading indicator, with its complete outline visible throughout. Each area becomes ready independently. If a page fails to load, the frame shows its recovery controls and chat explains that the conversation is unavailable. Reduced motion preferences remove the fades and keep loading graphics still.

If a page has been removed, Back to pages opens your website’s page list so you can choose another page. A confirmed missing page leaves Recent. Opening the page list also clears remembered pages that no longer exist.

Pages built from a Content List

A dynamic page uses one design for every record in a Content List.

Pages/Instructor/instructors/[slug]
A smiling woman with shoulder length brown hair and a cream sweater, seated in an armchair beside shelves and plants.

Reformer and prenatal

Juniper Hale

Juniper has taught reformer for eleven years and leads the Saturday prenatal series. Expect clear cues, steady pacing and plenty of encouragement.

Book with Juniper

Classes with Juniper

  • Tuesday7:00 AMReformer foundations
  • Thursday6:00 PMReformer flow
  • Saturday9:00 AMPrenatal reformer
One design, one record at a time. Choose an instructor, edit a bound value and watch the page follow, or start a new record from the page.

The toolbar names the connected list, shows the selected record, and keeps Manage all and New record close by.

Choose a record
The canvas and the selected component inspector update together.
Edit inside the component
Bound record values appear before template settings. Unsaved values stay private until you save.
Create from the page
New starts a local draft. Mirin creates the record only after you confirm Create.
Manage the list
Manage all opens the list itself. The Content Lists guide explains fields, records and record pages.

Working with sections

Add a section, edit its content, and use the preview toolbar to point at exactly what you want to change.

HomepagePreview
Salt & Stone PilatesClassesPrivateStudioBook a session

Private sessions

One on one, at your pace.

Fifty five minutes with an instructor who knows your body and your goals, in a quiet studio by the harbor.

  • Studio session55 minutes · one on one
    $150
  • Duet session55 minutes · two people
    $90

No tool is on. The page behaves like your website.

Ask Mirin...

The preview toolbar, working. Turn on Select elements and click the heading, edit text in place, draw an area for your next request, or place a comment pin and read it in the drawer.
Select elements
Outlines what you point at, names it in plain language, and adds it as a reference above your next chat message.
Edit text inline
Highlights text you can change directly on the page. Type in place, then click away to save.
Draw annotation
Marks an area of the page so your next AI request knows exactly where you mean.
Place comment pin
Pins a private note to a spot on the draft. Pins never appear on your published website.

Adding sections

Choose Add section in Sections to open the Design Library. Search installed and custom designs, preview one, then confirm insertion.

Editing content

Click any section to select it. The property panel displays all editable fields.

  1. Select a sectionClick it on the page.
  2. Edit its fieldsThe property panel shows everything you can change.
  3. It saves itselfChanges auto save on activated sites.
  4. PublishVisitors see the change once you publish the page.

Manual changes use no AI credits.

In a guest homepage

Section edits, page titles, search metadata and site design live in an isolated draft in the same browser until the trial expires. Page settings and site design are shared across that guest’s named designs. The homepage address remains at /. You can reuse images already in the homepage; uploading new files requires a verified account. Choose Explore plans and pricing above the account menu in navigation to explore hosting plans and verify your email when you are ready to keep the website in your account. Previewing does not publish it.

Selecting a section on the canvas

The floating preview toolbar starts with no tool selected, so the preview behaves like your website. Click a tool to turn it on, then click it again to turn it off.

Choose Select elements to see an outline and a plain language label beside your pointer. Section identifies a whole section, Group identifies a layout group inside it, and Heading, Button, Image and Link identify specific elements. Click a target to add a removable reference above your chat message.

4References per message

Shift click adds more, up to four. Removing one excludes it from your next request.

0AI credits for manual edits

Editing by hand, and posting comments, never uses your allowance.

Use Sections to reorder, duplicate or delete a section. Opening a card in Sections still reveals that section in the preview.

The Sections outline

Sections is one compact outline of your page. Numbered rows show their position, an icon, and their editable content, such as text, images or a service list. Shared sections carry a Shared label.

On desktop, a drag handle appears when you hover, focus or select a section. Touch devices keep handles visible. Move up and Move down are also available in section actions. Open a row to edit it inline. Sections, Design and Settings share dark input surfaces and a clear focus border to show where you can type. Property groups sit inside the selected section.

Find a section
The pinned search field matches a name, a page number, or Shared status. Numbers keep their original page positions while filtering.
Collapse
The button at the bottom closes the selected section’s fields without changing your edits.
Add section
Stays available at the top of the list.
Page actions
Sits beside Add section and contains Save as template. Guests are asked to verify their account before saving a reusable template.

Clear the search to reorder or insert between rows. Filtering preserves open fields, and selecting a hidden section from the preview clears the search to reveal it.

Some sections render nothing until a visitor triggers them, such as a cart drawer or a cookie banner. Selecting one of those tells you it has no visible area on this page and still gives you its actions.

Links to collections and pages

A link field has Choose beside it. It lists your store’s collections, each with how many products it holds, followed by your pages. Search, pick one, and the address fills in. You can still type any address yourself. Under a collection link, the editor names the collection it opens and warns you when that collection is empty or no longer exists, so a menu never sends shoppers to an empty shelf. Fields a theme sets up for collections, such as menu dropdown links, list only collections.

Save as template

Save as template captures the current design, including unsaved section edits, with the page title as its suggested name. Add an optional description and choose whether shared sections stay linked. Saving a starter does not save or publish this page. Find it in Design Library, under Templates, or in the New page browser. Use template asks for a fresh page identity before opening a draft. To improve the starter itself, choose Template actions, then Edit design, in the Design Library. Save template changes future uses while existing pages keep their layouts.

Edit text inline

Edit text inline highlights text that can be edited directly on the page. Click the words in a heading, paragraph, or button label. Images, layout containers and empty padding do not enter text editing. Clicking a heading outlines the whole heading, including its lines and emphasized words. Type in place, then click away or press Enter to save. There is no separate Save panel. Escape cancels the current edit. Undo works while you type, and the header Undo restores a saved edit. Existing line breaks and emphasis stay intact. Shared sections, connected values and ambiguous text stay in Sections so the right data is edited.

Draw annotation

Draw annotation marks an area for your next AI request. Your message includes the area’s location, its section, and nearby text or image descriptions so you can explain what should change there. Selected elements include their type and text. Nothing is sent or charged until you press Send. References appear as compact chips above your message. Click a chip to inspect its full text and note, or remove it with its X. Clicking empty space inside the composer focuses the message box. Removing a reference also removes its canvas mark. Switching drafts clears references so they do not apply to a different design.

Pinned draft discussions

Comments let you leave notes on a draft without changing it. Saved comments stay private to that draft and remain available after reloading.

Place a pin
Choose Place comment pin, click a spot, write a note and choose Post. The plus pin is temporary until you post.
Read and reply
Click a numbered pin or a list item. Chat remains available while you read.
Resolve
Resolve completed discussions, then find them under Resolved. Replying to a resolved discussion reopens it.
Use in chat
Adds the discussion’s target and latest message to your AI composer without hiding it or sending a request.

Clicking away, dismissing the form, or leaving the pin tool removes an unposted note. Open Comments beside the Preview, Design and Settings controls to review discussions in a drawer at the right edge of the preview, including on an empty page. Add a section before placing a new pin. The discussion’s author can delete it after confirmation. If its section is removed, the discussion remains in the list with a notice. Comments update periodically while the drawer or pin tool is open; Refresh comments checks immediately.

Guests keep private discussions within their trial, and email verification transfers them with their named drafts. A new copied draft starts with no discussions. Post before changing drafts or reloading. Closing the review drawer keeps unfinished replies in the current editing session. If saving fails, your text is kept so you can retry. Escape closes the drawer and returns focus to Comments.

The toolbar itself

Hover over a toolbar icon or focus it with the keyboard to see its label. Editable text uses a text cursor and the same dotted outline before and after clicking. While you edit, hovering over other editable text shows where you can move next. Your current edit stays active until you click elsewhere. Selecting an element for chat uses a solid outline.

  • Dock it. Drag the toolbar handle toward the left, right or bottom of the preview. You can also focus the handle and use arrow keys, or choose an edge diagram in Toolbar options. The highlighted diagram shows the current position.
  • Minimize. Turns off the active tool and tucks a small Show preview tools tab against that edge. Reopening restores the toolbar to the same position with no tool active.
  • Toolbar appearance. Choose Match app, Light, or Dark to keep the floating controls readable against your website. This changes the toolbar, its hints and its options menu without changing your workspace or website colors.

Escape leaves the current tool while keeping references available in the composer. The appearance choice stays with this page in the current browser tab after a refresh, including while the toolbar is minimized. Change the rest of Mirin under Appearance in your account menu. In a guest preview, external links open separately so your draft stays open. Forms cannot submit from that preview. Use the page picker or hosted preview for other pages.

Tablet and mobile previews

  • Smaller screens. Tablet and mobile previews sit centered on a gray canvas, with the page scrolling inside its frame. Device changes resize the same preview without reloading it. Reduced motion follows your system preference, and your open section fields stay available while switching tools.

Reordering and quick actions

  • Move. Drag the visible handle, or open the section’s actions menu and choose Move up or Move down. Within a list such as services, use the labeled move buttons.
  • Duplicate. Creates a copy with all settings.
  • Delete. Also in the section’s actions menu.
  • Shared sections. Show a lock in place of the drag handle.

A newly added list item opens for editing, and an open item stays open when you move it.

Build from your catalog

On a site with a store, a products section can fill itself from your catalog instead of a list you keep by hand. The canvas shows the same products your live page will.

  1. Select the sectionAny section that shows products.
  2. Open ProductsIts setting in the property panel.
  3. Choose the sourceUnder Show: all products, a collection, a word, a tag or a price range.
  4. PublishThe live page keeps the list current.

The Products guide has a working Products setting to try.

Order
Best selling, Newest, Price, low to high, Price, high to low, or Collection order for a collection.
How many
Show 4 up to Show 24. When fewer match, the setting says how many it can show.
Only products in stock
On by default, so sold out products leave the section.
Live
Updates within a few minutes of a sale, with nothing to republish.
  • Pin these products. Turns what the section shows today into a fixed list you reorder by hand. Make live again brings back the live settings it had before.
  • Nothing to show. When a collection is deleted or everything in it sells out, the section is hidden on your live page. The Products setting says why and offers a fix, such as Show all products instead or Repair this section.
  • Flagged before it matters. Your pages list marks a page with a hidden section, and the Publish panel names the section and says why before you publish.

If your store cannot be read

Published pages keep showing the last products each section had, so visitors never see a gap. The setting in the editor says it could not load your products just now and offers Try again.

Store pages show your own store

Your Product page, your Collection page and Checkout are filled in the editor the way your live site fills them. You design around a real product with its picture, price and stock, a real collection with its products and filters, and your real checkout form, never placeholder values. Nothing from your store is saved into the page. It is laid over the page only while it is drawn.

  • Choose what you design with. The page switcher above the preview lists your products under Product page and your collections under Collection page. Choose one and the page is shown with it. The choice is remembered in the browser you are using.
  • The address follows. The address above the preview, and Open this page in a new tab, use the real address of what is on screen, such as /products/bordeaux-rouge-2021.
  • Checkout gets a sample cart. It holds at least one product from your store, with your real delivery options, rates and tax.

Shop your store in Preview

In Preview, your store pages work the way they do on your live site, so you can walk from a product to the cart to checkout before you publish.

  • Shop in Preview. Add a product to the cart, open the cart, change quantities and go on to checkout, the way a shopper does. One cart follows you from page to page.
  • Links stay in the editor. A link to one of your site’s own pages opens that page in the editor. A product card opens your Product page with that product, and a collection link opens your Collection page with that collection. A link to anywhere else opens your live site in a new tab.
  • Nothing can be paid for. Any cart that begins in the editor is a sample cart. Press Pay and your store answers: “This is the page builder, so nothing can be paid for here. Open your live site to place a real order.”

Your storefront has a working page switcher to try, with a product page, a collection page, a cart and checkout.

Design Library

The Design Library is where you choose the section to add to a page.

The Design Library: search and filter designs, open one to see its fields at three widths, or turn to the sections already shared on this website.

Choose Add section at the top of Sections, or use the insertion button between sections, to open it. Preview a design, inspect its fields, and confirm Add section. Browsing does not change the page.

Components
Installed and custom designs, with search, source and category filters, and previews at three device widths.
Shared
Sections you have already shared, ready to drop onto this page.

The Design Library guide covers templates, usage and management outside the editor.

Shared sections

A shared section is one section shown on many pages, with the same content on all of them. It is what site chrome is for: header, navigation, footer, cookie banner.

Edited onceSite headerShared · 3 pagesThe same on every pageHomepageServicesContact
A shared section is edited once and shown, with the same content, on every page that carries it.
Create
Open the section’s Settings in the section list and turn on Shared component.
Manage
Website, then Design Library, then Shared shows the linked pages. Manage keeps replacement, deletion and history controls.
Give one page its own copy
Turn Shared component off on that page’s section and press Save. That page keeps the wording it has and stops following the shared version.

Page settings

Page settings applies to the page you are on. Configure its search and sharing details through Settings above the right workspace. In compact windows, find it under More.

Page settingsApplies to Private sessions
Page details

Name this page and choose its address.

Page settings for one page: choose a category, change a field, and watch the search result and link preview follow.
Traffic
Who visits this page, how long they stay and where they came from.
Page details
Its title and URL.
Search
Its description and search visibility.
Social sharing
Its image and link preview.
Advanced
Canonical URLs and schema type.
Content
Appears when this page supports a Content List connection or record metadata.

Design remains the place for website wide defaults. Switching categories preserves your fields and scroll position. Refresh restores your selected category. Image actions stay visible, and blank sharing text uses the page title and search description. Search and sharing previews illustrate your metadata; the destination service may display it differently. Return to the canvas with Preview.

FieldNeededWhat it does
Page titleRequiredAppears in the browser tab and as the clickable headline in search results. Keep it under 60 characters for best display.
Page addressRequiredThe page path after your domain. Use lowercase letters, numbers and hyphens only, for example /about-us.
Search descriptionRecommendedThe summary shown below your title in search results. Aim for 150 to 160 characters to avoid truncation.
Featured imageOptionalThe preview image when your page is shared on social media. Recommended size: 1200 by 630 pixels.
Show in search resultsOn by defaultRequests whether search engines should list this page. Preventing indexing does not make a page private. Anyone with its URL can still visit it.

See how a page is doing

Every page has its own numbers, in its own Settings. Open Settings and Traffic is the first thing you see, so you can tell whether anybody reads the page you are working on without leaving it. If you last used another category on this page, Settings reopens there instead; Traffic is always the first item in the list.

Traffic for one page, with sample visitors. Choose 7, 30 or 90 days, and rest on a bar to read that day.
Visitors
How many different people opened this page in the period, and whether that is up or down on the period before.
Time on page
How long people stay, on average. Longer than your site average usually means the page is being read.
Left without clicking
The share of people who arrived on this page and left without opening anything else. Lower is better for a page meant to lead somewhere.

Each number sits beside your website’s own average, because 37% means nothing by itself. Under them is one bar for each day, including the days nobody came, then where visitors came from: Search, Direct (they typed the address or used a bookmark), Social, and Other sites that link to you. A page that opens for each entry of a content list also names the entries people visit most.

A page that has not been published says so, since nobody can reach it yet. That is different from a live page nobody has found, and from a quiet fortnight on a page that used to be busy, and the section tells the three apart. Days follow your website’s reporting time zone, the same one Insights uses. Open in Insights takes you to the full report for the whole website.

See the Google searches that show a page

Open Settings, then Search. When Google Search Console is connected and your website is chosen on its row in Connectors, the On Google card at the top lists the searches that showed this page over the last four weeks, right above the title and description that decide whether people click.

  • Shown and clicked. How many times Google showed this page and how many people clicked, then each search with its clicks, times shown and average place in the results.
  • A search your title misses. When the search that brings the most visitors uses words your title and description don’t, the card says so, so you can work them in.
  • Seen but rarely clicked. A search that showed the page 20 times or more and was rarely clicked is named too: a title that answers it may earn more clicks.

Google settles its numbers about three days late, so the four weeks end three days ago, and Mirin keeps the answer for a day. Without Search Console the card says how to connect it, with a button that opens Connectors. See connecting your Google apps.

Social sharing defaults

When someone shares a link to your site on social media or in a messaging app, a preview card appears with an image and your site name.

saltandstone.example.comSalt & Stone PilatesPrivate Pilates sessions by the harbor. Fifty five minutes with an instructor who knows your goals.
How a link to your website looks when someone shares it in a message or a feed.

Set the defaults once in Design under Social sharing, and every page is covered. Pages with their own Featured image use that instead.

Default share image
The image shown for any page that has no Featured image of its own. Recommended size: 1200 by 630 pixels. Without it, pages with no Featured image share with no preview image at all.
Twitter/X handle
Credits your account on Twitter/X link cards so shares point back to you. Enter just the handle without the @. Leave it blank if you do not have an account.

Pick a default image that represents your whole business, like your storefront or your logo on a photo background.

Keyboard shortcuts

These work while the editor has focus. Undo and Redo also sit in the top bar, with a tooltip naming the change each one will affect.

ActionMacWindows and Linux
Save⌘SCtrlS
Undo⌘ZCtrlZ
Redo⇧⌘ZCtrl⇧Z
Duplicate the selected section⌘DCtrlD
Move the selected section up⌘↑Ctrl↑
Move the selected section down⌘↓Ctrl↓
Delete the selected sectionDeleteDelete
Deselect, or leave the current toolEscEsc
  • Escape also leaves the current tool on the preview toolbar without clearing the references you have gathered.

Common questions

Do manual edits use AI credits?
No. Editing a section by hand uses no AI credits, and copying a design uses none either. AI changes use the website’s existing allowance, which is shared across all drafts.
Do draft comments appear on my published website?
No. Saved comments stay private to that draft. They never appear on your published website, change your page content, or use an AI credit.
Does restoring an earlier version change my live website?
No. Restore replaces the content and page settings of your draft. Published content stays unchanged until you publish the restored draft.
Does switching to another design draft publish it?
No. Switching does not publish a design or change the live website, and each design keeps its own sections and content.
Does previewing a design in the Design Library change my page?
No. Browsing and previewing never change the page. Nothing is added until you confirm Add section.