5 months ago

Changing Title Size in Catalog and Product Page This post is outdated

Just like the title, I'm trying to change the font-size in both the catalog and the product description pages, but I can't seem to find the code that controls it.

5 months ago

Hi Joshua,

If you would like to change the font size for the title in your catalog page look for the code with the following: (it should be within collection-template) 

<h1 class="section-header--title section-header--left h1">Products</h1>

Once you find it simply replace it with this code: (I set the font size to 30px which enlarged it, to change to the size you want simply delete "30" and put the size you'd like)  :D

<h1 class="section-header--title section-header--left h1" style="font-size: 30px;">Products</h1>


For the Product Description page, find the code with the following: (should be within product-template)

<h1 class="h2" itemprop="name">1 1/4" dia. U-Bolt</h1>

We're going to do the same thing as we did to the previous, so replace with this code: (remember to put the size you like just delete the 30 I put and add the number you''d like)

<h1 class="h2" itemprop="name" style="font-size: 30px;">1 1/4" dia. U-Bolt</h1>


So, if you notice the only change we were doing was adding this small code:

style="font-size: 30px;"


I hope this proves to be helpful! (:

5 months ago

I tried your suggestions, but I'm using the Supply theme, and it doesn't have a collection-template section; the closest I have are collection-template.liquid and collection-list-template.liquid.  I tried adding the font-size style to the proper sections in both and it made no change on the page.

Last edited 5 months ago

You can do it in your style sheet scss.liquid file. 
You will have to figure out what the name of the class for your specific title is.
You can do that by going to your product page and after press "CTRL + SHIFT + I" if you are using google chrome. If you then hold above the title element it will show you the code similar to this:

<h2 itemprop="name" class="product-single__title">PRODUCT 1</h2>

Now you know the class name which in this case is "product-single__title"
You would then go to your scss.liquid file and insert the code below at the bottom of the file.

.product-single__title {
  font-size: 30px;

Don't forget to save.
You can do the same for the catalog page.

Log in or sign up for an account to reply.

Your Reply