Items Not Visible in Mobile Cart, but OK in Theme Editor

Technical Q&A

Topic summary

Mobile cart items (names/images) were not visible on iPhone, though the cart count appeared and everything looked correct in the Theme Editor and Chrome’s mobile inspect (Shopify theme Horizon 3.1.0). Issue reproduced in Safari and Chrome on iOS.

Diagnosis:

  • Primary cause: too many accelerated checkout buttons on mobile. Shopify shows up to 3 side‑by‑side; on iPhone an extra Apple Pay button appears, stacking buttons and pushing the cart item list out of view in the cart drawer.
  • Alternate angle: some themes include mobile-only CSS that may hide cart line items; user can test by “Request Desktop Website.”

Proposed fixes:

  • Add Custom CSS to limit the height/overflow of the additional checkout buttons area so the product list remains visible (CSS snippet provided). Screenshots illustrated the before/after.
  • Or reduce the number of accelerated checkout buttons.

Outcome/decision:

  • The poster disabled Accelerated Checkout Buttons, leaving only the standard “Check out” button (Edit Theme > Theme Settings > Cart). This restored item visibility on mobile.

Status: Resolved; no open questions.

Summarized with AI on December 11. AI used: gpt-5.
1

Hi all! I’m new here and have run into an issue with my Shopping Cart on Mobile. The items in the cart don’t display when viewed on an iPhone. Though it does show the number of items, it doesn’t display their product name or their images.

You can try for yourself on my site:

It looks great in the Theme Editor and when I “inspect” it at a mobile-size in Chrome. That’s how I’d like it to look on mobile for others.

If it matters, I’m working within Horizon 3.1.0. And I ran into the same issue on my iPhone running the Safari and Chrome browsers.

What do you think is the issue? Thank you for your help if you have any suggestions.

IMG_7AC4A3529BFA-1
IMG_7AC4A3529BFA-11125×2436 165 KB

2

You have too many payment options for mobile.

Shopify shows additional checkout buttons in a horizontal row, but only if it’s 3 or less.

On mobile you get Apple Pay in addition to Shop, Paypal and Google pay and these buttons are stacked leaving no space for product list.

An option is to limit the height of this cart drawer area and hide some of the buttons.
Something like this can be added to the Theme settings=> Custom CSS:

@media (max-height: 700px) {
    .additional-checkout-buttons {
        overflow: hidden;
        max-height: 115px;

    }
}

Screenshot 2025-11-26 at 7.39.22 PM
Screenshot 2025-11-26 at 7.39.22 PM402×688 40.5 KB
=>
Screenshot 2025-11-26 at 7.39.11 PM
Screenshot 2025-11-26 at 7.39.11 PM402×688 45.4 KB

1 Like
3

Hey! No stress this happens a lot on iPhones. :blush:
If your cart shows the number of items but not the product names or images, it’s almost always the theme hiding those details on mobile.

What’s probably happening

Some themes include mobile-only styling that accidentally says something like:
“Hide the cart items on small screens.”

So the cart looks empty even though it isn’t.

Quick way to test on your phone

  1. Open your cart on your iPhone.

  2. Tap the ‘AA’ icon in Safari’s address bar.

  3. Tap Request Desktop Website.

1 Like
4

That was a very helpful answer.

I decided to simply turn off those buttons and leave only the ‘Check out’ button.

For people in the future, that’s **Edit Theme > Theme Settings > Cart > Turn off ‘Accelerated Checkout Buttons’.
**
Thank you very much for your help, Tim.

1 Like