Collections: Change title color or remove title

1

Change the collection heading color using the theme editor settings

When using a collection image, you can change the color of of your title/heading on a collection, use the Theme Editor:

Open the Theme Editor. For a draft theme, use the Customize link for that theme:

If you're using a live/published theme:

In the Theme Editor, open the Collection page settings:

How to find Collection page settings

Scroll to the bottom and make the changes by using the Text color drop-down in your FEATURE IMAGE section:

2

Manually change the color with code

If you want to use a completely different color, or if you're not using a featured image, this option allows you to change to any color:

/* -- code to modify collection title -- */
.collection-title h1, #FeaturedImage-collection h1, .template-collection h1.title--flex { 
  color: #00c9fa; 
}
/* - end - */

In this code example, I've used "#00c9fa" as the hex color value. You can use any hex number here to match the style of your site:

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

Before:

After:

Or if you don't have a featured image:

The title/heading color is normally taken from the Theme's general settings -> color -> general -> body text. This method override's that value in the event you'd like a different title color without changing the body color value.

3

Remove the Title Completely

To completely remove the title/heading on for a Collection:

/* -- code to remove collection title -- */
.collection-title h1, #FeaturedImage-collection h1, .template-collection h1.title--flex { 
	display: none;
 }
/* - end - */

After:

Mobile:

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