Shopify Carousel Labels: How to Display Shorter Collection Names Without Harming SEO

Hey store owners! Ever found yourself staring at a beautifully designed collection carousel, only to notice that all your collection names start with the same repetitive prefix? Like "Men's T-Shirts," "Men's Jeans," "Men's Hoodies"? It looks a bit clunky, right?

That's exactly the challenge MEZ_MUS brought up in a recent community discussion, and it's a super common one. They wanted to display shorter, cleaner labels (think "T-Shirts" instead of "Men's T-Shirts") in their carousel, but without actually renaming the collections. Why? Because those full collection names are crucial for SEO, URLs, and consistent navigation across your site. Renaming them just for a carousel is a big no-no.

The good news? The community rallied with some fantastic solutions leveraging Shopify's powerful metafields and a touch of Liquid code. Let's dive into how you can achieve this polished look on your Shopify store.

The Power of Metafields: Custom Display Names

The overwhelming consensus from experts like Zanye, Mustafa_Ali, DanielAnderson, and many others was to use a custom.display_name metafield. MEZ_MUS had already created one, which is a great start!

Why metafields? Metafields allow you to add custom fields to almost anything in Shopify – products, collections, customers, pages, etc. This means you can store extra information (like a shorter display name) without altering the core data (your actual collection title). It's clean, scalable, and doesn't mess with your SEO.

Step-by-Step: Wiring Up Your Metafield

Here's how you can implement this solution:

  1. Create or Verify Your Metafield:
    • Go to your Shopify admin > Settings > Custom data.
    • Select "Collections."
    • Add a definition if you haven't already. Name it something like "Display Name" with a namespace and key of custom.display_name.
    • Important: As Mustafa_Ali pointed out, set the type to "Single line text" for easiest implementation. Rich text metafields require slightly different handling.
    • Metafield
  2. Populate Your Metafield:
    • Go to your Shopify admin > Products > Collections.
    • Select the collection you want to customize.
    • Scroll down to the "Metafields" section (usually at the bottom).
    • Enter your desired short label (e.g., "T-Shirts" for "Men's T-Shirts") into the custom.display_name field.
    • Collections
    • Only fill this in for collections where you want a custom label. The fallback will handle the rest!
  3. Edit Your Theme Code:
    • Go to Shopify admin > Online Store > Themes.
    • Highly Recommended: Duplicate your live theme before making any code changes. This is your safety net!
    • Click "Actions" > "Edit code" on your duplicated theme.
    • Locate the Liquid file responsible for rendering your collection carousel. This is often in a sections/ folder (e.g., sections/collection-list.liquid or sections/main-collection.liquid if it's part of the main collection page) or sometimes in a snippets/ folder. You'll be looking for a loop like for collection in collection_list.
    • Find where {{ collection.title }} is being outputted for the carousel label.
    • Replace that line with this code, as suggested by Mustafa_Ali and Ecom_swift_LLC:
    {%- assign display_title = collection.metafields.custom.display_name.value | default: collection.title -%}
    
    • Then, wherever {{ collection.title }} was previously, use {{ display_title }} instead.

    This code does two smart things: first, it tries to get the value from your custom.display_name metafield. If that metafield is empty for a particular collection, it gracefully "defaults" back to the original collection.title. Super clean!

  4. Clear Cache (if needed): Joshua827 mentioned needing to clear the theme cache. If your changes don't appear immediately, try clearing your browser cache or your theme's cache (if your theme has a built-in option).

The Liquid Filter Shortcut: Automatic Stripping

What if you have dozens of collections, and they all consistently start with "Men's"? Manually populating metafields for every single one can be a chore. This is where Liquid filters come in handy, as suggested by mastroke and Ploqo.

Option A: Simple remove_first

If you're sure all titles have the exact same prefix, you can use the remove_first filter:

{{ collection.title | remove_first: "Men's " }}

This will simply strip "Men's " from the beginning of the title. Keep an eye on the apostrophe – "Men's" (straight) vs. "Men’s" (curly) can make a difference! Ploqo highlighted this, suggesting you copy the apostrophe directly from your titles.

Option B: MayraApps' Robust Prefix Check

MayraApps pointed out a crucial flaw with simple remove or split/slice methods: they can accidentally strip words from titles that don't start with your prefix, or even remove parts of words. They offered a much safer, more robust Liquid snippet:

{%- liquid
  assign label = collection.metafields.custom.display_name.value | default: collection.title
  assign prefix = label | slice: 0, 6
  if prefix == "Men's " or prefix == "Men’s "
    assign label = label | slice: 6, 200
  endif
-%}
{{ label }}

This code is brilliant because it:

  • First, tries to use your custom.display_name metafield (giving you the ultimate override).
  • If no metafield is set, it falls back to the original collection.title.
  • Then, it checks if that label actually starts with "Men's " (handling both apostrophe types!).
  • Only if the prefix matches does it then slice off the first 6 characters ("Men's ").
  • Everything else is left untouched.

This combines the best of both worlds: automatic stripping for consistency, with a metafield override for those unique cases (like "Men's Jackets" becoming "Outerwear" as Ploqo suggested).

Crucial Warning: Theme Updates!

MEZ_MUS wisely asked about theme updates, and Mustafa_Ali and MayraApps gave some critical advice. Your collection names and metafield values are stored in Shopify's database, so they're safe from theme updates. However, any direct edits you make to your theme's Liquid files can be overwritten when Shopify pushes an update to a Shopify-managed theme (themes installed from the Theme Store).

Best Practices to Protect Your Customizations:

  • Always Duplicate Your Theme: Before touching any code, create a duplicate of your live theme. Work on the duplicate, preview it, and only publish it when you're confident.
  • Document Your Changes: Keep a simple record of which files you edited and what code you changed. This will save you huge headaches if you need to re-apply changes after an update.
  • Consider Custom Sections (OS 2.0): If your theme is Online Store 2.0 compatible, you might be able to create custom sections or blocks in your theme editor that are less prone to being overwritten. While this particular change is often a small tweak within an existing section, it's a good general practice.

As you can see, the Shopify community is a treasure trove of practical solutions! By leveraging metafields and smart Liquid code, you can easily achieve a cleaner, more professional look for your collection carousels without compromising your site's SEO. Just remember to always work safely with theme code, and you'll be good to go!

Share:

Use cases

Explore use cases

Agencies, store owners, enterprise — find the migration path that fits.

Explore use cases