Components ​

Components are the building pieces you place on a page in the editor: banners, headings, product carousels, the header, the checkout and more. Each one has its own settings, and every one of them follows your design settings, so a new component always matches the rest of the store.

Groups of components ​

In the editor's component picker, components are grouped into smaller categories so they are quicker to find: Layout, Text, Media, Form, Header Footer, Utility, Product List, Product Attribute, Category Attribute, Search, Product Page, Checkout, Account and General.

A growing library ​

Lynx ships with ready-to-use components for layout, content, products, the cart, the checkout and the customer account, enough to build a complete store. New components are added with each release.

Build your own components ​

Developers and extension vendors can build their own components in Vue and add them to Lynx from a Magento module. A custom component works exactly like a built-in one:

• It appears in the editor's component picker, with its own settings.
• It can be limited to certain pages or zones.
• Its text settings can be translated per store view.
• It follows your design settings, so it matches the rest of the store.

Payment providers can plug their payment methods and express buttons into the Lynx checkout in the same way.

See the Developer Guide for how to build your own components.

Where a component can go ​

The component picker only offers components that make sense in the place you are adding to:

• Some components belong to one page. The checkout form is only offered on the checkout page, and the product listing only on category pages.
• Some components belong to one zone. The header and the announcement bar are only offered in the Header zone, the cookie notice and the back-to-top button in the Footer zone, and analytics in Backstage.
• Most content components go anywhere. Headings, paragraphs, images, buttons and layout components can be used in every zone and on every page.
• Some slots accept only one kind of component. The Before Shipping Method and Before Payment slots of the checkout take only checkout steps, the Express Checkout slot only express payment buttons, the account frame only account sections, and Tabs only Tab components. The picker opened from such a slot lists only the components it accepts, and dragging another component into it is not possible.
• Some slots take each component only once. A checkout step, an express payment button or an account section can be added to its slot one time. A component that is already there stays in the picker but is greyed out and marked Already added.

Settings you will see often ​

Align ​

Components placed inside a Group with a constrained layout can reach wider than the text around them:

Start, Center and End ​

Text alignment and positioning use Start and End instead of left and right. In a left-to-right language Start is left; in a right-to-left language such as Arabic it is right. Your layout stays correct in every store view without extra work.

Translations ​

Text settings, such as titles, labels and messages, have a Translations button next to them. The text you type in the field is the default. In the dialog, add a translation for each store view language using its locale code, for example de_DE or fr_FR, as set in Stores › Configuration › General › Locale Options. A store view without a translation shows the default text.

Load when shown ​

Product page components such as the description, specifications and reviews have this switch.

• Off: the content is sent with the page. Search engines read it, and it is visible straight away.
• On: the content is fetched only when it appears, for example when its tab is opened. The page loads a little faster.

Keep it off for content that matters for search, such as the product description. See How content loads for how Lynx loads content on every page.