Appearance
Cart and Checkout Components
These components make up the cart page, the checkout and the pages shown after an order. They work with Magento's own prices, discounts, shipping methods and payment methods, so everything you configure in Magento applies here too.
Checkout Cart
The shopping cart page: items, quantities, the order summary, the discount code and the checkout buttons.
| Setting | What it does |
|---|---|
| Express Buttons Per Row | How many express payment buttons sit side by side under the checkout button. Auto fits as many as there is room for. |
| Express Buttons Gap | Space between the express payment buttons |
| Express Checkout | Drop PayPal express buttons into this slot to show them under the checkout button |
| Below Items | A slot under the list of items, for content such as a banner, a text block or a product carousel |
| Below Summary | A slot under the order summary and the checkout buttons, for content such as delivery or returns information |
The component also follows these Magento settings:
- Items per page: long carts are split into pages, using Number of Items to Display Pager in Stores › Configuration › Sales › Checkout › Shopping Cart.
- Clear Shopping Cart: the button shows when Enable Clear Shopping Cart is on in the same section.
- Check Out with Multiple Addresses: the link shows when multishipping is enabled. Lynx hands that checkout to the fallback theme, so turn Page Fallback on if you use it.
Checkout
The checkout page. Shipping address, shipping method and payment are shown as steps on one page, next to an order summary.
The settings of the Checkout component are grouped. Click a group to open it; the first one is open already.
| Group | Setting | What it does |
|---|---|---|
| Express | Express Buttons Per Row and Gap | Layout of the express payment buttons, as in the cart |
| Layout | Order Summary Side | The order summary on the right or the left of the steps |
| Order Summary Width | Narrow, Medium or Wide | |
| Sticky Order Summary | Keeps the order summary in view while the steps scroll | |
| Background | Single paints the whole page in one color. Split paints the order summary column in the surface color, to the edge of the screen. | |
| Show Heading | Shows the Checkout / Guest Checkout heading | |
| Header | Header Layout | Logo on the left with the way back to the cart on the right, or the logo centered |
| Logo Size | Small, Medium or Large | |
| Show Back to Cart | The link back to the shopping cart in the header | |
| Steps | Step Style | Card puts each step in a box. Flat separates the steps with a line. |
| Number Steps | Puts 1, 2, 3… before the step headings, counting only the steps the cart goes through | |
| Continue Button Width | Auto fits the button to its text, Full stretches it across the step | |
| Shipping Methods and Payment Methods | Separate gives each option its own box, Joined lists them in one box divided by lines | |
| Order Summary | Order Summary on Phone | Above or below the steps, and whether it starts open |
| Item Images | None, Small or Medium | |
| Scroll Long Item List | Keeps a long item list short so the totals stay close | |
| Discount Code | Field always shows the code field, Link hides it behind Apply Discount Code, None leaves it out. A code already applied always shows so it can be removed. |
Each setting starts at the look the checkout had before, so nothing changes until you change it.
| Slot | What goes in it |
|---|---|
| Express Checkout | Express payment buttons, shown above the steps |
| Before Shipping Method | Extra steps from extensions, between the address and the shipping method |
| Before Payment | Extra steps from extensions, between the shipping method and payment |
| Below Order Summary | Content such as trust badges, delivery or returns information |
The steps
The address, the shipping method and payment always come in this order: shipping rates depend on the address, and payment places the order. They are part of the Checkout component, so they are not in the outline.
- Extra steps from extensions, such as a delivery date or an order comment, go in Before Shipping Method or Before Payment. Use Add to Before Payment (or Add to Before Shipping Method), drag them to reorder within the slot, and hide one with the eye icon.
- Express payment buttons go in the Express Checkout slot above the steps. Use Add to Express Checkout to add them.
- Only the right components fit. The step slots accept only checkout steps and the Express Checkout slot only express payment buttons, each one once. A component that is already there is shown as Already added.
On a cart with only virtual or downloadable products, the shipping method step leaves the checkout on its own and the address step asks for the billing address.
Address step
The shipping address, the guest's email and the billing address when it is different. Customers pick from their address book; guests fill in a form.
Address fields
The fields of the address form, their order, width and rules are set for the whole store in Stores › Attributes › Customer Address Fields, and the checkout, the address book and registration share them. See Customer Address Fields.
Shipping method step
The shipping rates available for the address, from the carriers you have enabled in Magento. When in-store pickup is enabled, shoppers can choose a store here.
Payment step
The payment methods you have enabled in Magento, the billing address and the button that places the order. A method that needs more from the shopper shows its own fields when it is chosen, such as the card form of an online method or the Purchase Order Number of Purchase Order.
Script protection on the payment page
The checkout locks down the scripts that run on it. Each script file comes with a fingerprint created when Lynx is built, and the browser refuses to run a file whose content does not match. A script altered on the server, on a CDN or on its way to the shopper is blocked before it can read card details.
This helps you meet requirement 6.4.3 of PCI DSS 4.0, which asks merchants to control the scripts on their payment pages. It is the Lynx counterpart of the protection Magento adds to the standard checkout. It works in current versions of Chrome, Edge and Firefox. Browsers that do not support it load the checkout as usual.
Nothing needs to be configured. After updating Lynx or rebuilding its theme, flush the cache so the checkout uses the new fingerprints; Magento's normal deployment does this for you.
Express payment buttons
Express buttons let shoppers pay with a wallet that already knows their address, skipping most of the checkout. The Express Checkout slots are empty at first: drag in the buttons you want. Each button only shows when its payment method is enabled and available for the cart, and the slot hides itself when no button is shown.
The two PayPal Express Checkout buttons work in both the cart and the checkout. The Braintree and Stripe buttons are offered on the checkout page only.
| Component | Payment provider |
|---|---|
| PayPal Express Button | PayPal Express Checkout. Button Style, Shape and Label set its look. |
| PayPal Credit Button | PayPal Credit through PayPal Express Checkout |
| Braintree PayPal Express | PayPal through Braintree |
| Braintree Pay Later Express | PayPal Pay Later through Braintree |
| Braintree PayPal Credit Express | PayPal Credit through Braintree |
| Stripe Express Wallets | Apple Pay, Google Pay, Link, PayPal, Amazon Pay and Klarna through Stripe, in one component |
The PayPal Review component is the page shoppers return to after approving a PayPal Express payment, where they confirm and place the order.
Checkout Success
The order confirmation shown after an order is placed, with the order number and links to continue.
Checkout Failure
Shown when an order could not be completed, with the order number, the payment error and a way back to the cart.