Debut Collection typography

Solved
Tourist
16 0 0

I am using the debut theme and on the collection section, I would like to turn off the automatic typography on top of the pictures of my items.  I want to put the collection name on top of the picture like I have in the header.  I currently have the store password protected while I work on the store. 

 

https://green-oak-furniture.myshopify.com/ 

The password to see the store is: GOASince1978

0 Likes
Highlighted
Shopify Partner
152 37 58

@greenoak

 

Go to Online Store > Themes > Actions > Edit Code. Look for the Assets folder > theme.scss.liquid

 

Scroll to the very bottom of the theme.scss.liquid file and add the following: 

 

.collection-hero__title-wrapper {
  background: rgba(255, 255, 255, 0.6); 
  position: relative; 
  padding: 15px; 
}

@media only screen and (max-width: 749px) {
  h1.collection-hero__title {
    font-size: 22px; 
    line-height: 26px; 
  }
  .collection-hero__title-wrapper span {
    top: -41px; 
  }
}

@media only screen and (min-width: 750px) {
  .collection-hero__title-wrapper span {
    top: -110px;
  }
}
Did I provide you with a working solution? Give me an Approved Solution!

Likes are appreciated as well :)
0 Likes
Tourist
16 0 0

I added this and the name of the collection is still on top of my pictures.  

0 Likes
Tourist
16 0 0

whatiwant.JPGWhat I want to do...furniture.JPGwhat there is currently

0 Likes

Success.

Shopify Partner
152 37 58

@greenoak

 

My misunderstanding. Unless you want that to apply to your collection pages, please remove the previous code. I was under the impression that we were doing this on the collection banners and not this section on the homepage. Here is your solution for the homepage: 

 

Online Store > Themes > Actions > Edit Code > Assets > theme.scss.liquid. Scroll to the very bottom and paste this: 

 

.template-index .collection-grid-item__title.h3 {
  background: rgba(255, 255, 255, 0.6);    
  position: absolute;
  top: 35px;
  padding: 15px;
}

If you want to move the banner down a hair, past the wooden border, then just increase the top by a few pixels until you get what you want.  

Did I provide you with a working solution? Give me an Approved Solution!

Likes are appreciated as well :)
1 Like
Tourist
16 0 0

Thank you for your help!

0 Likes
Tourist
16 0 0

Another question---- on the individual collection pages... is there a way to have just the words at the top vs the shrunk down picture?

0 Likes
Shopify Partner
152 37 58

Just so I follow, you're wanting to remove the collection banner image and just have the name of the collection displayed? 

Did I provide you with a working solution? Give me an Approved Solution!

Likes are appreciated as well :)
0 Likes
Tourist
16 0 0

That is correct.  I do not like how the image of our items is cut off. 

0 Likes
New Member
1 0 0

Hello!!

 

Following the same line here.... In my case I want to have the collection banner and eliminate the name of the collection displayed. Also I want to know the best measurement for that banner. 

0 Likes