How to show collection title under image or make it more visible- Debut Theme

Store Design
1

I was wondering how to make the collection titles appear under the image as oppose to on the image. Or at least make it so that the text is more visible?

This is my site link: https://pet-ballimu.myshopify.com/

2

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > theme.scss.liquid and paste this at the bottom of the file:
.collection-grid {

overflow:hidden !important;

}
.collection-grid .collection-grid-item__title {
transform:none;
top:auto;
}
3

Hey I’ve added this code and it puts the text below but now it is squished between rows. I tried to change the padding and margin but that only pushes text underneath the second row of images.

https://pet-ballimu.myshopify.com/

4

Also the code only changes the collections on the home page.

5

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > theme.scss.liquid and paste this at the bottom of the file:
.collection-grid {

overflow:hidden !important;

}
.collection-grid .collection-grid-item__title {
transform:none;
top:auto;
}

@media only screen and (min-width: 750px){
.collection-grid-item {
margin-bottom: 60px!important;
}
}
.collection-grid-item__title-wrapper {
padding: 5% 0!important;
}
6

This worked great, thanks! If I cna trouble you for one more thing, how do I remove the text shadow from the title. I think it looks bad.

1 Like
7

Seems to be having trouble with mobile as well.

mobile
mobile828×1792 135 KB

1 Like
8

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > theme.scss.liquid and paste this at the bottom of the file:
@media only screen and (max-width: 750px){
.collection-grid-item {
margin-bottom: 60px!important;
}
.collection-grid-item__title-wrapper {
padding: 6% 0!important;
}
}
.collection-grid-item__title {
text-shadow: 0 0 black!important;
}
9

For some reason the changes only show up for the home page. How can I apply these changes to the rest of the collection list pages? The changes have worked great for the home page though, thanks