Need help with Product card border and text colors

Store Design
,
1

Hello all,

Does anyone know how to have different colors on product cards for the border and text? By default, it seems both are tied together.

I would like to keep the orange border but have white text as I feel that would be easier on the eyes with the black background.

Thank you :slightly_smiling_face:

Screenshot_28-5-2024_104424_hyperdrivecollectorzone.com.jpeg
Screenshot_28-5-2024_104424_hyperdrivecollectorzone.com.jpeg400Ă—771 35.8 KB

2

Hi @dboyxx

Would you mind to share your store URL? Thanks!

3

@dboyxx - can yo please share this page link?

4

Hyperdrive Collector Zone

5

Hyperdrive Collector Zone

6

Thanks for the info, check this one.

From your Shopify admin dashboard, click on “Online Store” and then “Themes”.

Find the theme that you want to edit and click on “Actions” and then “Edit code”.

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.section-template--22038170632486__4e0d6666-39ae-4415-936a-539ef39fe653-padding .card__information * {
    color: white;
}
.center.collection__view-all.scroll-trigger a {
    color: white;
}

And save.

result:

Made4uoRibe_0-1716916845002.png
Made4uoRibe_0-1716916845002.png826Ă—753 243 KB

Note: I also include the view all button to white. Let me know if not necessary so i can edit the codes.

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

7

Thank you. That did work for the first Featured set on the home page. I would love to actually apply it to all of the product cards on the site if possible. All the featured sets, all the product cards when you click on any of the categories, etc.

Appreciate the hard work!

8

My fault I only add on specific feature collection. Repalce for this one.

.collection .card__information * {
    color: white;
}
.center.collection__view-all.scroll-trigger a {
    color: white;
}

And Save.

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

9

Thank you so much! Looks so much better on the eyes :grin: