Display collection title lower in Debut theme

Tino_Huynh
Tourist
19 0 1

Hi Shopify Designers,

For this moment, in Debut theme, I am trying to lower the collection title because it merged inside the collection image which makes customers really hard to see. The following screenshot is the illustration:

As you can see above image, the word "Your collection's name" inside the image is very hard to see. Therefore, I need to lower the name to make it display outside the image as shown:

As you can see, I want the name have to be outside the image which means the name will be changed to text type. I wonder if anyone could instruct me the method to adjust it? I would respect and appreciate for that.

Thank you very much,

Best,

Tino Huynh

Replies 23 (23)
PSDCenter
Shopify Partner
24 0 11

Hi Tino,

Give us your Store front password so we can give you css code for you have issue.

Support@PSDCenter.com || www.PSDCenter.com || Themes.PSDCenter.com
Tino_Huynh
Tourist
19 0 1

This is my website password: dreaff

PSDCenter
Shopify Partner
24 0 11

Hi Tino,

copy below css code and paste it first line of assets/theme.scss.


.collection-grid {

overflow:hidden !important;

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

Support@PSDCenter.com || www.PSDCenter.com || Themes.PSDCenter.com
Tino_Huynh
Tourist
19 0 1

It worked!!! Thank you thousand times!!

PSDCenter
Shopify Partner
24 0 11

You are welcome!

Support@PSDCenter.com || www.PSDCenter.com || Themes.PSDCenter.com
Natasha_Tsaliki
New Member
1 0 0

Hi, 

I'm hoping you could helpe me with a similar issue. 

I am using the Debut theme and when I add this particular code, it moves the title to the bottom but unfortuntaly cuts of the second line. 

Ex. In the image attached, it should 'Christmas Stockings'. 

Any help is very appreaciated! 

Thanks, 
Natasha 

 

 

165_Street
New Member
3 0 0

I’m having the same issue as Natasha. It’s cutting off some of the words. Help please.

Suzi_Thompson
Tourist
14 0 3

You can change the following:

.collection-grid-item {
    margin-bottom: 30px;
}

to

.collection-grid-item {
    margin-bottom: 90px;
}

Alternatively, you can change the font size by adding "font-size: 16px;"  under ".collection-grid-item__title".  You will need to adjust the font size to your liking.

 

Trex77
New Member
2 0 0

Hi,

 

I am looking to move the text down by an inch but keep in within the image frame.  Any help is greatly appreciated

 

Move text down.png

GuyPucill
Tourist
4 0 1

Go into the theme.scss.liquid

 

Find:

 

.collection-grid-item__title {
  /*color: $color-overlay-title-text;*/
  position: absolute;
  text-align: center;
  width: 100%;
  top: 75%;
  padding: 0 5px;

 

and change top: to 85%

 

.collection-grid-item__title {
/*color: $color-overlay-title-text;*/
position: absolute;
text-align: center;
width: 100%;
top: 85%;
padding: 0 5px;

 You can also play around with padding.

Trex77
New Member
2 0 0

Thank you - just what I needed.  Really appreciated

jackline28
Tourist
6 0 1

Thank you! It helped me too.
Now I have the same problem, but with another page:https://wear-your-say.com/collections
How can I fix it please?

Fawad
New Member
1 0 0

Hi Shopify specialist,

 

I followed these guidelines to fix the collection titles on my home page. It is showing the titles under the image.

Now I need your help to apply the same on the Collection list page https://www.araaish.com.au/collections. It has changed the font colour to what I wanted ut has not moved the text down.

 

Please I need your help. Appreciate your advice.

 

regards,

Fawad

KynaMaree
New Member
1 0 0

Did you have any luck with fixing the issue on the collection list/catalog page? I am having the same issue...fixed homepage with coding suggested here but can't seem to figure out how to do the same on the collection list page


pilateskatt
Tourist
17 0 2

Hello, I had the same problem and tried that code and nothing happened, could you help me out?

michellenyk
New Member
2 0 0

I have the same issue. Need to apply this to all collection images (collection lists, collection sites, collection anything)! 

Please help, Shopify community!

pilateskatt
Tourist
17 0 2

https://experts.shopify.com/shabir-bhat/customize-theme

I just used this expert, they charged me $40 to fix this. I think it’s worth it. Hope this helps 

UmairA
Shopify Partner
1059 96 214

Hi @michellenyk ,

Are you able to provide your store URL so I can post the solution here?

Need help with theme customization or to add a new feature? Hire me
Email: umairabbascs@gmail.com
WhatsApp: WhatsApp
ShopHelp
Theme customization | Custom coding | Store Setup | SEO Audit | Speed Optimization | Tweaks & Bugs fixing
TABW
Tourist
7 0 0

I am looking to completely remove the collection title (or at least place it behind the picture). Currently the title is on top of the image on my home page and product/collections page. I have an Product Image that displays my collection title, so the provided Shopify title ends up being redundant. Can anyone help? Thanks a bunch!

26F2CBAE-11AD-479D-BD5D-E70B7B41F5C6.jpeg

5CCB8A68-FE13-4667-A270-6CED64A5D93D.jpeg