Lynx

Appearance

Getting Started ​

This page takes you from switching your store to Lynx to editing your first page. Everything here happens in the Magento admin. Installing Lynx on the server is a developer's job, covered in Installation.

1. Have Lynx installed ​

Lynx is installed on the server with Composer, usually by your developer or hosting provider. Send them the Installation page, which lists the requirements and the commands.

Not together with Hyvä

Lynx and Hyvä are two different frontend stacks, so they cannot be combined: Hyvä renders Magento's layout XML and templates with Alpine.js, while Lynx is a Vue single-page app built from PageBuilder components. Lynx replaces the storefront theme on its own. Hyvä compatibility modules of your extensions do not apply to Lynx.

TIP

Installing Lynx does not change your live store. Your store keeps its current theme until you switch to Lynx in the next step.

2. Switch your store to Lynx ​

  1. In the admin, go to Content › Design › Configuration.
  2. Edit the store view you want to change.
  3. Set Applied Theme to Lynx Vue, then save.

Applied Theme set to Lynx Vue for a store view

You can switch one store view at a time. This is a good way to try Lynx on a test store view before your main one.

3. Choose the design to show ​

A design is a complete look for the store: every page layout plus the design settings. Lynx installs a default design that you can use as a starting point.

  1. Go to Stores › Configuration › Lynx › Theme Settings.
  2. Pick a design in Active Design. This can be set per website or store view.
  3. Save the configuration.

The Active Design setting under Stores, Configuration, Lynx

4. Make your own copy of the design ​

The default design is read-only, so that you can always go back to it. To make changes, copy it first:

  1. Go to Lynx › Designs.
  2. Open the Select menu of the default design and choose Duplicate. Rename the copy with Edit.
  3. Choose Build on the copy to open it in the editor.

The copy starts with the default design's settings and with the default design as its parent. Every page you have not changed yet is taken from the default design, so the copy looks the same from the start. When you save a page in the copy, that page becomes the copy's own. Pages that Lynx updates add to the default design later also appear in your copy, until you change them.

When you are happy with your copy, set it as the Active Design from step 3.

5. Edit your first page ​

The editor opens on the home page. Double-click a component in the outline on the left to open its settings, change them, and press Save. Your changes appear on the store straight after saving.

Continue with The Editor to learn your way around.

Updating Lynx ​

New versions are installed on the server the same way as Lynx itself; your developer finds the steps in Installation. Your designs and page layouts are kept.

Changes not showing?

If Magento's full page cache is on and an old page still shows, refresh the cache in System › Cache Management.