In the theme editor: Customize›Cart page›Add section›Cart display case
Cart display case
The cart page as a display case: the chosen products on a lit stage, the list of items, recommendations and the order summary.
Turn the free shipping bar, the order note and the express checkout buttons on here, in the order summary. The bar’s amount and look live in Theme settings, Free shipping.
Settings
General
The cart page and the cart drawer are the same component. These settings apply to both.
Heading
- Free shipping bar
- On or offDefault: OnUnder the cart heading, on the page and in the drawer. Look, amount and text: in theme settings, "Free shipping".
- Text next to the item count
- On or offDefault: On
- Text
- TextAny text you like, with bold and links: shipping, returns, a sale. Empty: a line that follows the free shipping policy (theme settings, Free shipping), or nothing when there is no free shipping. When the free shipping bar is shown, empty shows nothing, so the line never contradicts the bar.
- Link of the button in an empty cart
- LinkLeave empty to link to all products.
Stage
- Frame thickness of the floating products
- Slider, 0 to 6 pxDefault: 1 pxA black frame around the product photo. 0 removes it.
- Frame thickness of the recommendation cards
- Slider, 0 to 8 pxDefault: 1 pxA thin frame around the pictures in the "you may also like" ring, in the color chosen below. 0 removes it.
- Recommendation card frame color
- ColorDefault: #0C0A09For the dark stage. On a light stage (a white cart) the frame is white.
- Recommendation stage tone
- Choice: Automatic, by the cart color, Black stage (lacquer floor), Light cream (light display window)Default: Automatic, by the cart colorThe same stage as “New arrivals ring”: a glossy round stand under the cards, with a soft reflection of every photo and a shadow where each card stands.
- Floor color
- ColorThe round stand under the cards. Empty: by the stage tone.
- Reflection strength
- Slider, 0 to 100 %Default: 100 %How strong the photo reflection is on the floor. 100% is the default.
- Ring speed
- Slider, 2 to 20 °Default: 9 °Degrees per second (a full turn is 360). The ring turns slowly on its own and stops when a card is touched or dragged.
- Color scheme
- Color schemeThe stage takes its background and accent from this scheme. A color chosen below overrides it.
- Cart accent color
- ColorThe color of the buttons, dots, lines and highlighted text in the cart. The default is light so it reads well on the dark stage. If you pick a dark color, the text on the buttons turns white.
- Projector and light beam
- On or offDefault: OnA spotlight that lights the product in the middle. When off, the products are always lit.
- Effects quality
- Choice: Automatic (recommended), Full, SimpleDefault: Automatic (recommended)Automatic detects a slow device and simplifies the light and the floating so the cart stays smooth. Full always shows every effect. Simple shows a still light and no floating.
- The middle product floats
- On or offDefault: OnA gentle float and turn. Not played for visitors who ask for reduced motion.
- Glass arrows on computers
- On or offDefault: OnThey appear when the mouse is over the stage.
Products waiting on the shelf
- Label of the waiting products
- TextLeave empty to use the default label.
- Product 1
- Product
- Product 2
- Product
- Product 3
- Product
- Product 4
- Product
Up to four products shown in half darkness with the label "Add this too?". The customer adds them with one tap. A product that is already in the cart or sold out is not shown.
List of the items you picked
- List layout
- Choice: Fixed columns (recommended), One lineDefault: Fixed columns (recommended)
- Product pictures in the list
- On or offDefault: On
You might also like (the carousel)
- Which products to recommend
- Choice: Linked to the cart, Only the collectionDefault: Linked to the cartLinked to the cart: first the complementary products you set for each product in Shopify’s free Search & Discovery app, then related products Shopify finds on its own, then the collection below, and if it is empty, random products.
- Collection of the carousel products
- CollectionFills the ring when there aren’t enough linked products, or always with “Only the collection”. Empty: all products, in random order.
- Products in the carousel
- Slider, 4 to 12Default: 8
- How the product name changes in the carousel
- Choice: Rolling counter that speeds up with the carousel (recommended), Blur, Rise, Turn, Fade and settleDefault: Rolling counter that speeds up with the carousel (recommended)
- How long the name change takes
- Choice: At the pace of the carousel (recommended), A little quicker, FastDefault: At the pace of the carousel (recommended)Applies to blur, rise and turn.
Order summary
- Delivery line in the summary: text
- TextLeave empty to use the default text (Delivery to your door).
- Delivery line in the summary: value when free
- TextShown only when the cart gets free shipping by the policy in theme settings (Free shipping): on every order, or once the cart reaches the amount. Otherwise the line says it is calculated at checkout. Empty: "Free".
- Show the coupon field
- On or offDefault: On
- Tax line
- TextEmpty: by the store tax settings ("Prices include tax..." or "Taxes and shipping are calculated at checkout"). You can write any text, with bold and links.
- Order note
- On or offDefault: OffA link that opens a field. The note saves itself and reaches the order in the store admin.
- Express checkout buttons
- On or offDefault: OnShopify buttons (Shop Pay, Apple Pay, Google Pay and more), by what is enabled in the store and on the device. Their look is set by Shopify.
- Payment shortcut buttons
- On or offDefault: Onbit, credit card and anything you added, going to checkout. The buttons themselves are in theme settings, "Express payment buttons".
- Heading above the buttons
- TextEmpty: "Or pay express".
Messages and phone
- How long the small message stays
- Slider, 2 to 8 secDefault: 4.5 secThe small message at the bottom of the cart after adding or removing a product, with an undo button.
- Scroll arrow in the drawer on phones
- On or offDefault: OnA small arrow that hints there is more below. Shown only when there is something to scroll.
- The stage covers the heading on scroll
- On or offDefault: OffIn the drawer: scrolling up, the dark stage rises over the "Your cart" heading, like the scroll cover on the home page. The close button stays visible above it.
Something here doesn’t match what you see in your editor? Tell us and we will fix the guide.
