How would I add a border to product cards to make it like https://uk.trapstarlondon.com/collections/mens-clothing-and-accessories does it. Please note I have color swatches under each product card and I want that inside the borders too. I made an image to show what I want it to look like below, i might need to adjust the product names and photo sizes to get it to be exactly equal in the borders but I hope you get the main idea.
Topic summary
A user seeks to add borders around product cards on their Shopify store, similar to a reference site, with color swatches included inside the borders. They provided a mockup image showing the desired outcome.
Initial Solution Provided:
- One helper offered CSS code to be added to the
password.liquidfile above the</body>tag - This successfully added borders but created additional issues
Follow-up Problems Identified:
- Borders appearing on the front page collection list (unwanted)
- Overlapping product card borders creating thicker lines than intended
- Vertical lines not connecting properly between rows of product cards
Alternative Approach:
- Another contributor suggested using the Custom CSS section in Theme Settings instead
- Provided simpler CSS code targeting
.card-product-custom-divwith a 1px black border - Included a result screenshot
Current Status:
The discussion remains open with the original poster awaiting solutions to the three specific border alignment and display issues. A third user offered general advice about wrapping product cards in a bordered container with proper padding.
Hey @flamontana
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
https://7nrfdj-v6.myshopify.com
the password is shopify
1 Like
Hey @flamontana
Follow these Steps:
-
Go to Online Store
-
Edit Code
-
Find password.liquid file
-
Add the following code in the bottom of the file above tag
RESULT:
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
Best Regards,
Moeed
Hey thank you very much. Sorry i’m not the best at coding I have 3 little concerns i’d like to know if you could sort out. How would i make it so the borders don’t show on the front page collection list.
Alo
Also i’ve attached a second image on each number I want to fix this
1)make the line where each product cards overlap the same width as the original line so that it’s not thicker than the default line px
2)Connect each line vertically also so under each new line of product cards they are connected
Hi @flamontana ,
You can follow the steps here:
Step 1: Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
Step 2: From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/ypQ7nly2wv27
Step 3: Copy the code below and paste it there
Here is the code for step 3:
.card-product-custom-div {
border: solid 1px black !important;
}
Here is the result:
Please let me know if it works!
Best,
Daisy
wrap the entire product card (including swatches) inside a container with a border. Adjust the padding to ensure the swatches fit within the border. Fine-tune the layout and spacing to match the desired look. aplicativo para assistir filmes e séries grátis freecine