Truncate product title cart page

Shopify Discussion

Topic summary

A user sought help truncating product titles on the cart page using Shopify’s Dawn theme.

Two solutions were offered:

  1. Liquid template modification: Edit sections/main-cart-items.liquid and modify the product title line from {{ item.product.title }} to {{ item.product.title | truncate: 30 }}, where 30 represents the character limit. An optional tooltip can be added to show the full title on hover.

  2. CSS approach: Add CSS targeting .cart-item__name with -webkit-line-clamp property to limit visible lines (typically set to 1 or 2 lines) with ellipsis overflow.

Resolution:
The user successfully implemented the Liquid method after finding the actual code line was {{ item.product.title | escape }}. The working solution became: {{ item.product.title | escape | truncate: 45 }}, keeping the escape filter while adding truncation at 45 characters. The CSS solution was attempted but didn’t produce visible results.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
1

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

1 Like
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

2 Likes
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:

1 Like
8

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

Thank you