Lynx

Appearance

Moving from Luma or Hyvä with an LLM ​

Moving to Lynx does not move any data. Your catalog, customers, orders, CMS pages, URLs and extensions stay in Magento. What you rebuild is the look of the store: the brand colors and shapes, the header and footer, the home page, and the content of your CMS pages and category banners.

Lynx has no automatic theme converter. Instead, with Build with AI, an AI assistant running on a large language model (LLM), such as Claude, does most of that work for you: it looks at your current store, picks the Lynx components that match each section, fills in your texts, images and products, and saves the result in a design you review before anything goes live.

What you need ​

  • Lynx installed on your Magento, ideally on a staging copy first. See Installation.
  • The address of your current store. The assistant opens its pages itself and looks at them, so the live site or a staging URL is enough.
  • The MCP server connected to your assistant. See Connect an assistant.
  • An assistant that can open web pages, such as Claude Code, so it can look at your current store and check its own work in the preview.
  • For components Lynx does not have (see below): a developer with a local copy of the store, running Claude Code in the Magento project.

Step by step ​

Work in this order, one part at a time, and check each result in the preview before moving on.

1. A design to work in ​

Ask the assistant to create a new design based on Default, for example "Migration". Everything it builds goes there; shoppers keep seeing the current design until you switch.

Create a Lynx design called "Migration" based on Default, and work only in that design.

2. Your brand ​

The assistant reads your current store's colors, corners and text sizes and sets the design settings that every Lynx page follows.

Open https://www.example.com and look at the header, buttons, links and product cards. Set the Migration design's colors, corner radius, border width and heading scale so Lynx looks like it. Tell me what you changed.

3. Header and footer ​

The menu is built from your Magento categories, so it is already there. The footer is rebuilt from your current links, newsletter block and social icons.

Rebuild the footer of www.example.com in the Migration design: the same link columns and links, the newsletter signup and the social icons. Use pages that exist in this store.

4. The home page, section by section ​

Rebuild the home page of www.example.com in the Migration design, section by section. Upload the banner images to the media gallery, use the same headings and buttons, and for product rows find the same products in this store. Then send me a preview link.

The assistant uploads images with Upload Image, finds products and categories in your catalog so rows and links point to real pages, and places every section with the components the editor offers.

5. CMS pages and categories ​

Pages such as About Us, Shipping or FAQ can keep their current content: with Render with Lynx off, Lynx shows the content as it is. To redesign one with components, ask the assistant to build its Lynx content and review it in the preview before turning Render with Lynx on. Category banners and descriptions work the same way. See Designing CMS pages and categories.

Build the Lynx content of the CMS page "about-us" from https://www.example.com/about-us, with the same text and images. Leave Render with Lynx off and give me a preview link.

6. Review and switch ​

Open the preview on a phone and a desktop, share a preview link with your team, and refine anything by hand in the editor. When you are happy, assign the design and the Lynx theme to the store view as in Getting Started.

When a component is missing ​

Some sections have no Lynx component: a store locator, a size guide, a special slider from an extension. Ask the assistant to say so instead of guessing:

Before building, list every section of the page and the Lynx component you would use for it. Mark the sections that no component fits.

For each section it marks, there are two ways forward:

  • Build it from basic components. Many sections can be put together from Group, Row, Column, Heading, Paragraph, Image and Button. Ask the assistant to try that first.

  • Have a new component made. This is a developer's job on a local copy of the store being migrated: the developer runs Claude Code in the Magento project, connected to the local MCP server, and asks it to write the component. The Lynx Claude Code skills make it follow Creating Components, for example:

    In this Magento project, create a Lynx component "Size Guide" in a module Vendor_SizeGuide, following the Lynx developer guide: a Vue file, a provider for its labels, settings for the title and the size table, available on product pages.

    After the component is added, build the storefront, clean the cache and restart the MCP server so the assistant can see it:

    bash
    bin/magento lynx:static:deploy
bin/magento cache:clean
# then restart the MCP server, see /developer/mcp

    The new component then appears in the assistant's component list and in the editor's picker, and the assistant can place it on the page.

Once the component works locally, the developer reviews the code and ships the module to staging and the live store like any other Magento module (Composer or the project's repository, then setup:upgrade and the build). Page layouts built locally move with Export layout and Import layout in the editor (see Designs); images uploaded locally have to be uploaded on the live store too.

What does not move by itself ​

  • Extension features on the storefront. An extension that shows its own blocks, widgets or pages on Luma needs a Lynx version of them. Its admin, emails and server-side logic keep working. See Making a Luma Extension Compatible.
  • Theme code. Luma layout XML, templates and JavaScript widgets, and Hyvä templates and Alpine.js components, are not used by Lynx. What they showed is rebuilt with components, as above. Lynx and Hyvä cannot run together.
  • Checkout customizations. The Lynx checkout has its own steps and payment buttons. See Cart and Checkout Components.

Tips ​

  • One page per conversation keeps the assistant focused and the results easy to review.
  • Be specific about what to keep: exact texts, which products, which images.
  • Check mobile in every preview; Lynx pages are responsive, but a section built from many columns may read better with fewer on a phone.
  • Undo is a design away: the migration design is separate, so you can start a page over at any time.