Hide both collection banner image and collection title

Some shops use a collection image to provide an image on the homepage Collection list. There are a few ways to get around this association - See other article links at the bottom.

If you'd like to remove/hide both the Collection banner and Collection title, you can use this modification. This works best if you use a sidebar menu or sidebar collection list so the customer will know which current collection they are on. 

Example before:

After:

After without sort bar on top:

Code:

/* -- code start hide collection title and banner -- */
.template-collection .wrapper.collection-title, .template-collection .homepage-image, .template-collection .wrapper .hr--small {
  display:none;
}
.template-collection .collection {
  padding-top: 0px;
}
.template-collection .form-horizontal {
  margin-top:10px;
}
@include at-query($max, $medium) {
    .template-collection .collection {padding-top: 10px;}
}
/* - end - */

Tip: Use a custom link list for the sidebar to help customers know which collection they are viewing:

Create your custom menu in the Navigation editor, then assign it here. This is different to your Main Menu navigation on top. 

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