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.
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:
If we remove the redundant information, the product titles could look like this:
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.
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:
I've covered the basics on product metafields in a previous blog post. You can read that here.
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:
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.
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:
This solution provides a second Short Title that gets added to all collection pages. This solution can be expanded on in the following ways:
By using meta-fields, your Shopify store can present two different product titles that get used as appropriate during the shopping experience.