Make border around sort and design

[silenceclothing]

my collection page currently look like this:

but i want to make it like this with a border around:

does anyone know how to do this?

[rajweb]

Hey @silenceclothing ,

Yes, you can add borders around the product images and make your collection page look like the second design by adding some CSS to your site. Here’s how you can do it:

Steps to Add Borders:

1. Locate the CSS File: Find the CSS file responsible for styling your collection page. This could be in your theme files or a specific stylesheet.

2. Add a Border to Product Containers: Identify the class or ID wrapping each product and add the following CSS:

.product-container { /* Replace with your product container class */
  border: 1px solid #ccc; /* Light gray border */
  border-radius: 8px; /* Rounded corners (optional) */
  padding: 10px; /* Space inside the border */
  margin: 10px; /* Space between products */
  background-color: #1b1b1b; /* Match background (optional) */
}

3. Adjust Padding and Margins: Use padding and margin properties to create space between the borders and around the products.

4. Ensure Responsiveness: If the layout breaks on smaller screens, adjust with media queries:

@media (max-width: 768px) {
  .product-container {
    margin: 5px;
    padding: 8px;
  }
}

Would you like me to help identify the class or assist further with implementation? If you’re using Shopify, I can guide you to locate the right Liquid files.

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

[silenceclothing]

Can you help me with this? this is my site: https://jyajkyk8skrjlkso-65389560005.shopifypreview.com

[rajweb]

Add the CSS:

1. Open the theme.css or base.css file in your Shopify theme editor.

2. Add the following styles:

/* Add border and styling to the product card wrapper */
.card-wrapper {
  border: 1px solid #ccc; /* Light gray border */
  border-radius: 8px; /* Optional rounded corners */
  margin: 10px; /* Space around each product */
  overflow: hidden; /* Ensures the content doesn't overflow */
  background-color: #1b1b1b; /* Matches the background of the page */
}

/* Add some padding for inner spacing */
.card-wrapper .card {
  padding: 10px;
}

/* Adjust the hover effect (optional) */
.card-wrapper:hover {
  border-color: #007aff; /* Change the border color on hover */
  transition: border-color 0.3s ease-in-out; /* Smooth transition */
}

Adjust Your HTML:

Ensure the class=“card-wrapper” is correctly applied to the wrapper div around each product. Your current code already uses the .card-wrapper class, so no changes are needed to the HTML structure.

If you encounter any specific alignment or responsiveness issues, please feel free to let me know. You can also message me via email, and I’ll gladly assist you in fine-tuning the solution!

[silenceclothing]

do i add this at the bottom?

[silenceclothing]

sorry, i dont think you understood me.

it became like this now. But i only want to add a border around the sort and filter option. like this:

and add this to the left side of the clothes

[DaisyVo]

Hi @silenceclothing

To complete your requests, please follow these steps:

1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
2. Paste the code provided into the Custom CSS section.

body h2#verticalTitle,
body h2.facet-filters__label {
    border: none !important;
}
aside#main-collection-filters {
    border-block: 1px solid rgba(255,255,255,0.2);
}

Here is the result:

I hope this helps

Best,

Daisy