Skip to main content

Protect Your Upsell Strategy with CSS - Disable Clicks on Product Titles & Images in the Cart and Upsell

Prevent customers from clicking product titles and images in the cart and upsells to reduce distractions and protect upsell-only items.

Updated this week

Overview

This customization uses CSS to disable links on product titles and images in the cart drawer and upsell section. It helps keep the focus on completing checkout and prevents customers from leaving the cart to view product pages.

This is also useful for stores that offer exclusive upsell items that should not be accessed outside the cart.


Why this is useful

  • Reduces friction and keeps customers focused on checkout

  • Prevents navigation away from the cart, especially on mobile

  • Limits exposure of upsell-only products not meant to be browsed elsewhere


Where to find the custom CSS editor

  1. Go to Upcart > Cart Editor > Settings > Custom CSS

  2. Scroll down to the input field and paste your code

  3. Click Save

  4. Refresh your storefront to preview the change


Example CSS to disable clickable links

.upcart-product-title-link, .upcart-product-image-wrapper a, .upcart-upsell-item-card a {   cursor: none !important;   pointer-events: none !important; }

This CSS will:

  • Remove pointer functionality from product titles and images

  • Prevent customers from clicking through to product detail pages

  • Keep the styling and layout the same (only the interaction is disabled)


Need help?

Upcart’s support team does not provide assistance with custom CSS implementation. For advanced setup or styling, we recommend working with a Shopify Expert.

Did this answer your question?