Headings: Change subtitle heading on homepage


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):


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

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

Still need help? Contact Us Contact Us