How to move Cart Quantity selector on Spotlight theme

AI-generated summary

The issue is customizing Shopify’s Spotlight theme so the cart quantity appears in the header as text like “Cart: 1,” matching a reference screenshot, instead of only relying on the product-page quantity selector or the default cart badge.

Initial guidance clarified that the “Quantity selector” on the product page can be hidden through the theme editor by opening a product page section, finding the Quantity selector block, and clicking the eye icon. That part was confirmed to work.

The remaining request is to change Spotlight’s default header cart display. Spotlight automatically shows a small numeric cart badge when items are in the cart, but it does not provide a theme-editor toggle to spell out “Cart:” beside the count.

The proposed solution is a small Liquid code edit: search the theme snippets for a cart-related file, likely something like cart-icon-bubble.liquid, find cart.item_count, and change the output from {{ cart.item_count }} to Cart: {{ cart.item_count }}. The discussion appears mostly resolved, pending the user making or verifying that code change.

I want to remove the “quantity 1 in cart” option on my product pages to the upper right hand corner beside the shopping cart icon on my page. I have attached a picture of my site now as well as the site that I am referencing the placement from in the top right corner as well.

@qbhood Yes, this should be possible with a small theme code customization. The Quantity (1 in cart) text/section on the product page would need to be removed, and the cart quantity should instead be displayed beside the cart icon in the header, like in your reference screenshot.

The exact code will depend on your Shopify theme, since different themes use different cart/header markup. I’d first check the theme’s header and product-form files to identify the existing cart count and then move/hide the relevant element rather than adding a second cart counter.

If you share the theme name (or the relevant header/product Liquid code), someone can point you to the exact file and code changes.

Hello @qbhood that “Cart: 1” in the corner on the reference site isn’t something they added, it’s just their theme’s normal header cart icon showing the item count, every theme including Spotlight already has that. What you want is to hide the stepper on the product page itself. In the theme editor, open a product page, look at the block list for that section, find “Quantity selector,” hover over it and click the eye icon to hide it. That removes it from the page and shoppers just see the count on the cart icon like your reference site.

Hope that helps

If this helped, please mark it a solution :slight_smile:

Thank you, this did work the add to cart option on my product page is gone. But I would still like for the the quantity in cart to be displayed in the upper right hand corner like this

Screenshot 2026-09-13 at 3.47.46 PM

Theme name is Spotlight

Hello @qbhood glad that part’s sorted. That cart count on the icon is automatic in Spotlight, once there’s at least 1 item in the cart the header cart icon shows a small number badge on its own, no code needed for that part. If it’s not showing up, check your header section settings for a custom cart icon block that might be overriding the default one.

Got it, I do see that. The look I am trying to achieve is for the word “Cart” to be spelled out instead with the actually quantity beside it like in the reference image.

I’d separate the visual relocation from the cart behaviour it might change.

Fact: you want the “quantity 1 in cart” indicator moved beside the cart icon on the Spotlight theme, matching a reference layout.

Before changing the header, check the mobile buying path: product page → quantity control → add to cart → cart icon/badge → cart view. Keep the current quantity visible where shoppers choose it, make the cart badge update immediately after add-to-cart, and avoid showing two competing quantities (line-item quantity versus total cart items) without labels.

Hypothesis: moving the indicator could improve discoverability, but it could also make the header feel like a second quantity editor. To verify, test one product with quantity 1 and a multi-unit cart on a 375px viewport, then compare add-to-cart completion and cart-icon taps before and after the change.

Hello @qbhood that part isn’t a toggle in the theme editor, Spotlight’s cart icon only shows a plain number badge by default. To spell out “Cart:” next to it you’d need to edit the Liquid: Online Store > Themes > Edit code, then find the header snippet that renders the cart icon (search the header section file for “cart-count” or “item_count”) and add the word “Cart:” as static text right before that count variable. Quick edit for a developer, not something you can do from the customizer.

Hope that helps

Is it the header.liquid section that I would find the file for “cart-count” or “item_count”?

Hello @qbhood it’s usually not in header.liquid itself, most themes built on Dawn’s architecture pull the cart count from a separate snippet like cart-icon-bubble.liquid that gets included into the header. Check your Snippets folder for anything with “cart” in the name. And it’s item_count you want (cart.item_count), not cart-count, that’s the actual variable Shopify themes use for the number in the cart.

Once you find the snippet with the cart count (search your Snippets folder for a file with “cart” in the name), look for where cart.item_count is displayed. Right before that variable, add "Cart: " (with a space after the colon). For example, if the current code reads {{ cart.item_count }}, change it to Cart: {{ cart.item_count }}. Save and refresh your store to see the update.

If this helped, mark it helpful for others.