Collections: Change title color or remove title

Note:
Groupthought does not provide any warranty or further support for this code. Use this code at your own risk. The code provided below is only a suggestion. You are responsible for any and all code customizations made to your theme. Please work with a developer or Shopify Expert to ensure proper customization. This code may not work with all versions of of Pipeline or with other code customizations and apps you may have installed. We strongly recommend that you make duplicate of your theme before adding or changing any code in your theme.
This tutorial is intended for use with the Pipeline theme.

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