The Editor ​

The Lynx editor is where you design the pages of your store. It shows a live preview of the store on the right and the structure of the page on the left. Every change shows in the preview straight away, and nothing reaches shoppers until you press Save.

To open it, go to Lynx › Designs and choose Build on the design you want to edit.

The top bar ​

From left to right, the bar along the top holds:

• Exit: back to the Magento admin, after asking you to confirm, since unsaved changes are lost.
• Hide panel: hides the left panel to give the preview the full width.
• Undo and Redo: step back and forward through your changes. The keyboard shortcuts are Ctrl+Z for undo and Ctrl+Shift+Z or Ctrl+Y for redo (Cmd instead of Ctrl on a Mac).
• The name of the design you are editing, or of the CMS page or category when you design its content.
• Store view: the store view used for the preview, so you see its language, currency and products.
• Page: the page you are editing. Home page and 404 page come first, followed by the groups Products (one page per product type), Catalog (category, search and compare products pages), Account, Orders, Checkout (cart, checkout and order result pages) and Other (contact us, stock alert unsubscribe). The list can be searched. Pages marked (Sample) are previewed with sample data, see Pages previewed with sample data.
• Desktop, Tablet and Mobile: the width of the preview.
• Show all outlines: draws a frame around every component in the preview, so you can see how the page is built.
• Open preview in new tab: opens the saved version of the design in a separate browser tab.
• Share preview: creates a password-protected link for people without admin access. See Share a preview.
• More tools: export or import the page layout as a file, or copy the page from another design.
• Save: publishes your changes to the store.

The outline ​

The Outline on the left is the map of the page. It is divided into four zones, and every component of the page lives in one of them:

Because the Header, Footer and Backstage are shared, a change you make to them on one page shows on every page.

Working with components ​

The rail on the far left switches between Outline, the components of the page, and Settings, the design settings. The Outline lists the components of the page as a tree. A component that holds other components, such as a Group or a Column, can be expanded to show what is inside it.

• Select a component by clicking it in the outline. The preview scrolls to it and draws a frame around it.
• Open its settings by double-clicking it. The settings panel lists everything you can change for that component. Hover the question mark next to a setting to read what it does. Settings that do not apply to the current choice stay hidden, such as Card Alignment of the Cookie Consent, which only appears for the Card style. Save at the bottom of the panel applies your changes to the page; the Save button in the top bar then publishes them.
• Rename a component in the settings panel to make the outline easier to read. Leave the name empty to go back to the original name.
• Move a component by dragging it to a new place in the outline, including into or out of another component.
• Hide a component with the eye icon. A hidden component stays in the outline but does not show on the store.
• Remove a component with the remove icon. You are asked to confirm first.
• Component not available: this red label marks a component whose extension has been disabled or removed. The store skips it, so it shows nothing to shoppers. Enable the extension again, or remove the component from the page.

Adding a component ​

Choose Add component at the bottom of a zone, or the add button inside a component such as a Group or Column, to open the component picker. Components are grouped into categories such as Layout, Text, Media, Form and Product List. Search by name across all categories, or browse them, then pick a component to insert it.

You can also add components from the preview:

• Add before and Add after: a selected component shows a + button at each end, above and below it, or at its sides when it sits in a row. It opens the picker and inserts the new component right there.
• Empty slots: with Show all outlines on, the empty slots of components such as a Group or a Column are framed in the preview. Click one to open the picker for that slot.

The label of the selected component shows the components around it, such as Row › Column › Image. Click a name in it to select that parent.

The picker only offers components that work in that place. For example, the checkout form is only offered on the checkout page, and header components are only offered in the header. Some components have slots that accept only one kind of component, and some allow each component only once; see Where a component can go.

Images ​

Image settings open the media gallery. Pick an image, search by name, upload a new one or drop a file onto the gallery, and create a folder with New folder to keep your images organized. Edit crops, rotates or flips the chosen image and saves the result as a new JPEG or PNG file. Images can be uploaded as JPEG or PNG. Uploading and creating folders follow the media gallery permissions of the admin role: without them, the upload, edit and folder buttons are hidden and images can only be picked from the gallery.

Pages from a parent design ​

A design can take pages from its parent designs, as a copy made with Duplicate does from the original. Such a page opens in the editor like any other. When you save, the page you are editing becomes the design's own, together with the shared Header, Footer and Backstage, and later changes to them in the parent no longer reach the design. To make one of them follow the parent again, delete its row from the design's Layouts list.

Pages previewed with sample data ​

Some pages normally show only in a certain situation: the order confirmation needs an order that was just placed, the account pages need a signed-in customer, and the sign-in page sends signed-in customers to their account. To let you design them anyway, the editor previews these pages with sample data, such as a sample customer, sample orders, addresses, wish list items and a stored card. They are marked (Sample) in the Page list:

• Order success and Order failure
• PayPal review
• Compare products, with sample products from your catalog
• Stock alert unsubscribe
• Every Account page: sign in, create account, forgot and reset password, logout success, login as customer, dashboard, account information, address book and address form, downloadable products, newsletter subscriptions, wish list and stored payment methods
• Every Orders page: my orders, order detail with its invoices, shipments and refunds, Orders and Returns, and the guest order pages

The sample data is shown only in the editor and in preview mode, never to shoppers, and nothing is saved: buttons and forms on these pages do not send anything, and their links stay on the page.

The checkout page is previewed with the cart of the browser you are using. If the cart is empty, the preview shows the cart page with the notice "Add a product to the cart to preview the checkout page." It is a real checkout: the address and shipping method you enter are saved to that cart, and Place Order places a real order.

Each product type page is previewed with the first enabled product of that type that is visible in the catalog or search of the store view. If the store view has no such product, the preview shows the store's not-found page.

Following links in the preview ​

Links in the preview work as they do on the store. When you open another page this way, the preview shows the saved version of that page and the outline becomes read-only. A bar at the top offers Edit this page, which switches the editor to that page, and a button takes you back to the page you were editing.

Share a preview ​

A shared preview lets someone see a design without an admin account, for example a client approving a new look.

1. Choose Share preview in the top bar.
2. Enter a password of at least 8 characters, or generate one.
3. Choose how long the link should work: 3 hours, 1 day, 3 days or 7 days.
4. Create the link, then copy the link and the password. The password is shown only once.

The person opening the link enters the password and then browses the store with that design. A Preview mode bar at the bottom of the page shows which design is being previewed; Exit preview goes back to the live store. The same bar appears when you open the preview in a new tab from the editor. A shared preview always shows the saved design, not unsaved changes. Links that are still active are listed in the same dialog, and Revoke ends one immediately. Expired links are removed automatically every night.

Designing CMS pages and categories ​

CMS pages and categories can have their own Lynx content instead of the standard text editor:

1. Open the CMS page or category in the admin.
2. In the Content section, choose Design with Lynx to open the editor on that page. For a CMS page, save the page once before the button appears.
3. Build the content and save it in the editor.
4. Back in the CMS page or category, turn on Render with Lynx and save.

Until Render with Lynx is on, shoppers keep seeing the standard content, so you can prepare the new version without anyone noticing. Turning it off later brings the standard content back, and your Lynx content is kept. For categories, the content can differ per store view.

Permissions ​

Access to the editor is set per admin role in System › Permissions › User Roles, under Lynx Page Builder:

Uploading images and creating folders in the media gallery follow Magento's own media gallery permissions.