Cart and checkout on Shopify: the look before paying

The short answer

Cart and checkout on Shopify are the two screens where the person has already chosen the product and can still give up before paying. The cart confirms what is going, what it costs and how to go back. The checkout asks for shipping and payment, and its look does not live in the store theme: it lives in a separate editor. The documented average cart abandonment rate is 70.22%, and a large share of that is not "the person changed their mind." Extra cost, lack of trust and a long checkout show up with numbers. The right design shows the total early, lets the person buy without creating an account up front, and uses the brand only enough for them to know they are still in the same store. Below I separate what the cart screen is, what Shopify lets you change on any plan, and what exists only on Shopify Plus.

1. What the person needs to see before paying

Someone who reaches the cart has already been through the product page. The question changes. It is no longer "does this product fit?". It is "what will I pay at the end, when does it arrive, and what happens if I give up?".

Baymard separates people who were only browsing from people who got stuck on a store problem. 42% abandoned because they were not going to buy yet. A banner does not fix that. In the rest, 40% cited a high extra cost (shipping, fees), 19% did not trust the site with their card, 18% ran into a request to create an account, 17% found the checkout long or complicated, 13% found the return policy poor and 12% could not see the total cost beforehand.

When I design this step, I use that order. First the total, with shipping or a clear way to calculate it. Then the delivery time. Then the exchange policy, on one line, with a link. The brand stays at the top, small. The continue button stays in the same block as the total, not after a campaign text.

If the store is still being built, creating and tuning Shopify stores is where the cart, the theme and the checkout enter the same project. The product page, which comes before, is in the article on what the design needs to show on the product page.

What this design does not cover

Replacing Shopify checkout with Yampi or Cartpanda is a different decision: payment, the fee and the invoice. The article on Shopify checkout in Brazil, native or external covers that. Here the subject is the look and the order of the information, on the cart and on the checkout that Shopify designs.

2. The cart screen

The cart is the last screen where the person still changes the purchase at ease. Each line needs a photo, a name, the variant, the quantity, the line price and an obvious way to remove the item. A quantity without the variant name creates support work. A tiny photo raises doubt about whether the right item went in.

The summary stays stuck to the button, beside it on desktop and just above it on mobile. It shows the subtotal, the shipping (or the field to calculate it), the discount if there is one, and the total. Hiding the shipping until the last step repeats the reason behind the 40% and the 12%: a cost that shows up late.

The coupon cannot be the loudest element on the screen. A discreet field, labeled "coupon", handles whoever has a code. A huge banner of "you got a discount" pushes the total down and slows the person who was already going to pay.

The link back to the store stays visible. People who open the cart to check still want to look at another product. If the only way out is the pay button, some of them go back through the browser and lose the thread.

On mobile, the continue button takes the useful width and respects the WCAG 2.2 minimum target: 24 by 24 CSS pixels. A trash icon stuck to the quantity, with no touch area, makes the person delete the item by accident. I leave space between the trash icon, the quantity and the name.

3. One page or three

In the Shopify admin, the default checkout layout is one page. You can switch it to three pages. The editor preview does not update on the spot: after you save, the check is on the store's real checkout.

One page shows information, shipping and payment in the same flow, with less of a feeling that "there are still steps left." Three pages split that into steps. Neither one is magic. What weighs is the number of fields, not the number of screens.

Baymard describes a lean flow with 12 to 14 form elements, or 7 to 8 if you count only the fields. The average they record in checkouts in the United States is 23.48 elements by default, 14.88 of them fields. I do not promise to cut down to their number. I look at the store's checkout and cross out what does not decide the delivery or the payment: a marketing message, required registration, an extra "how did you hear about us" field.

The same research estimates that a large store, in the United States and Europe, can gain 35.26% in conversion from better checkout design alone. That is an average of large stores there, not a target for your store. It is there to remember that the problem is usually the screen, not that "Brazilians don't buy."

In the 2025 review, 64% of desktop sites and 63% of mobile sites landed at mediocre performance or worse on the checkout. Large stores get this wrong too. A pretty theme on the home page does not fix this step.

4. What the plan lets you change

The checkout is not edited in the theme editor. Shopify has a checkout and accounts editor, under Settings, Checkout. That is where the logo, the color, the font and the apps go. Part of the brand you put on the checkout also carries over to the customer account.

Standard customization applies on the Basic plan or above. Plus unlocks what the help center calls advanced customization, the Checkout Branding API, and apps on the information, shipping and payment pages. An app on the thank-you page and on the order status can exist on Basic, if the app is eligible.

Source: Shopify Help Center, read on 16/10/2026.

For most of the Brazilian stores I design, the Basic line already covers the look: logo, button color, background color, title font and body font. Plus comes in when the operation needs an app block in the middle of payment, or fine-tuning through the API. It is not the first step for a store that does not even show shipping in the cart yet.

Since February 5, 2026, Shopify no longer lets you add a background image in the checkout header or in the main area. If an old image is already there, you can only remove it, not replace it. I treat that as a limit, not as a bug: the checkout is not a place for a banner.

If your store's cart hides shipping, the delivery time or the total, send the cart URL and the plan. If you have not created the Shopify store yet, talk to me before you create it: the store is born as a development store, is built ready and transferred to your name.

Talk about the project

5. Logo, color and font without competing with payment

Shopify itself asks for a simple checkout. The help center sentence is direct: people use these pages to enter shipping and payment, and too much color distracts or makes reading harder. The guidance is high contrast and an image that does not steal the words.

In practice, I take three decisions.

The logo stays at the top, aligned left or center, at a width that does not push the form down on mobile. A tall logo eats the first screen. The store name is already in the header. If the logo repeats the name in huge letters, I reduce it.

The color of the button and of the highlights (links) comes from the brand, but the button text has to pass contrast. WCAG asks for at least 4.5:1 for normal text and 3:1 for large text (18 points, or 14 in bold). A yellow button with thin white type usually fails. I test the pair of background color and type color before saving.

The checkout font is a list from Shopify, with title and body separate. It is not the theme font. If the store uses a very narrow brand font, it may not even appear here. I pick the closest one and check that the field stays readable. A card field in decorative type is where the person mistypes the number.

Fields can be transparent. With a transparent background, the field text has to stay readable on the page color. If I cannot read the example inside the field, I turn the transparent option off.

The editor palette is there to reuse the same color on the button, the link and the warning. Change the hex on one swatch and it changes everywhere that uses that swatch. I build the palette with few colors: background, text, button and error.

6. On mobile, the summary and the coupon start closed

On mobile, Shopify's default hides the order summary and the coupon field in a collapsed section. The person taps the summary to see the total and the coupon. That saves height, and it also hides the number that prevents abandonment from a surprise cost.

There is a setting, "always show the coupon field", on both layouts. On one page, the coupon appears above the collapsed summary. On three pages, the summary at the top opens by default, with the coupon alongside it.

I turn that setting on when the store lives on coupons, because a hidden field produces the message "I could not find where to put the code." I still keep the summary easy to open, with the partial total visible before the tap. A total with zero clicks is better. If the layout does not show it, the summary label needs to state the amount, not only "view order."

The same care with the touch area applies here. A "forgot the coupon" link stuck to the field, in tiny type and with no space, fails the 24 CSS pixel criterion. I enlarge the target or I separate the two controls.

7. Account, delivery time and policy at the right moment

18% of people in the Baymard survey abandoned because the site wanted them to create an account. 62% of sites do not make guest checkout the most visible option. If the guest button exists but sits in small text under "create account", for the person it is the same as not existing.

In the design, "buy without an account" is the main button. "I already have an account" sits beside it, visible, without being first. Registration can be offered after the order, on the thank-you page, when the person has already paid.

The delivery time comes in before payment, not only in the email. 20% of the abandonments on the Baymard list happened because delivery was too slow. The design does not speed up the mail. It keeps the person from discovering the delivery time after typing the card.

The return policy, in one sentence with a link, stays near the total. 13% abandoned because of a poor policy. If the policy is clear and hidden in the home page footer, the practical effect is the same as not having one.

Trust with the card (19%) is not solved by stacking generic badges. It is solved with checkout on the store's domain, the lock the browser already shows, and no strange block between the card field and the button. An upsell app in the summary can exist. If it pushes the pay button off the screen, I remove it or I leave it after payment, on the thank-you page, where Basic already allows an eligible app.

Frequently asked questions

Can the checkout look like the store without Shopify Plus?

Yes, for the logo, the colors, the font, the background and the fields in the checkout editor, on the Basic plan or above. Plus comes in for advanced customization, the Checkout Branding API and apps in the middle of the information, shipping and payment pages. Most of the brand look the person notices fits on Basic.

Does a one-page checkout sell more than a three-page one?

Shopify allows both. The default is one page. What the research shows is too many fields, not a winner between the layouts. I count the store's fields and cut what does not serve delivery or payment. Switching layout is only worth it after you save and open the real checkout, because the editor preview does not show the change on the spot.

Why doesn't the coupon show on mobile?

By default, the summary and the coupon are born collapsed on mobile. The person opens the summary to see them. If the store depends on a coupon, the admin has the option to always show the coupon field, above the collapsed summary on the one-page checkout.

Is the cart edited in the same place as the checkout?

No. The cart is part of the theme. The checkout is edited under Settings, Checkout, in the checkout and accounts editor. A banner and an extra section you build in the theme do not carry over to the checkout. That is why the checkout brand is logo, color and font, not the whole home page.

Do I need to show shipping already in the cart?

Whoever does not see the total before paying is in the group of 12% who abandoned for that reason, and a high extra cost is the reason for 40%, aside from people who were only browsing. If shipping depends on the CEP, the CEP field stays in the cart, next to the total, and not only at the last step.

Conclusion

Cart and checkout on Shopify win the sale when the total, the delivery time and a way out without an account show up before the person has to work up the courage to pay. The theme handles the cart. The checkout editor handles the brand at this step, and the Basic plan already covers logo, color and font. Plus is an operations tool, not a layout shortcut. If your store is already losing people at this step, see creating and tuning Shopify stores and send the cart URL and the store's plan. If you have not created the Shopify store yet, talk to me before you create it: the store is born as a development store, is built ready and transferred to your name.

Talk about the project