Want to add a product subtitle in Shopify?
There are many potential benefits to doing so. For example, take a look at this Ikea product page — in the subtitle, Ikea distills the most important information about the product (what it does and what materials it is made out of) into just a few words.
Once visitors land on a product page, they usually only take a few seconds to decide whether they will back out or stick around to learn more. The higher a piece of information is located on the page, the more likely it is that visitors will actually see it in this initial scan. By highlighting key details and benefits right up top in a product subtitle, you can improve your odds of capturing the visitor’s interest and converting them into a customer.
You could also use a product subtitle to link to a product’s collection or designer page, highlight a promotional offer, or just insert a quip that will help reinforce your brand voice.
Product subtitles are not a default customization option in Shopify. To add this feature to your store, you’ll need to use one of the following two methods:
One way to add a product subtitle is by editing your theme files. To implement this solution, you’ll need to create a metafield for product subtitles and then reference this new metafield in your theme’s “main-product.liquid” file.
Metafields allow you to store and display data that isn’t accounted for in Shopify’s default settings. For example, if you were to go to the settings for a particular product in Shopify, you would find fields where you can input the title, description, price, and a few other key pieces of information — but there’s no such pre-existing field for a product subtitle. You’ll need to create this field yourself by adding a new metafield:
Once this new metafield has been created, you’ll be able to add a subtitle to any product in your catalog:
For your metafield/subtitle to be displayed on the live version of your store, you now need to edit your theme files:
For the subtitle to be rendered properly, we need to insert the code for it directly below the code for the product title. What the product title code looks like exactly will depend on which theme you’re currently using. In Shopify’s default Dawn theme, it looks like the code snippet below — if you’re using a different theme, you should still be able to find it by searching for something similar:
{%- when 'title' -%}
<div class="product__title" {{ block.shopify_attributes }}>
<h1>{{ product.title | escape }}</h1>
<a href="{{ product.url }}" class="product__title">
<h2 class="h1">
{{ product.title | escape }}
</h2>
</a>
</div>
Just below this section, we’ll insert the following code for the product subtitle:
{% unless product.metafields.custom.subtitles == blank %}
<p class ="subtitle mb-4 ">
{{ product.metafields.custom.subtitles }}
</p>
{% endunless %}
Don’t forget to save your changes.
Once this code has been added, your subtitles will be displayed for each product that has one. And because of the way this code is written, the subtitle section won’t appear for any products that don’t have a value in the metafield — that means you won’t need to worry about any awkward blank spaces on product pages that happen to not have a subtitle.
It’s especially easy to add subtitles to your product pages with Shogun.
First, though, you’ll need to import any pages that you want to edit from Shopify:
Once a page has been imported, you’ll be able to customize it with Shogun’s visual editor. To add your product subtitle:
Shogun gives you countless ways to customize the styling of your product subtitle section.
For the font, you have thousands of options to choose from, and you can select the exact size and color you want as well. You can adjust the margins and padding of the product subtitle section to get the perfect amount of space between it and the surrounding elements. The border and box shadow options can be used to really make this section stand out. And there are even animation options that you can enable to have the product subtitle fade, zoom, flash, bounce, etc.
