Put heading text over image on collection list cards

Drakhtul
Tourist
8 0 1

Hello, i want to add heading over the text in collection list cards.

 

Obszar roboczy 1.png

 

I already found a part of the solution which is this snippet code:

 

 

.card__content {
    position: absolute;
    bottom: 1px;
    left: 15px;
    overflow: hidden;
    transition: all 0.5s ease;
}

 


The problem here is that it works on both collection list card and on product recommendation collection.

 

123.png

 

I would like to only target collection list cards without affecting anything else on the page so the text on products stay under the image. I'm pretty bad with css, i can't find any solution to that. Anyone could help me with that please?

Replies 10 (10)

Made4uo-Ribe
Shopify Partner
5581 1344 1658

Hi @Drakhtul 

Would you mind to share your store URL? Thanks!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


techlyser_web
Shopify Partner
1423 268 282

Hello @Drakhtul 

Can you share store URL?

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
Drakhtul
Tourist
8 0 1
techlyser_web
Shopify Partner
1423 268 282

password?

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
Drakhtul
Tourist
8 0 1

demo

BSS-Commerce
Shopify Expert
3477 461 515

Hi @Drakhtul ,

The code you added is correct, but with your requirement, you want only display like that in collections, you must add a condition so that this CSS will only work on page collections.

=>>

- You have to delete the CSS script you added to the CSSview - 2024-03-19T174807.812.png file earlier.

- Go Sale channel => Online store => Edit code. Search theme.liquid and add script before render {{content-for-layout}}: 

{% if template == 'collection' or template == 'list-collections' %}
        <style>
          .card__content {
            position: absolute;
            bottom: 1px;
            left: 15px;
            overflow: hidden;
            transition: all 0.5s ease;
          }
        </style>
{% endif %}

 

The result is only collection list cards without affecting anything else on the page so the text on products stay under the image.

Hope it helps @Drakhtul 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

Drakhtul
Tourist
8 0 1

Hmm. I think i did everything correctly. I went to base.css and removed all code regarding .card__content and then i went to the theme.liquid and pasted your code but nothing has changed. Am i doing something wrong?123.png

Drakhtul
Tourist
8 0 1

Beside that when i click collection Your code messing up the content. Without the code its all good, with it the text it's on the image.123.png12323.png

Drakhtul
Tourist
8 0 1

I found solution with this code

.collection-list__item .card .card__heading {
  position: absolute;
  bottom: 12.5%;
  left: 7.5%;
}

 The title is on the bottom left like i want but the problem is that image is not longer clickable, only the title text is the link to the collection and i would like to whole image be clickable.

 

Same situation with this

.collection-list__item .card__content {
    position: absolute;
    text-align: start;
    bottom: 0;
}

Drakhtul
Tourist
8 0 1

I actually fixed that by myself. Thanks everyone for looking for solution and trying to help me. Please close the thread.