Change font sizes
This tutorial will give you a quick introduction to the Chrome Developer Tools — DevTools for short. The DevTools will allow you to make simple style changes to your store front, changes not possible to make with edits to your Customize theme page. Please review our info on customization support before proceeding.
If you are editing content inside the Rich Text Editor, you will be able to change the size of text using the Formatting tool. You can access the Formatting tool by clicking on the letter A in the Rich Text Editor menu bar (see below). The Paragraph format gives you the regular “body text” size. Headings are larger. The heading 1 is the largest, while the heading 6 is the smallest.
If you need to change the size of text not created in the Rich Text Editor, you need to do so in the Themes section of your store's admin.
Let's say you want to make your collection title smaller on collection pages. This is the before and after you want:
You first need to look through your Customize theme page, to see if there's any Typography or Font settings that control that which you want to change.
If there is nothing, then you will need to edit your theme's stylesheet.
A stylesheet is used to define the look and feel of a web site. It has the ability to completely change the style of your web site.
One does not simply open a stylesheet in a text editor and dive into it. Nowadays, web designers depend on tools to help them identify which style needs to be edited, in which stylesheet, and how. We'll give you a taste of such tools, by presenting you the Google Chrome Developer Tools — DevTools for short. We will use DevTools to edit your font size as per the method described below.
Go and install Google Chrome if you don't have it already. The DevTools come with the Google Chrome browser.
Browse to the page on your storefront where the text is either too large or too small.
Click on Alt-Cmd-I on the Mac, or Alt-Ctrl-I in Windows, to bring up Chrome DevTools:
Click on the zoom icon at the bottom of the Chrome DevTools window to turn on the “inspect” mode. The zoom icon will turn blue:
Click on the text on the page that you find too large, or too small. The element will turn blue to show that it's been selected:
You can also right-click on any element of the page, and select Inspect Element in the contextual menu.
In the right panel of Chrome DevTools, under Styles, scroll down till you locate the CSS that sets the
font-sizeon the selected text:
Double-click on the
font-sizevalue to edit it. Type in a new value. Edit that value until you're satisfied with the result. The changes are applied in real time above:
Then select the entire CSS rule that contains your edited font-size property, and copy it to your clipboard. Don't forget to include the closing curly brace:
If you find it difficult to select the CSS in that panel, click on the stylesheet name in the right corner of the CSS rule. That will bring you to the Sources panel, where you will see the first line of the CSS rule highlighted in yellow inside its CSS file. You can copy the CSS from there.
Go to the Edit HTML/CSS page, then click Assets, and locate in there a file that ends with the extension
.css.liquid. You usually have two such files, one for your store front called
style.css.liquid, and another named
checkout.css.liquidthat styles your checkout pages. Click on the appropriate stylesheet file to open it in your Edit HTML/CSS page.
Scroll all the way down to the bottom of the file:
Paste the code from your clipboard:
Remove all but the
font-sizeproperty, and save your stylesheet:
Go to to your storefront and reload your web page (
Ctrl-Rin Windows or
Cmd-Ror the Mac) to see if the text size is the way you want it.
Developer Tools alternatives
You can also use Firebug in Firefox. You will need one tool or another though, because you can't read through the hundreds of lines of CSS in your stylesheet and find what you need to edit — even when you are a seasoned professional! To edit CSS, you need to use a developer tool that allows you to inspect your web page, and that enables you to quickly locate the CSS that's applied to any element of the page.
Learn more about Chrome Developer Tools
- Learn how to edit styles and the DOM.
- Follow the first chapter “Getting Started, Basic DOM and Styles” in the course Chrome Developer Tools at Code School.
You can get help in our Community forums in the design category. Do post a link to your web page, and do share your storefront password, so that the designers in the Shopify community can help you. If editing CSS is not your cup of tea, you can hire a Shopify expert to help customize the look and feel of your theme.