How To Center the Product Title in Shopify

Shopify is quite flexible, giving you the potential to create whatever kind of ecommerce store you want. 

Indeed, there are hundreds of Shopify themes to choose from, and they each come with a wide variety of features and customization options. 

Also, if you can’t get exactly what you want with just the default settings of your theme, Shopify provides you with two workarounds: you can make edits to the theme code yourself, or you can use a third-party app to add extra functionality to your store. 

Centering the Product Title with Code Changes to the Theme

Each Shopify theme comes with its own arrangement of default customization settings. But even if the settings for your particular theme don’t offer an option for centering product titles, you can still implement this styling choice by making some edits to your theme code.

As far as web development goes, this isn’t difficult at all. While Shopify themes are built with several different coding languages (primarily Liquid, Shopify’s open-source templating language, as well as CSS and JavaScript), you’ll only need to use CSS for this type of edit. 

Let’s imagine that you’re using the Sense theme. If you were to open Shopify’s built-in theme editor and navigate to the product page template, you would be shown the following message when you select your product title: “No customizable settings available.” 

Shopify’s “Sense” theme does not offer a default customization option for centering product titles.

There are actually two ways to solve this problem through code changes: you can edit your theme files directly, or you can add code through Shopify’s built-in theme editor. 

To use the theme files method, you need to access your theme’s “base.css” file:

  • Log in to your Shopify account and 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 the theme you’re currently using, then select “Edit code” — this will open Shopify’s code editor. 
  • In the left sidebar of the code editor, go to the “Assets” folder and open “base.css”.

At the bottom of this file, add the following code:

.product__title h1 {
  text-align: center;
}

Then, save your changes.

Be sure to save any changes that you make to your “base.css” file.

That’s the end of this process for editing your theme files. If you’d prefer to add this code through Shopify’s built-in theme editor instead:

  • Select the sales channel that you want to customize in the left sidebar of the main Shopify control panel. 
  • Select the “Customize” button next to the theme you’re currently using — this will open up Shopify’s built-in theme editor. 
  • Use the dropdown menu located at the top of the theme editor to navigate to the template you’re currently using for your product pages (in most cases, this will be the “Default product” template).
  • Click on the “Product information” section that contains your product title — this will open up the section’s customization settings in the left sidebar of Shopify’s built-in theme editor. 
  • Scroll down to the “Custom CSS” field and enter the code snippet featured above for centering product titles. 
You can enter custom CSS code directly through Shopify’s built-in theme editor.

Whether you insert code through Shopify’s built-in theme editor or make direct edits to your theme files, once this code snippet has been added you’ll see that the product titles are now centered in both Shopify’s built-in theme editor and the live version of your storefront. 

You’ll see your code changes reflected in Shopify’s built-in theme editor.

Using Shogun to Center the Product Title without Code

Shogun allows you to center product titles with just a couple clicks.

But before you can do that, you’ll first need to import the pages you want to edit from Shopify into Shogun:

  • 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 the pages on your Shopify store that have yet to be imported into Shogun. 
  • Select the “Import page” button next to the page that you would like to import. 
  • Select the “Custom layout” option (the other two options here won’t allow you to edit the styling of the product title), then select “Import”. 
You must import pages from Shopify before you can edit them in Shogun.

Once your page has been imported, you can then customize it with Shogun’s visual editor:

  • Go back to the “Pages” section of the Shogun app — but this time, open the “Shogun” tab. 
  • The “Shogun” tab contains all of the pages that you have already imported from Shopify into Shogun. Select the page you just imported to open it up in Shogun’s visual editor. 
  • Click on the “Product title” element to open its customization settings in the right sidebar of the visual editor. 
  • Open the “Alignment” setting option and select the center align icon. 
Shogun offers an “Alignment” setting option that you can use to quickly center product titles.

In addition to adjusting the alignment of the text, Shogun also makes it easy to customize your product titles in many other ways, including: 

  • Heading type: While “h1” is the standard heading type for product titles, you can choose any option between “h2” and “h6” if you prefer. 
  • Font: The entire Google Fonts library comes included with Shogun — this gives you 1,800 options for your product title font. 
  • Size: Select the exact pixel size that you want to use for your product title. 
  • Text color: Select the exact hex code or RGBA values of the color you want to use for your product title. 
  • Line height, margins, and padding: Determine how much space separates your product title from other elements on the page. 
  • Letter spacing: Determine how much space there is between each letter in your product title.
  • Background color: Choose a background color for your product title that’s different than the background color for the rest of the page — this styling choice is sure to grab the visitor’s attention. 
  • Borders: Adding a border around your product title is another great way to catch the visitor’s eye. Shogun gives you options for solid, dashed, and dotted borders, and you can customize the border thickness and border radius (how rounded the corners are).
  • Box shadow: Shogun also allows you to add a box shadow to your product title to help it stand out. 

And that’s all just for the title text — from CTA buttons to product image sliders to customer reviews, Shogun provides you with extensive customization options for every other element of your product pages as well.

Back to blog