Un-Hyphenate Your Shopify Product Titles: A Community-Tested Fix for Mobile Displays

Hey store owners!

Ever pull up your beautiful Shopify store on your phone, scroll through your product listings, and suddenly cringe? You see a product title, perfectly fine on desktop, now awkwardly broken mid-word with a hyphen. It’s a small detail, but it can really mess with the professional look and feel of your shop. If this sounds familiar, you’re definitely not alone. It’s a super common issue, and it recently popped up in the Shopify Community forums with a store owner named elaurellel.

The Hyphenation Headache: Why Product Titles Break on Mobile

elaurellel, using the popular Impulse theme, started a thread asking for help with product titles hyphenating on mobile. What made it extra tricky for her was that it looked fine in the theme editor – the problem only showed up on the live site, specifically on phones. This is a classic scenario, and it highlights a common challenge with responsive design.

Here’s a peek at what she was seeing:

The reason this happens usually boils down to your theme’s CSS (Cascading Style Sheets). Modern themes often include rules to prevent really long words from overflowing their containers, especially on smaller screens. Sometimes, these rules include properties like hyphens: auto; or word-break: break-word; which, while well-intentioned, can lead to these undesirable mid-word breaks.

Community to the Rescue: Troubleshooting and Solutions

As soon as elaurellel shared her store URL (whisperinwax.com), the community jumped in to help. Devcoders and ProtoMan44 quickly asked for the link to inspect the live site, which is always the best first step for these visual glitches.

ProtoMan44 made a really important observation: while the issue wasn't reproducible on his laptop, it was clearly visible on an iPhone 13. This is a crucial takeaway for any of us troubleshooting mobile display issues: Chrome DevTools’ device inspector is great, but nothing beats testing on a real device!

Here’s what ProtoMan44 saw on an actual iPhone versus the Chrome inspector:

IPHONE

Chrome inspector.

The General CSS Approach (Good for Many Themes)

Several experts, including ProtoMan44, Subhan_Tariq, and topnewyork, suggested adding CSS rules to explicitly disable hyphenation and control word breaking. The idea is to target the specific CSS classes used for product titles in your theme and tell them, "No hyphens, please!"

Subhan_Tariq provided a comprehensive snippet that’s a great starting point for many themes:

.grid-product__title,
.grid-product__title a,
.product-single__title,
.product__title {
  -webkit-hyphens: none !important;
  hyphens: none !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

This code explicitly sets hyphens to none (including the -webkit- prefix for broader browser compatibility) and makes sure word-break and overflow-wrap are set to normal. The !important flag is often used to ensure these rules override any conflicting rules defined by the theme.

Another similar suggestion from topnewyork, targeting slightly different classes, was:

.product-item__title,
.card__heading {
  -webkit-hyphens: none !important;
  -ms-hyphens: none !important;
  hyphens: none !important;
}

To implement these, you’d typically go to Online Store > Themes > Actions > Edit code, then look for a file like theme.css, base.css, or theme.scss.liquid in the Assets folder. You’d paste the code at the very bottom of that file and save. If you’re not sure of the exact class names for your theme, Subhan_Tariq also recommended inspecting the title element on your live site to find them.

The Winning Solution for Impulse Theme Users!

While the general CSS approaches are solid, sometimes a theme has very specific default rules. This was the case for elaurellel and her Impulse theme. Tim_tairli pinpointed the exact issue: the Impulse theme’s assets/product-grid-item.css included word-break: break-word; hyphens: auto; for the .grid-product__title element.

To override this effectively, tim_tairli suggested a more targeted approach using the word-break: keep-all; property.

And the good news? This is the one that worked for elaurellel!

Here’s the exact code snippet:

.grid-product .grid-product__title {
  word-break: keep-all;
}

Tim_tairli did add a helpful caveat: "Hopefully you do not have very long words in your product titles." This is because keep-all prevents breaking, so if a word is truly massive, it might overflow its container instead of hyphenating.

How to Implement the Fix (Step-by-Step)

Since tim_tairli’s solution worked for the Impulse theme, let’s focus on that method first. It’s also generally a safer bet to use the "Custom CSS" area in your theme settings, as it keeps your changes separate from the core theme files, making updates easier.

Option 1: Using the Theme Settings Custom CSS (Recommended for Impulse and most modern themes)

1. From your Shopify admin, go to Online Store > Themes.
2. Find your current theme (e.g., Impulse) and click the Customize button.
3. In the theme editor, look for a small cog icon (⚙️) in the bottom-left corner. This is your "Theme settings." Click it.
4. From the menu that appears, select Custom CSS.
5. In the custom CSS box, paste the following code:

.grid-product .grid-product__title {
  word-break: keep-all;
}

6. Click Save in the top right corner.
7. Now, clear your browser cache (if needed) and check your product pages on a real mobile device to confirm the hyphenation is gone!

Option 2: Editing the Theme’s CSS File (Alternative for other themes or if Option 1 doesn’t work)

If the above method doesn’t quite do the trick for your specific theme, or if you’re on an older theme without a "Custom CSS" section in theme settings, you can try adding the more general CSS rules directly to your theme’s main CSS file.

1. From your Shopify admin, go to Online Store > Themes.
2. Find your current theme and click Actions > Edit code.
3. In the left-hand sidebar, open the Assets folder.
4. Look for a file named theme.css, base.css, theme.scss.liquid, or similar. (It might vary by theme.) Click to open it.
5. Scroll all the way to the bottom of the file.
6. Paste one of the more comprehensive code snippets shared earlier. For example, Subhan_Tariq’s suggestion:

.grid-product__title,
.grid-product__title a,
.product-single__title,
.product__title {
  -webkit-hyphens: none !important;
  hyphens: none !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

7. Click Save.
8. Test on a real mobile device. If it still doesn’t work, you might need to "inspect element" on your live site’s product titles to find the exact CSS class names your theme uses and update the code accordingly.

Dealing with these little visual quirks can be frustrating, especially when they only show up on certain devices. But as this community thread beautifully illustrates, there's always a solution to be found, often with a little help from your fellow Shopify merchants and experts. Don’t hesitate to dive into the forums or experiment with your theme’s CSS. Happy selling!