Headings: Change font size on homepage sections

This article includes many of the homepage heading elements. If you need to modify the font sizes or other font properties on the homepage, you can use this guide to make your changes. The article displays all the elements and samples in groups and the bottom includes where to add the code to make these changes.

We will begin with the three main banner style sections: Image with text overlay, Slideshow and Featured video. These three share similar heading and description styles.

Elements in this section:

1: H1 Heading (h1.title--flex)

2: Description (.content--flex)

3: Button (.btn--large)

Additional sub-heading elements are further down in this article.

Code samples to use:

1: H1 Heading

This heading style is shared by Image with text overlay, Slideshow and Featured video. If you change the font style, that will affect all of these section modules.

Sample code to increase the size on tablet and desktop:

/* -- code to modify banner-type heading font size for desktop and tablet -- */
@media screen and (min-width: $medium) {
 .template-index .homepage-image h1.title--flex {font-size: 3em;}
}
/* - end - */

The value 3em; can be modified to be larger (example use 3.5em; or 4.0em;) or smaller (example use 2.5em; or 2.0em;)

Sample code to increase the size but for only the very first section (this won't change the font if you have another similar section lower on the homepage):

/* -- code to modify first banner-type heading font size for desktop and tablet -- */
@media screen and (min-width: $medium) {
.template-index .homepage-image:first-of-type h1{ font-size: 3em; }
}
/* - end - */

That one is ideal if you don't want the other sections to pick-up the font size change.

Sample code to modify the main heading font size for mobile only:

/* -- code to modify banner-type heading font size on mobile only -- */
@media screen and (max-width: $small) {
 .template-index .homepage-image h1.title--flex {font-size: 1.2em;}
}
/* - end - */

That will make the mobile heading font smaller. You can adjust the value, try smaller increments like 1.5em, 1.4em, 1.3em etc.

2: Description

This heading style is shared by Image with text overlay, Slideshow and Featured video. If you change the font style, that will affect the description on all of these section modules.

/* -- code to modify banner-type description font size -- */
.template-index .homepage-image .content--flex {font-size: 2.0em;}
/* - end - */

To modify the description font size for mobile only, use this code:

/* -- code to modify banner-type description font size for mobile only -- */
@media screen and (max-width: $small) {
.template-index .homepage-image .content--flex {font-size: 2.0em;}
}
/* - end - */

3: Button

This button style is shared by Image with text overlay and Slideshow sections. If you change the font style, that will affect the button style on all of these section modules. Since the Featured video doesn't have this button type, it won't be affected.

To increase the button font size, use this code:

/* -- code to increase large button font -- */
.template-index .homepage-image .btn--large { font-size: 1.2em; }
/* - end - */

To increase the button size, we can add some padding:

/* -- code to increase button padding -- */
.template-index .homepage-image .btn--large { padding: 20px 50px; }
/* - end - */

The first number 20px is for top/bottom padding. The second number 50px is for left/right. You can adjust to your preference.

Additional headings:

Elements in this section:

4: H4 heading (h4.home__subtitle)

5: H5 heading (h5.home--uppercase)

6: Paragraph text (.rte p)

Code samples:

4: H4 heading

This heading style is shared by a many section modules like Image and text, Text columns with images, Collection list, Featured collection, Maps, Blog posts and Rich text. Changing this font size or font family will affect all the headings on the page.

Sample code to increase the size:

/* -- code to modify h4 heading font size -- */
.template-index h4.home__subtitle { font-size:1.5em; }
/* - end - */

The value 1.5em can be adjusted, use small increments like 1.4em; or 1.6em;

To remove the underline style for the subtitle, use this code:

/* -- code remove H4 heading underline -- */
.template-index h4.home__subtitle::after  { display:none;  }
.template-index h4.home__subtitle {
    margin-bottom: $gutter / 3;
}
/* - end - */

To change the subtitle underline color:

/* -- code to change H4 heading underline color -- */
.template-index h4.home__subtitle::after  { 
  background: #cc0000;
  opacity: 0.9;
}
/* - end - */

Use a standard hex color code for the value of color (#cc0000 is a red color):

http://www.colorhexa.com/web-safe-colors

Adjust the opacity to dim the effect. The default is 0.2 (very light).

5: H5 heading

This heading style is Text columns with images. The heading is placed below the image when an is image used.

Sample code to increase the size:

/* -- code to modify h5 heading font size -- */
.template-index h5.home--uppercase {font-size:1.2em;}
/* - end - */

6: Paragraph

This paragraph style is used when the Shopify rich text editor is used for content. Text columns with images uses this style for the main content. It's also shared with Image and text, Rich text and Blog posts.

Sample code to increase the size on all sections:

/* -- code to modify rte paragraph font size -- */
.template-index .rte p { font-size: 1.1em; }
/* - end - */

Careful with that change, it can also change the footer rte paragraph text.

To avoid the footer text being changed, use this code instead and only adjust the value in the first line for the paragraph font-size while leaving the footer size at 1em:

/* -- code to modify rte paragraph font size -- */
.template-index .rte p { font-size: 2.1em; }
.site-footer .rte p {font-size: 1em;}
/* - end - */

If you'd like the paragraph text changed on one type of section, use these samples for individual sections:

To only change in Text columns with images:

/* -- code to modify rte paragraph font size -- */
.template-index .homepage-columns .rte p { font-size: 1.1em; }
/* - end - */

To only change in Image and text:

/* -- code to modify rte paragraph font size -- */
.template-index .homepage-double .rte p { font-size: 1.1em; }
/* - end - */

To only change in Rich text:

/* -- code to modify rte paragraph font size -- */
.template-index .homepage-page .rte p { font-size: 1.1em; }
/* - end - */

To only change in Blog posts:

/* -- code to modify rte paragraph font size -- */
.template-index .blog__article .rte p { font-size: 1.1em; }
/* - end - */

Additional section headings:

Elements in this section:

7: H2 heading (h2.title--flex)

8: H3 heading (h3.h3)

7: H2 heading

This heading style is used in the Collection list section.

Sample code to increase the size:

/* -- code to modify h2 heading font size -- */
.template-index h2.title--flex {font-size:2.5em;}
/* - end - */

The default size is 2.0em. To increase use a larger number and to decrease use a value lower than 2.0em;

8: H3 heading

This heading style is used in the Blog posts section.

Sample code to increase the size:

/* -- code to modify h2 heading font size -- */
.template-index h3.h3 {font-size: 1.8em;}
/* - end - */

The default size is 1.5em. To increase use a larger number and to decrease use a value lower than 1.5em;

Where do I add the code?

Use this link to learn where exactly to add this code snippet:

Where to add your CSS style code

Headings: Change font size on homepage sections

H1 Heading

Description

Button

H4 heading

H5 heading

Paragraph

H2 heading

H3 heading

Where do I add the code?