Collections: Change title color or remove title

To change the color of of your title/heading on a Collection:

You'll need to navigate to a Collection page in your Theme Editor. 

Step 1 - Open the Theme Editor

https://myshopify.com/admin/themes/current/editor

or choose " Customize" from your main themes page

Step 2 - Navigate to any Collection page on your site

When you navigate to a Collection page in the Theme Editor, your left section options will change:

Choose " Collection page" to adjust your settings. 

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


Manual Code Method

If you want to use a completely different color, then this code method is also an option.

Add the following code to the very bottom of this file on a new line:

https://myshopify.com/admin/themes/current?key=assets/style.scss.liquid&line=9999

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

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

Before:

After:

Or if you don't have a featured image:

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

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.


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:

Still need help? Contact Us Contact Us