The Easy Way To Add a Product Subtitle in Shopify

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.

Adding a Product Subtitle with Code Changes to the Theme

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:

• Log in to your Shopify account and select the “Settings” option in the left sidebar of the main Shopify control panel. 
• In the left sidebar of your store settings, select “Custom data”.
• Select the “Products” option in the “Metafield definitions” section of this settings page. 
• Click on the “Add definition” button.
• Name this new metafield “subtitles”. Also, click on the “Select type” option and set it to “Single line text” and “One value”. Then save your changes.

Once this new metafield has been created, you’ll be able to add a subtitle to any product in your catalog:

• Select the “Products” option in the left sidebar of the main Shopify control panel. 
• Click on the product that you want to add a subtitle to. 
• Scroll down to the “Metafields” section of the product settings page. Here, you’ll see that an option for “subtitles” has been added — enter a subtitle into this field and save your changes. 

For your metafield/subtitle to be displayed on the live version of your store, you now need to edit your theme files:

• Select the sales channel that you would like to customize in the left sidebar of the main Shopify control panel. 
• Open the “…” dropdown menu next to your theme, then select “Edit code” — this will open up Shopify’s code editor. 
• In the left sidebar of the code editor, go to the “sections” folder and open the “main-product.liquid” file (or you can use the search bar, also found in the left sidebar of the code editor, to locate this file). 

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. 

Using Shogun to Add a Product Subtitle without Code

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:

• After downloading and installing Shogun, select the “Apps” option in the left sidebar of the main Shopify control panel. 
• Open Shogun. 
• Go to the “Pages” section of the Shogun app. Here, you’ll see two tabs: “Shogun” and “Shopify”. 
• Open the “Shopify” tab — this is where you’ll find all of your Shopify pages that have not yet been imported into Shogun. 
• Set the page type filter to “Product”, then click on the “Import page” button next to the product page that you want to import.
• In the “Page layout options” section of the import settings, select “Custom layout” (the other two layout options won’t allow you to add or edit any elements in the area around the product title). Then, select “Import”. 

Once a page has been imported, you’ll be able to customize it with Shogun’s visual editor. To add your product subtitle:

• Go back to the “Pages” section of the Shogun app. 
• Open the “Shogun” tab — this is where you’ll find all the Shopify pages that have already been imported into Shogun. 
• Select the page you just imported to open it up in Shogun’s visual editor.
• Click on the “Elements” icon in the left sidebar of the visual editor (it’s the one that looks like a plus sign inside of a circle) to open the element library. 
• Click and hold on the icon for the “Text” element, then drag it over to just below the product title. 
• Write your product subtitle inside the “Text” element you just added below the product title. 

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.