Overlay Text on Collection Cards on Collection List

Overlay Text on Collection Cards on Collection List

ProconMarketing
Excursionist
47 0 7

I would like to overlay text on my collection cards onto the image instead of under the image. 

 

This is how it currently looks:

Screenshot 2024-10-24 at 21.21.07.png

 

I it to looks like this:

Screenshot 2024-10-24 at 11.28.49.png

 

Instead of having the text centred, I want it aligned to the bottom left corner. 

 

I also need the slight black opacity over the image to make my text readable when I make it white.

 

Please help. 

 

My website link is: https://8ae3b9-27.myshopify.com/

 

Thanks. 

Replies 6 (6)

Made4uo-Ribe
Shopify Partner
9875 2353 2950

Hi @ProconMarketing 

Try this one. 

  1. From your Shopify admin dashboard, click on "Online Store" and then "Themes".
  2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
  3. In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

 

.collection-list-wrapper .card__content {
    position: absolute;
    bottom: 5px;
}

.collection-list-wrapper .card__heading {
    color: white;
}

.collection-list-wrapper span.icon-wrap {
    display: none;
}

 

  • And Save.
  • Result:
  • Made4uoRibe_0-1729805805407.png

    Note: You can change the color of the font but be sure not delete the signs. Only the letters to remove and channge, also this will apply all the collection list you have in the store. 

 

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better! 

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
ProconMarketing
Excursionist
47 0 7

Thanks! Can you please also help me make the text slightly lower on the image and add a black opacity behind the text that fades into the image to help make it easier to read?

Made4uo-Ribe
Shopify Partner
9875 2353 2950

Please, replace on this code. Thanks!

 

.collection-list-wrapper .card__content {
    position: absolute;
    bottom: 0;
}

.collection-list-wrapper .card__heading {
    color: white;
}

.collection-list-wrapper span.icon-wrap {
    display: none;
}

.collection-list-wrapper .card__information {
    padding: 0 .5rem;
    position:relative;
}

.collection-list-wrapper .card__information {
    background-color: rgba(0, 0, 0, 0.4);
}

 

And Save. 

Result:

Made4uoRibe_0-1729873955398.png

 

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
ProconMarketing
Excursionist
47 0 7

Thanks, but I meant that I'd like that opacity over the whole collection card. 

 

Would it be possible to do something like this?

Screenshot 2024-10-28 at 15.14.32.png

Tellwho
Tourist
4 0 0

Do you know how I can change the color of the text button for individual cards in collage?

PaulNewton
Shopify Partner
7721 678 1620

@ProconMarketing search first for common topics in specific themes

https://community.shopify.com/c/forums/searchpage/tab/message?filter=location&q=dawn%20Overlay%20Tex... 

 

Contact paull.newton+shopifyforum@gmail.com for the solutions you need


Save time & money ,Ask Questions The Smart Way


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Thank Paul with a Coffee for more answers or donate to eff.org