Refresh Theme - Collection Cards - Change text colour but not outline colour

Store Design
, , , ,

Topic summary

Goal: In the Shopify Refresh theme, make collection card outlines blue while keeping the card text black.

What was tried: A generic Custom CSS approach (via Theme settings) to set border and text colors didn’t take effect, likely due to incorrect or insufficient selectors. A request for the store URL was made, and the URL was shared to inspect.

Working solution: Edit code > Assets > base.css and target the specific selector for collection cards. Setting:

  • .collection-card-wrapper .card.card–card { border-color: #59d1f9 !important; }
    This successfully applied a blue outline while leaving text black (default).

Notes and context:

  • If text isn’t black by default, apply color: black on inner elements (e.g., headings/links) with sufficiently specific selectors.
  • The final CSS selector specificity was key; the earlier, more generic selector didn’t override theme styles.

Outcome: The issue was resolved; the corrected selector in base.css achieved the desired styling. Images were provided for context but not essential to the fix.

Summarized with AI on December 13. AI used: gpt-5.
1

Screenshot 2024-11-25 154739.png
Screenshot 2024-11-25 154739.png376×833 99.2 KB

Screenshot 2024-11-25 155011.png
Screenshot 2024-11-25 155011.png231×365 10.8 KB

Hello! I am desperately searching for help. I want to make the outline of these collection cards blue, however I want the text to be black. Can anyone help me with some custom css please!!

2

Hey @madeleinelala ,

To change the text color to black while keeping the outline color blue in these collection cards on your Shopify store, you can add some custom CSS. Here’s how you can do it:

  1. Online Store > Themes

  2. click Customize

  3. In the theme editor, click on Theme settings and then Custom CSS or scroll down to find an option for adding custom code.

  4. Add the following CSS:

/* Custom style for collection cards */
.collection-card-class { /* Replace with the actual class if different */
    border: 2px solid blue; /* Keeps the border/outline blue */
    color: black; /* Changes the text color to black */
}

.collection-card-class h2, /* or replace with the tag of your text element */
.collection-card-class a {
    color: black !important; /* Ensures text within the card is black */
}

Replace .collection-card-class with the actual class name of your collection cards if it’s different. You may need to inspect the HTML structure to find the exact class.

This should apply a blue outline to your collection cards while keeping the text color black. Let me know if it doesn’t look right, and I can help adjust it.

If I was able to help you, please don’t forget to Like and mark it as the Solution!
If you’re looking for expert help with customization or coding, I’d be delighted to support you. Please don’t hesitate to reach out via the email in my signature below—I’m here to help bring your vision to life!

Best Regard,
Rajat Sharma

1 Like
3

Hey @madeleinelala

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

4

Hi @madeleinelala ,

You can follow these steps:

  • Step 1: Change Text color to black.

  • Step 2: Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

.card.card--card {
    border-color: #59d1f9 !important;
}

I hope it helps!

5

Hey Rajweb, I cant seem to get it to work

https://smartfast.au/

6

https://smartfast.au/

7

Hi @madeleinelala ,

You tried this, it should make everything work fine with the code:

.collection-card-wrapper .card.card--card {
    border-color: #59d1f9 !important;
}
8

This worked! Thank you!

1 Like