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 Theme Editor

Use the top menu drop-down (1) and select (2) Collection pages:

The left sidebar will change, choose Collection page (3)

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?

Open your Code Editor. 

From your list of themes, find the Actions link for the theme you'd like to edit. Then select Edit code. Example draft theme:

Example if you're working from your main live/published theme:

Quick link if the theme is live/published:
Open Code Editor

Next, in the Code Editor find your theme's CSS file, this will vary depending on which version of Pipeline you're running:
Which version of Pipeline am I using?

Once you know your version, find the right file in the left Assets folder:

Pipeline 4 - If you're working with a draft theme, open this file:

You'll be opening this file:

assets/theme.scss.liquid

Quick link if the theme is live/published:
assets/theme.scss.liquid

Earlier versions of Pipeline - If your theme is older than Pipeline 4 open this file for draft themes:

You'll be opening this file for earlier versions of Pipeline:

assets/style.scss.liquid

Quick link if the theme is live/published and an earlier version of Pipeline:
assets/style.scss.liquid

Add the code to the very bottom of the file on a new line. Make a couple blank lines before pasting the code snippet. 

Example:

Save the file after adding your code.

Still need help? Contact Us Contact Us