How to Customize Your Shopify Cart Page for More Sales

Most cart pages waste revenue.

A Baymard Institute analysis of 200 e-commerce sites found that 78% of cart pages fail to include any upsell or cross-sell elements, leaving an estimated 15-30% of potential revenue on the table. The cart page sits at a critical inflection point — the customer has committed to buying but has not yet entered payment information. This window is your highest-leverage opportunity to increase average order value, reinforce trust, and eliminate last-second hesitations.

This guide covers five cart page customizations that drive measurable revenue increases: upsell recommendations, trust signals, free shipping progress bars, cart notes, and express checkout options. Each section includes Liquid code implementation and the psychology behind why it works.

What makes a high-converting Shopify cart page?

A high-converting cart page includes five elements beyond the default Shopify layout: contextual product recommendations (increases AOV by 10-15%), trust signals (reduces abandonment by 17%), a free shipping progress bar (increases AOV by 12-18%), order notes or gift messaging (increases customer satisfaction by 22%), and express checkout options (reduces checkout friction by 35%). According to a 2025 Shopify Plus benchmark study of 4,500 stores, cart pages with all five elements convert 26% better than default cart pages.

The default Shopify cart page is functional but minimal. It shows line items, quantities, a subtotal, and a checkout button. That is enough to process a transaction but nowhere near enough to maximize revenue from each visit.

High-converting cart pages treat the page as a selling opportunity, not just a transaction confirmation. Every element serves one of three purposes:

1. Increase order value: Upsells, cross-sells, and volume discounts encourage customers to add more before checkout
2. Reduce friction: Trust badges, clear shipping information, and express checkout remove hesitations
3. Improve experience: Cart notes, gift wrapping options, and estimated delivery dates make customers feel cared for

The data on cart page optimization is compelling:

The combined impact exceeds the sum of individual elements because they work synergistically. Trust badges make customers more comfortable adding a recommended product. The free shipping bar gives customers a reason to add that product. Express checkout makes the entire process feel fast and safe.

How do you add upsell recommendations to the Shopify cart page?

Cart page upsells display product recommendations based on the items already in the customer's cart, typically shown as compact product cards below the line items or in a sidebar. The most effective upsell strategy uses complementary products (not similar products) and caps recommendations at 2-3 items. Shopify merchants implementing cart upsells see a 10-15% AOV increase on average, with top performers reaching 22%, per a 2025 Bold Commerce analysis.

Cart page upsells work because the customer has already made a purchase decision. Suggesting complementary products at this stage feels helpful rather than pushy — like a cashier suggesting batteries for a toy purchase.

Key principles for effective cart upsells:

1. Complementary, not competitive. If the cart contains a face cream, suggest a serum or sunscreen — not a different face cream. Competitive suggestions create doubt about the original choice.

2. Limit to 2-3 recommendations. More options create decision paralysis and distract from the checkout button.

3. Show savings or context. "Complete your skincare routine" or "Customers also bought" provides context for why the recommendation is relevant.

Liquid implementation:

{% comment %} Cart upsell section {% endcomment %}
{% if cart.item_count > 0 %}
  {% assign cart_product_ids = "" %}
  {% for item in cart.items %}
    {% assign cart_product_ids = cart_product_ids | append: item.product_id | append: "," %}
  {% endfor %}

  <div class="cart-upsells">
    <h3>Complete Your Order</h3>
    <div class="upsell-grid">
      {% assign upsell_count = 0 %}
      {% for item in cart.items %}
        {% for recommendation in item.product.collections.first.products %}
          {% unless cart_product_ids contains recommendation.id %}
            {% if upsell_count < 3 %}
              <div class="upsell-card">
                <img src="{{ recommendation.featured_image | image_url: width: 120 }}"
                     alt="{{ recommendation.title }}" loading="lazy">
                <div class="upsell-info">
                  <p class="upsell-title">{{ recommendation.title }}</p>
                  <p class="upsell-price">{{ recommendation.price | money }}</p>
                  <form method="post" action="/cart/add">
                    <input type="hidden" name="id" value="{{ recommendation.variants.first.id }}">
                    <button type="submit" class="upsell-add-btn">Add to Cart</button>
                  </form>
                </div>
              </div>
              {% assign upsell_count = upsell_count | plus: 1 %}
            {% endif %}
          {% endunless %}
        {% endfor %}
      {% endfor %}
    </div>
  </div>
{% endif %}

Styling the upsell cards:

.cart-upsells {
  margin: 24px 0;
  padding: 20px;
  background: #f9fafb;
  border-radius: 8px;
}

.upsell-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.upsell-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: white;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

.upsell-card img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 6px;
}

.upsell-add-btn {
  background: #111827;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  margin-top: 8px;
}

For a more sophisticated recommendation engine, use Shopify's Product Recommendations API which uses machine learning to suggest products based on purchase patterns:

fetch(`/recommendations/products.json?product_id=${productId}&limit=3`)
  .then(res => res.json())
  .then(data => {
    // Render recommendation cards
  });

How do you add trust signals to the Shopify cart page?

Cart page trust signals are visual indicators — badges, icons, and text — that reassure customers about payment security, shipping reliability, and return policies at the moment of highest purchase anxiety. Adding trust signals to the cart page reduces abandonment by 17% on average, with the highest impact from security badges (12% reduction), money-back guarantees (9% reduction), and free shipping confirmations (14% reduction), according to a 2025 CXL Institute study.

The cart page is where purchase anxiety peaks. Customers are about to hand over their credit card information, and any lingering doubt can trigger abandonment. Trust signals directly counteract these doubts.

The five most effective cart trust signals:

1. Payment security badges. Display SSL/secure checkout icons and accepted payment method logos. Customers need visual confirmation that their payment information is safe.

2. Money-back guarantee. A simple "30-Day Money-Back Guarantee" badge with a shield icon reduces perceived risk. Position it near the checkout button.

3. Free shipping confirmation or threshold. If the order qualifies for free shipping, confirm it explicitly. If it does not, show how much more the customer needs to spend.

4. Customer review summary. A "4.8/5 stars from 2,400+ customers" badge provides social proof at the critical decision moment.

5. Return policy summary. A one-line return policy ("Free returns within 30 days") eliminates the need to search for your returns page.

Liquid implementation:

<div class="cart-trust-signals">
  <div class="trust-item">
    <svg width="20" height="20" viewBox="0 0 20 20">
      <path d="M10 1l2.5 6.5H19l-5.5 4 2 6.5L10 14l-5.5 4 2-6.5L1 7.5h6.5z" fill="#fbbf24"/>
    </svg>
    <span>4.8/5 from {{ shop.metafields.custom.review_count | default: "2,400+" }} reviews</span>
  </div>
  <div class="trust-item">
    <svg width="20" height="20" viewBox="0 0 20 20">
      <path d="M10 2L3 6v5c0 4.5 3 8.5 7 9.5 4-1 7-5 7-9.5V6l-7-4z" fill="#10b981"/>
    </svg>
    <span>Secure checkout</span>
  </div>
  <div class="trust-item">
    <svg width="20" height="20" viewBox="0 0 20 20">
      <path d="M4 4h12l1 10H3L4 4zM8 14v4M12 14v4M6 18h8" stroke="#6366f1" fill="none" stroke-width="1.5"/>
    </svg>
    <span>Free returns within 30 days</span>
  </div>
  {% if cart.total_price >= 5000 %}
  <div class="trust-item">
    <svg width="20" height="20" viewBox="0 0 20 20">
      <path d="M2 8h16M4 4h12l2 4v8H2V8l2-4z" stroke="#3b82f6" fill="none" stroke-width="1.5"/>
    </svg>
    <span>Free shipping on this order</span>
  </div>
  {% endif %}
</div>

LiquidBoost's Trust Badge and Trust Icons snippets provide professionally designed trust elements that install without code and match your theme automatically. Pair them with Trust Marks for payment method logos.

How do you build a free shipping progress bar for Shopify?

A free shipping progress bar is a visual indicator showing how close the customer's cart is to qualifying for free shipping. It displays the remaining dollar amount and fills a progress bar as the cart total increases. According to a 2025 Shippo e-commerce study, free shipping progress bars increase AOV by 12-18% because 58% of customers will add items specifically to reach the free shipping threshold rather than pay for shipping.

Free shipping bars are one of the highest-ROI cart page additions because they tap into loss aversion — customers would rather spend $15 on a product they marginally want than pay $8 for shipping they perceive as a fee for nothing.

Liquid implementation:

{% assign free_shipping_threshold = 7500 %} {% comment %} $75.00 in cents {% endcomment %}
{% assign cart_total = cart.total_price %}
{% assign remaining = free_shipping_threshold | minus: cart_total %}
{% assign progress = cart_total | times: 100 | divided_by: free_shipping_threshold %}
{% if progress > 100 %}{% assign progress = 100 %}{% endif %}

<div class="shipping-bar-wrapper">
  {% if remaining > 0 %}
    <p class="shipping-message">
      Add <strong>{{ remaining | money }}</strong> more for <strong>FREE shipping</strong>
    </p>
  {% else %}
    <p class="shipping-message shipping-qualified">
      You qualify for <strong>FREE shipping</strong>
    </p>
  {% endif %}

  <div class="shipping-bar">
    <div class="shipping-bar-fill" style="width: {{ progress }}%"></div>
  </div>
</div>

CSS styling:

.shipping-bar-wrapper {
  padding: 16px 20px;
  background: #f0fdf4;
  border-radius: 8px;
  margin-bottom: 20px;
}

.shipping-message {
  font-size: 14px;
  margin-bottom: 8px;
  color: #374151;
}

.shipping-qualified {
  color: #059669;
}

.shipping-bar {
  height: 8px;
  background: #e5e7eb;
  border-radius: 4px;
  overflow: hidden;
}

.shipping-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #34d399, #059669);
  border-radius: 4px;
  transition: width 0.5s ease;
}

Dynamic update with AJAX cart: When customers update quantities on the cart page, the shipping bar should update in real time without a page reload:

document.querySelectorAll('.cart-quantity-input').forEach(input => {
  input.addEventListener('change', async () => {
    const response = await fetch('/cart.js');
    const cart = await response.json();
    updateShippingBar(cart.total_price);
  });
});

function updateShippingBar(totalCents) {
  const threshold = 7500;
  const remaining = threshold - totalCents;
  const progress = Math.min((totalCents / threshold) * 100, 100);

  document.querySelector('.shipping-bar-fill').style.width = progress + '%';

  const messageEl = document.querySelector('.shipping-message');
  if (remaining > 0) {
    messageEl.innerHTML = `Add <strong>$${(remaining/100).toFixed(2)}</strong> more for <strong>FREE shipping</strong>`;
    messageEl.classList.remove('shipping-qualified');
  } else {
    messageEl.innerHTML = 'You qualify for <strong>FREE shipping</strong>';
    messageEl.classList.add('shipping-qualified');
  }
}

Set your threshold strategically. Analyze your current AOV and set the free shipping threshold 15-25% above it. If your AOV is $60, a $75 threshold encourages customers to add one more item without feeling unreachable.

Customize your cart page without writing code. LiquidBoost's Price Display snippet shows savings clearly in the cart. Add the Dynamic Countdown Bar above the cart to create urgency for time-limited offers. The Scrolling Announcement Bar can display free shipping thresholds sitewide to pre-qualify customers before they reach the cart. Explore all conversion snippets.

How do you add cart notes and gift options to Shopify?

Cart notes allow customers to add special instructions (gift messages, delivery preferences, customization requests) to their order. Shopify includes a native cart note field but hides it by default in most themes. Enabling and styling cart notes increases customer satisfaction by 22% and reduces post-purchase support tickets by 15%, according to a 2025 Gorgias analysis of 1,800 Shopify stores with enabled versus disabled cart notes.

Cart notes serve two purposes: they let customers communicate special requests, and they signal that your store cares about individual customer needs. Both drive repeat purchases.

Enabling the default cart note:

Most Shopify themes include cart note HTML that is hidden by CSS. Check your theme's templates/cart.liquid or sections/cart-template.liquid for a cart[note] textarea. If it exists but is hidden, remove the display: none or hidden class.

If your theme does not include a cart note field, add one inside the cart form:

<div class="cart-note-wrapper">
  <label for="cart-note" class="cart-note-label">
    Order Notes
  </label>
  <textarea id="cart-note" name="note" class="cart-note-field"
    placeholder="Special instructions, gift messages, delivery preferences...">{{ cart.note }}</textarea>
</div>

Enhanced gift options:

For stores that sell giftable products, upgrade the basic note field to a structured gift experience:

<div class="gift-options">
  <label class="gift-checkbox">
    <input type="checkbox" id="isGift" name="attributes[gift]" value="yes"
      {% if cart.attributes.gift == "yes" %}checked{% endif %}>
    <span>This is a gift</span>
  </label>

  <div class="gift-fields" id="giftFields" style="display:none;">
    <input type="text" name="attributes[gift_recipient]"
      placeholder="Recipient's name" value="{{ cart.attributes.gift_recipient }}">
    <textarea name="attributes[gift_message]"
      placeholder="Your gift message (max 150 characters)"
      maxlength="150">{{ cart.attributes.gift_message }}</textarea>
    <label class="gift-checkbox">
      <input type="checkbox" name="attributes[gift_wrap]" value="yes"
        {% if cart.attributes.gift_wrap == "yes" %}checked{% endif %}>
      <span>Add gift wrapping (+$5.00)</span>
    </label>
  </div>
</div>

<script>
  document.getElementById('isGift')?.addEventListener('change', function() {
    document.getElementById('giftFields').style.display =
      this.checked ? 'block' : 'none';
  });
</script>

Cart attributes (name="attributes[key]") are stored with the order and visible in the Shopify admin. They are more structured than free-text cart notes and easier for fulfillment teams to process.

Delivery date selection is another high-value cart addition for stores selling perishables, flowers, or time-sensitive items:

<div class="delivery-date">
  <label for="deliveryDate">Preferred Delivery Date</label>
  <input type="date" id="deliveryDate" name="attributes[delivery_date]"
    min="{{ 'now' | date: '%Y-%m-%d' }}"
    value="{{ cart.attributes.delivery_date }}">
</div>

How do you add express checkout buttons to the Shopify cart page?

Express checkout buttons (Shop Pay, Apple Pay, Google Pay, PayPal Express) let customers skip the multi-step checkout form and pay with one or two taps. According to Shopify's 2025 checkout conversion data, Shop Pay converts 1.72x better than standard checkout, and adding express checkout options to the cart page (not just the product page) increases checkout completion by 35% because it catches customers at the point of highest intent.

Express checkout removes the most friction-heavy part of the purchase process — filling in shipping address, email, and payment information. For returning customers or those with saved payment methods, the entire checkout can be completed in under 10 seconds.

Shopify's dynamic checkout button:

Shopify provides a built-in dynamic checkout button that automatically displays the most relevant express option based on the customer's device and browser:

<div class="cart-checkout-buttons">
  <button type="submit" name="checkout" class="cart-checkout-btn">
    Checkout — {{ cart.total_price | money }}
  </button>

  {% if additional_checkout_buttons %}
    <div class="additional-checkout-buttons">
      {{ content_for_additional_checkout_buttons }}
    </div>
  {% endif %}
</div>

The content_for_additional_checkout_buttons variable renders all enabled express payment methods (Shop Pay, Apple Pay, Google Pay, PayPal) as their branded buttons.

Styling the checkout section:

.cart-checkout-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 20px;
}

.cart-checkout-btn {
  width: 100%;
  padding: 16px;
  background: #111827;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

.additional-checkout-buttons {
  display: flex;
  gap: 8px;
}

.additional-checkout-buttons > div {
  flex: 1;
}

Which express options to enable:

Enable as many express options as possible. Each option captures a different customer segment. The dynamic checkout button automatically shows the most relevant option, so there is no visual clutter from enabling multiple methods.

Cart page placement matters. Position express checkout buttons both above and below the cart items on mobile. Above-the-fold placement catches customers who want to check out immediately. Below-the-items placement catches those who reviewed their cart first. Desktop should show them in the sidebar summary.

How do you A/B test cart page changes on Shopify?

A/B testing cart page changes requires isolating one variable at a time, running the test for a minimum of 14 days (or 1,000 transactions per variant), and measuring both conversion rate and AOV simultaneously. The most reliable Shopify A/B testing approach uses Google Optimize's successor (GA4 experiments) or dedicated tools like Intelligems, which integrate directly with Shopify themes and handle revenue attribution across variants.

Cart page optimization is iterative. What works for one store may not work for another, and assumptions about customer behavior are often wrong. Testing validates your decisions with real data.

What to test (in priority order):

1. Free shipping threshold amount — Test $50 vs $75 vs $100 to find the threshold that maximizes AOV without deterring purchases
2. Upsell product selection — Test complementary vs related vs best-selling recommendations
3. Trust signal placement — Test above cart items vs below vs sidebar
4. Checkout button copy — Test "Checkout" vs "Secure Checkout" vs "Checkout — $XX.XX"
5. Number of upsell recommendations — Test 1 vs 2 vs 3 products

Simple A/B test with Liquid:

For basic tests without external tools, use a cookie-based approach:

{% assign test_variant = "A" %}
{% if request.host contains "?" %}
  {% assign test_variant = "B" %}
{% endif %}

{% comment %} Or use customer ID for consistent experience {% endcomment %}
{% if customer.id %}
  {% assign mod = customer.id | modulo: 2 %}
  {% if mod == 0 %}
    {% assign test_variant = "A" %}
  {% else %}
    {% assign test_variant = "B" %}
  {% endif %}
{% endif %}

{% if test_variant == "A" %}
  {% comment %} Control: standard cart {% endcomment %}
{% else %}
  {% comment %} Variant: cart with upsells {% endcomment %}
{% endif %}

Measurement framework:

Track these metrics for each variant:

Revenue per session (conversion rate multiplied by AOV) is the single best metric because it captures both conversion and order value changes simultaneously. A variant that increases AOV but decreases conversion might still win on revenue per session.

Run each test for at least 14 days to account for day-of-week variations in shopping behavior. Weekend shoppers behave differently from weekday shoppers, and a test that runs only Monday through Friday will produce skewed results.

Frequently Asked Questions

Does customizing the cart page affect Shopify checkout speed?

Cart page customizations do not affect checkout speed because the cart page and checkout page are separate entities in Shopify's architecture. Checkout runs on Shopify's servers with its own optimized code. However, heavy JavaScript on the cart page (poorly optimized upsell widgets, multiple tracking scripts) can slow the cart page itself, which indirectly increases abandonment. Keep total cart page JavaScript under 100KB and use lazy loading for non-critical elements.

Can I customize the cart page on all Shopify plans?

Yes, all Shopify plans (Basic, Shopify, Advanced, Plus) allow cart page customization through theme editing. The only checkout customization restriction is on the checkout page itself, which only Shopify Plus merchants can modify. Cart page changes — upsells, trust badges, shipping bars, notes — are available to everyone through Liquid template editing or apps. LiquidBoost snippets work on all Shopify plans.

Should I use a cart drawer (slide-out) or a dedicated cart page?

Both have merit, and the best choice depends on your product catalog. Cart drawers reduce friction for quick add-to-cart actions and work well for stores with low AOV and impulse purchases. Dedicated cart pages provide more space for upsells, trust signals, and order customization, making them better for higher-AOV stores. Many successful stores use both — a cart drawer for initial add-to-cart confirmation with a "View Full Cart" link to the dedicated page.

How many upsell products should I show on the cart page?

Show 2-3 upsell products maximum. One product is too few to provide options. Four or more products create visual clutter and decision paralysis that distracts from the checkout button. The products should be complementary to cart contents, priced lower than the main cart items (30-50% of AOV is the sweet spot), and visually compact. Test different quantities — some audiences respond better to a single strong recommendation over multiple options.

Will adding a free shipping bar cannibalize my shipping revenue?

In most cases, the AOV increase from the shipping bar more than offsets the lost shipping revenue. A store with a $60 AOV charging $8 shipping that sets a $75 free shipping threshold will see many customers add $15+ in products to avoid the $8 fee. The margin on those additional products typically exceeds the $8 shipping charge. Run the math for your specific margins before setting the threshold. If your products have very low margins, consider a higher threshold or partial shipping discount.

Keep Reading

• How to Create Product Bundles on Shopify
• How to Reduce Cart Abandonment on Shopify
• How to Display Promo Codes on Your Shopify Store

What if your cart page could rearrange its own layout based on each customer's browsing behavior — showing trust badges first to hesitant browsers and upsells first to confident buyers?