How to make outline button black on collection page

Topic summary

A user seeks to make the outline button black specifically on their collection page, referencing a “View All” button in the “Shop By Category” section.

Initial Solutions Provided:

  • First responder suggested adding CSS code above the </body> tag in theme.liquid
  • However, this solution made the button transparent instead of black

Refined Solution:

  • A second responder identified the specific element: the ‘View All’ button in ‘Shop By Category’
  • Provided targeted CSS code for theme.liquid:
    .collection-list-view-all a::after {
      border: 3px solid black;
      box-shadow: none !important;
    }
    

Status: The discussion appears ongoing, awaiting confirmation whether the refined CSS solution resolves the transparency issue and achieves the desired black outline effect.

Summarized with AI on November 14. AI used: claude-sonnet-4-5-20250929.

Hello How To Make Outline Button Black on ONLY collection page

how to make the view all button black? pls help

STORE URL: www.faithandyou.in

THEME: refresh

Hi @AryavK ,

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code just above tag

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Makka

hello @theycallmemakka the problem with this is that it makes it transparent.

How to make it black outline

thanks

Hello @AryavK ,

I understand you are looking to provide black border on ‘View All’ button of the ‘Shop By Category’

Please add the below mentioned code in your theme.liquid file

.collection-list-view-all a::after { box-shadow: none!important; border: 3px solid black; }

Output => https://prnt.sc/XxWE3kJ3jhrw

I hope it helps

Please let me know if you have any query or need further assistance.

Thank you.