Cart Item Display (Images, Quantity, Prices, Savings, Unit Price)
Where to edit cart line items
Line items are the product rows inside your cart drawer (image, title, quantity, and prices).
Choose a line item template
A template controls the overall layout of each item row (where the image sits, how the text stacks, and where price details show).
- Compact layouts fit more items on screen but can feel tight on mobile.
- Spacious layouts are easier to read and can make your cart feel more premium.
Product thumbnail settings
Thumbnail size
Use Thumbnail size to control how big the product image appears in the cart item row.
- Small: best when you want the cart to feel short and clean.
- Medium: balanced choice for most stores.
- Large: makes items feel more visual (good for fashion and beauty).
Image fit (object-fit)
Image fit controls how the image fills the thumbnail box.
- Cover: fills the box. Parts of the image may be cropped.
- Contain: shows the whole image. You may see empty space around it.
Quantity controls
Quantity controls let customers change item count right inside the cart drawer.
Pick a quantity style
- Stepper (+ / − buttons): fastest for customers and best for mobile.
- Input field: lets customers type a number (useful for bulk orders).
- Hide quantity controls: customers may need to edit quantity somewhere else (like the cart page) depending on your setup.
Remove button vs decreasing to zero
Some templates show a Remove link/button. Others rely on the minus button to reduce quantity. Choose what feels clearest for your shoppers.
Compare-at price (sale pricing)
Compare-at price is the “original price” that can show next to the current price when a product is on sale.
- Turn it on if you want shoppers to clearly see the sale.
- Turn it off if your cart looks too busy or you don’t use compare-at prices.
Savings text (line savings and total savings)
Savings can be shown in two common places:
- Line savings: savings for one item row (example: “You saved $5 on this item”).
- Total savings: savings for the whole cart (example: “Total savings: $12”).
Choose what you want to show
- Show line savings if you want each discount to feel clear and item-based.
- Show total savings if you want one simple message near checkout.
- Show both if your customers often buy multiple items and you want a stronger “deal” feeling.
Edit the savings wording
Most stores keep savings text short and easy to scan. Examples:
You savedSavingsTotal savings
Unit price formatting
Unit price is a price per measurement, like $0.50 / oz or $2.00 / 100ml. This is common for grocery, beauty, and pet products.
Show or hide unit price
- Show unit price if you sell products where shoppers compare value (size and cost).
- Hide unit price if it adds clutter or your catalog doesn’t use unit pricing.
Pick a unit price style
Depending on your settings, you may be able to control:
- Placement (under the main price vs below the title)
- Format (example:
$ / unitstyle) - Text size (smaller text usually works best)
Try switching Image fit from Cover to Contain. If you prefer Cover, use more consistent product photos (same shape and crop) so the cart looks even.
Compare-at price shows only when the product has a compare-at price in Shopify and it is higher than the current price. If the values are the same (or compare-at is missing), it will not show.
Savings text appears only when there is a real discount. For example, if no discount code is applied and the items are not on sale, there may be no savings to display.
Unit price shows only if unit pricing is set for that product in Shopify. Check the product in Shopify admin and make sure unit price measurement is configured.
Quick best-practice setup
- Use a Medium thumbnail size for most stores.
- Use Contain if your product images are different shapes.
- Keep quantity stepper enabled for the smoothest cart experience.
- Show compare-at price and savings if your store runs sales often.
- Show unit price only when it helps customers compare value.