Truncate product title cart page

Shopify Discussion
1

Hi! Can anyone help me truncate my product titles on the cart page? I use the dawn theme. Thanks :slightly_smiling_face:

2

Hello @andxmt

To truncate product titles on the cart page in the Dawn theme, you can modify the cart page template to limit how many characters of the product title are shown.

Here’s a clean way to do it:

Steps to Truncate Product Title on Cart Page (Dawn Theme)

  1. Go to your Shopify Admin → Online Store → Themes

  2. Click “Actions” → “Edit code” on your Dawn theme

  3. In the Templates or Sections folder, find and open:

bash..

sections/main-cart-items.liquid
  1. Look for this line (or similar):
{{ item.product.title }}

Replace it with:

{{ item.product.title | truncate: 30 }}

30 is the number of characters you want to allow. You can change this number to your preferred limit.

Optional: Add Tooltip for Full Title
To allow customers to still see the full title on hover:


  {{ item.product.title | truncate: 30 }}

Thank you :blush:

3

Hi @andxmt ,

Thanks for reaching out about truncating product titles on your cart page. I’ve looked at your Dawn theme code and have a simple CSS solution for you:

/* Truncate product titles in cart page */
.cart-item__name {
  display: -webkit-box;
  -webkit-line-clamp: 2; /* Change this number to control visible lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Same treatment for cart drawer if needed */
cart-drawer .cart-item__name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

To add this to your theme:

  1. Go to Shopify admin → Online Store → Themes
  2. Click “Actions” on your Dawn theme → “Edit code”
  3. Find the “Assets” folder and open “custom.css” (or create it if needed) or add to base.css at the bottom.
  4. Paste the CSS code and save

If you want only one line with ellipsis instead of two, just change the “-webkit-line-clamp” value to 1.

Let me know if you need any help implementing this or want to customize it further!

Best regards,
Shubham | Untechnickle

4

Hi! Thank you for your time. I’ve added the code at the bottom of the base.css folder and nothing visible happened after saving :disappointed_face:

5

Hi! Thank you for your time. I could only find this line that is similar: {{ item.product.title | escape }}

6

Update: I left the | escape in the code and added truncate and it works. The code looks like this: {{ item.product.title | escape | truncate: 45 }}
Thank you!

7

ok thats great m glad that worked. have you solved the issue ??

if its solved then like and mark it as accepted solution

and if its not solved yet plz let me know i wil try to fix it

happy to help again :blush:

Thank you :blush:

8

plz accept my solution… actually you accept your own solution :blush:

Thank you