Price overlap with the product name on popup cart

Store Design
, , ,

Topic summary

A Shopify store owner reported a display issue where product prices overlap with product names in the popup cart on both desktop and mobile devices.

Problem Identified:

  • Price text overlapping product names in cart drawer
  • Long product names requiring horizontal scrolling to view fully

Solution Provided:
A community member (Tech_Coding) offered CSS code fixes to be added to the theme.liquid file:

  1. First fix: Hide the overlapping price element on the right side using display: none !important
  2. Second fix: Enable text wrapping for long product names using white-space: normal and word-break properties

Outcome:
Both CSS solutions were successfully implemented and resolved the display issues. The store owner confirmed the fixes worked and marked the responses as accepted solutions.

Summarized with AI on November 6. AI used: claude-sonnet-4-5-20250929.
6

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

#CartDrawer-CartItems a.cart-item__name.h4.break { white-space: normal; word-break: break-word; overflow-wrap: break-word !important; }

Tech_Coding_0-1725786061674.png
Tech_Coding_0-1725786061674.png379×437 30.6 KB

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.