How to Add an Ellipsis to Product Titles in Shopify’s Dawn Theme | Step-by-Step Guide

If you’ve ever come across product titles that get cut off with “…” at the end instead of awkwardly breaking onto a new line, that’s called an ellipsis. It’s a small but powerful design trick that keeps your store looking clean and professional. In this guide, I’ll show you exactly how to add an ellipsis to product titles in Shopify’s Dawn Theme step by step—so your store maintains a polished and user-friendly look.

What is an Ellipsis?

An ellipsis (…) is simply a set of three dots used to indicate that a text has been shortened. In web design, it’s often used to trim long text while keeping the layout neat and readable. You’ve probably seen it on eCommerce stores where product names are too long to fit in a single line. Instead of breaking the design, the title gets truncated with an ellipsis, signaling that there’s more to read.

For example:
“Men’s Classic Leather Jacket – Brown, XL” → displays as → “Men’s Classic Leather Jack…”

Still unsure about how an ellipsis works? Let’s take a look at a visual example:

In the first block of products under “Before,” you’ll notice that some product titles take up three lines, while others stretch to four lines. This inconsistency causes the product prices to be misaligned, making the layout look messy and unorganized.

Now, compare it to the second block of products under “After.” Here, all product titles are neatly trimmed to two lines using an ellipsis, ensuring that everything—from product titles to prices—is perfectly aligned. This small tweak creates a cleaner, more professional look for your store, improving both design and readability.

When to Add an Ellipsis & Its Benefits

Using an ellipsis for product titles is especially useful when:

1. Product names are too long – Helps prevent messy layouts by keeping text within a fixed space.
2. Your store’s design needs consistency – Ensures all product titles are uniform in length.
3. You want a clean, professional look – Avoids awkward text wrapping that could disrupt your store’s aesthetic.
4. You’re optimizing for mobile users – Keeps titles readable on small screens without taking up too much space.

By implementing an ellipsis, you improve the overall shopping experience, making your store look more professional and user-friendly.

Now, let’s dive into how you can add an ellipsis to product titles in Shopify’s Dawn Theme!

To truncate product titles in the Featured Collection block of the Dawn theme and on collection pages, we first need to access the theme code editor. Here’s how you can do it:

1. From your Shopify dashboard, navigate to Online Store > Themes.
2. Click on the three-dot menu next to your active theme and select Edit Code.

Check the screenshot below for visual guidance:

Once you’re in the theme code editor, navigate to the layout folder and open the theme.liquid file. Scroll down until you find the closing </body> tag.

Take a look at the screenshot below for visual guidance:

Right above the closing </body> tag, copy the code below and paste it there:

<script>    
 document.addEventListener('DOMContentLoaded', function() {
  const elements = document.querySelectorAll('.product-card-wrapper .card__heading a');
  const maxLength = 40;
   elements.forEach(function(element) {
   let text = element.textContent.trim();
   if (text.length > maxLength) {
   text = text.substring(0, maxLength) + '...';
   element.textContent = text; 
   }
  });
});
</script>

Check out the screenshot below to see how it looks after adding the code:

Now, just click the Save button in the top right corner to apply the changes. Check out the screenshot below for visual guidance:

And that’s it! When you preview your website, you’ll notice that product titles in the Featured Collection block on the homepage, as well as on collection pages, are now neatly truncated to just one and a half lines. This keeps everything looking clean and well-aligned.

Check out the screenshot below for visual guidance:

The key part of the code you need to focus on is this line:

const maxLength = 40;

This defines the maximum number of characters displayed in the product title.

• If you want to show fewer characters, simply change 40 to 30 (or any lower number) based on your preference.
• If you want to display more characters, increase the number from 40 to 50 or higher.

Adjust this value as needed to get the perfect look for your store!

Summary:

In this guide, we walked you through the process of adding ellipsis (truncate) to product titles in Shopify’s Dawn theme. This helps maintain a clean and professional look by ensuring all product titles remain consistent in length. We also provided a step-by-step guide on modifying the theme code to implement this feature easily. By following these steps, you can enhance your store’s design and improve the shopping experience for your customers.