Adding borders to product grid on collection page - Flex Theme

Store Design
,

Topic summary

A Shopify store owner using the Flex theme wants to add borders around products in their collection page grid.

Initial Request:

  • User seeks CSS code to create product borders on collection pages
  • Provided screenshot showing desired outcome

Solution Process:

  • Developer provides CSS code targeting .collection-matrix .product-wrap with a 1px solid border
  • Instructions given to add code to assets/style.css file
  • User encounters difficulty locating the file in theme editor
  • Developer clarifies to search for style.css and add the code there

Issue & Resolution:

  • After implementing code, products display incorrectly (only one per row)
  • Developer requests collaborator access to troubleshoot directly
  • User grants access via code share
  • Developer successfully implements the fix directly in the theme

Outcome:
Issue resolved. Product borders now display correctly without layout problems. User confirms satisfaction with the result.

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

Hey guys,

Trying to add some borders around the products on the product grid of my collection page.

I’m using Flex theme. I’ve attached an image of what I’m trying to achieve.

Thanks for any help.

Screenshot 2024-11-12 at 11.57.24 AM.png
Screenshot 2024-11-12 at 11.57.24 AM.png2093×1240 348 KB

1 Like
2

Hello @NickGH14

Thank you for submitting your query to the Shopify community. I’d be happy to assist you. Could you please provide the store URL and password (if it’s password-protected) so I can review and get back to you with an update?

3

Here’s the store URL:

https://mrcoolhvacsupply.com/

1 Like
4

Hello @NickGH14

Go to Online Store, then Theme, and select Edit Code.
Search for assets/style.css.
Add the provided code at the end of the file.

.collection-matrix .product-wrap {
border: 1px solid #E1E1E1;
}
.collection-matrix .thumbnail__caption.text-align-left {
margin: 0 0 -3px;
background-color: #f8f8f8;
border-top: 1px solid #e1e1e1;
padding: 18px 10px 17px;
}

devcoders_0-1731516197036.png
devcoders_0-1731516197036.png1352×621 160 KB

1 Like
5

I can’t find the assets/style.css. Under which of these folders should I look?

Screenshot 2024-11-13 at 12.06.25 PM.png
Screenshot 2024-11-13 at 12.06.25 PM.png2115×1013 93.9 KB

1 Like
6

Hello @NickGH14
You can search styles.css and add css.

7

I’ve added the codes, but products are appearing weird on the collection pages. Only one product is showing up per row.

I’ve attached an image below. How can I fix this?

Screenshot 2024-11-13 at 12.17.17 PM.png
Screenshot 2024-11-13 at 12.17.17 PM.png1830×1336 260 KB

8

Hello @NickGH14
Can you share the collaborator request code with me so I can add it?

9

7939

1 Like
10

Hello @NickGH14
I have sent you a request. Please accept it and send me a message on WhatsApp at +91 8516919310 so we can discuss any issues there if needed.

11

Hello @NickGH14

i have added the code in theme please check.

devcoders_0-1731519561800.png
devcoders_0-1731519561800.png1346×590 170 KB

1 Like
12

Looks incredible, thank you so much for your help!

1 Like