Change font size for my collection pages (H1, H2, H3)

Technical Q&A
1

Hi, we are using an external 3rd party theme - and I would love to change the font sizes for all of our HEADINGS (H1, H2, H3, H4) in the Rich Text Editor when loading content/copy for our collection pages.

How can assign different font sizes for our headings??

/============================================================================
Headings
==============================================================================/

h1, h2, h3, h4, h5, h6 {
display: block;
@include headerFontStack;
margin: 0 0 ($gutter / 4);

a {
text-decoration: none;
font-weight: inherit;
}
@include media-query($medium-up) {
margin: 0 0 ($gutter / 2);
}
}

h1 {
font-size: em(floor($type_header_base_size * 0.85));
@include media-query($medium-up) {
font-size: em($type_header_base_size);
}
}

h2 {
font-size: em(floor($type_header_base_size * 0.9 * 0.85));
@include media-query($medium-up) {
font-size: em(floor($type_header_base_size * 0.9));
}
}

h3 {
font-size: em(floor($type_header_base_size * 0.85 * 0.85));
@include media-query($medium-up) {
font-size: em(floor($type_header_base_size * 0.85));
}
}

h4 {
font-size: em(floor($type_header_base_size * 0.54 * 0.85));
@include media-query($medium-up) {
font-size: em(floor($type_header_base_size * 0.54));
}
}

h5,
h6 {
font-size: em(floor($type_header_base_size * 0.5));
}

.h1 { @extend h1; }

.h2 { @extend h2; }

.h3 { @extend h3; }

.h4 { @extend h4; }

.h5 { @extend h5; }

.h6 { @extend h6; }

// Standardize text spacing sometimes

.text-spacing {
margin-bottom: $gutter / 2;
}

/================ Rich Text Editor Styles ================/

.rte {
h1 {
font-size: em(floor($type_header_base_size * 0.85));
@include media-query($medium-up) {
font-size: em($type_header_base_size);
.grid__item.medium-up–one-half.section-header__item .section-header__title{
font-size: 18px !important;
}
}
}

h2 {
font-size: em(floor($type_header_base_size * 0.85 * 0.85));
@include media-query($medium-up) {
font-size: em(floor($type_header_base_size * 0.85));
}
}

h3 {
font-size: em(floor($type_header_base_size * 0.69 * 0.85));
@include media-query($medium-up) {
font-size: em(floor($type_header_base_size * 0.69));
}
}

h4 {
font-size: em(floor($type_header_base_size * 0.59 * 0.85));
@include media-query($medium-up) {
font-size: em(floor($type_header_base_size * 0.59));
}
}

table {
@include media-query($small) {
font-size: em($type_base_size - 3);
td, th {
padding: 6px 8px;
}
}
.collapsible-content & {
font-size: em($type_base_size - 3);
td, th {
padding: 6px 8px;
}
}
}
}

/================ Larger text styles ================/

.larger-text {
.h3 {
font-size: em(floor($type_header_base_size * 0.85));
@include media-query($medium-up) {
font-size: em($type_header_base_size);
}
}
p {
font-size: em($type_base_size + 1);
@include media-query($medium-up) {
font-size: em($type_base_size + 2);
}
}
.subtitle {

@IF $type_base_accent_transform {
font-size: em(ceil($type_base_size * 0.85));
} @else {
font-size: em($type_base_size);
}
@include baseAccentFontStack;
margin-bottom: 5px;
@include media-query($medium-up) {
@IF $type_base_accent_transform {
font-size: em(ceil($type_base_size * 1));
} @else {
font-size: em(ceil($type_base_size * 1.13));
}
}
}
}

/================ Blog Typography ================/

.date {
display: inline-block;
line-height: 1.7;
margin-bottom: 5px;
@include headerAccentFontStack;

@include media-query($medium-up) {
margin-bottom: 0;
}

.section-header &:last-child {
margin-bottom: 40px;
}
}

.comment-author {
margin-bottom: 0;
font-size: 16px;
}

.comment-date {
@include baseAccentFontStack;
font-size: em(12px);
display: block;
margin-top: 3px;
@include media-query($small) {
font-size: em(10px);
margin-bottom: $gutter / 2
}
}

2

@Rebekah82 ,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. In your theme.liquid file, find the (press CTRL + F or command + F on Mac)
  3. paste this code right above the tag:
h1{
    font-size: 20px;
}

h2{
    font-size: 19px;
}

h3{
    font-size: 18px;
}

h4{
    font-size: 17px;
}

h5{
    font-size: 16px;
}

h6{
    font-size: 15px;
}

@media (max-width: 767px){
    h1{
        font-size: 20px;
    }
    
    h2{
        font-size: 19px;
    }
    
    h3{
        font-size: 18px;
    }
    
    h4{
        font-size: 17px;
    }
    
    h5{
        font-size: 16px;
    }
    
    h6{
        font-size: 15px;
    }
}

You can change the values as per your wish. The ones below the “media” line are for mobile devices.

Kind regards,
Diego

3

Sorry this wouldn’t work. The code needs to be changed in the: Assets > theme.scss.liquid

4

@Rebekah82

You can move the code to theme.scss. Why exactly wouldn’t it work?

5

Thank you so much, worked straight away!

-Helga

6

Hello Diego, would you happen to know how to change it today? I see your post is from 3 years ago so some things changed. today I do not find the **tag in the theme.liquid :disappointed_face: thanks in advance for your help !