This tutorial shows how to create and store 'Short Titles' for products. These Short Titles can be placed on pages like collection to present a cleaner experience to the user that can reduce confusion and increase conversion.
A Tale of Two Product Descriptions
For SEO purposes, it is good to have a long, descriptive Product Title on a product page. It's the page's H1, so the content in it will carry weight. And for users that land directly on that page from offsite, a long title helps set the context for what the product is about.
Contrast that with the use of product titles on a collection page. On a collection page, the user has already made choices to get to that collection. For example, say one is looking at a collection of women's short sleeved shirts in size medium. The products titles could look something like this:
- Women's Short Sleeved Cotton Shirt, Size Medium, Color Red
- Women's Short Sleeved Cotton Shirt, Size Medium, Color Green
- Women's Short Sleeved Cotton Shirt, Size Medium, Color Blue
- Women's Short Sleeved Nylon Shirt, Size Medium, Color Black
- Women's Short Sleeved Nylon Shirt, Size Medium, Color White
- Women's Short Sleeved Nylon Shirt, Size Medium, Color Red
- Women's Short Sleeved Silk Shirt, Size Medium, Color Pink
- Women's Short Sleeved Silk Shirt, Size Medium, Color Pastel Blue
- Women's Short Sleeved Silk Shirt, Size Medium, Color Lavender
If we remove the redundant information, the product titles could look like this:
- Cotton - Red
- Cotton - Green
- Cotton - Blue
- Nylon - Black
- Nylon - White
- Nylon - Red
- Silk - Pink
- Silk - Blue
- Silk - Lavender
The second list provides a much cleaner page. And it is much easier for the user to navigate because it more clearly shows the differences between these similar products.
The Solution
With Shopify, we can only have one Product Title for each product. And that one title gets used everywhere: product pages, collection pages, cart, emails, etc.
We can, however, use product meta-descriptions to provide more flexability in the number and presentation of product descriptions.
So for this solution, there are two parts:
- Adding the code to display the Short Titles in liquid.
- Adding the Short Titles to products.
I've covered the basics on product metafields in a previous blog post. You can read that here.
Adding the code in liquid
The code change is pretty easy. All you need to do is replace the Product Title references with a version of the code below. You need to do this on any pages that you want to show the Short Title. I typically make this change to collection pages and leave product pages and cart as is.
Finding the appropriate code will take some detective work that will vary by theme. Some themes may have it buried in a snippet that is first referenced by the collection template, the collection section and then several nested snippets. For example, in the Turbo theme and had to go through these liquid files to find the code:
- Template - collection.liquid
- Section - collection-template.liquid
- Snippet - product-loop.liquid
- Snippet - product-thumbnail.liquid
- Snippet - product-info.liquid
The code you are looking for is a simple Product Title reference like:
Look for where the Product Title is being shown to the user on the page. There may be other references to product.title for things like alt text on images.
That code will be replaced with the following:
Note that the above code replaces the Product Title with the Short Title if the Short Title exists. And if the Short Title does not exist, the Product Title is used.
Adding the Short Titles
Short Titles can be added to individual products using the ShopifyFD Chrome plugin. Here's what it looks like in action:
And you can also use Shopify's product editor to edit metafields. Though there is no UI to access metafields there. You get the metafields to show by adding them to the URL like:
https://your-store.myshopify.com/admin/bulk?edit=metafields.product_meta.short_title&resource_name=Product
Taking it to the Next Level
This solution provides a second Short Title that gets added to all collection pages. This solution can be expanded on in the following ways:
- Adding Short Titles to pages other than collections.
- Having different Short Titles that get used in different situations. For example, you could create a metafield for Holiday Title that gets used on a Holiday collection page.
- Reversing the process. Create a Long Title and add it to the product page liquid. Then the existing Product Title (which you'll use as the Short Title) will show elsewhere without changing the liquid code.
Summary
By using meta-fields, your Shopify store can present two different product titles that get used as appropriate during the shopping experience.