Making the collection items circle and removing the box background

[kay_png]

Hi! Hope someone can help me out in making the box backgrounds white/transparent

Here is the existing code in the theme.css:

.collection-grid-item.circle-shaped .collection-grid-item__overlay {
  border-radius: 50%;
  background-color: white !important;
}

[ZestardTech]

Hi @kay_png

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > theme.scss.css and paste this at the bottom of the file:

.collection-grid-item__title-wrapper:before {
border-radius: 50%!important;
}
.collection-grid-item__overlay {
border-radius: 50%!important;
}

[kay_png]

It works!! Thank you so much!

[ZestardTech]

Hi @kay_png

Thank you for your response. It’s good to know that it’s worked for you. Kindly feel free to get back to me if you need any further assistance.
If helpful then please Like and Accept Solution.

[niraj_patel]

Hello @kay_png

You can add code by following these steps

1. Go to Online Store → Theme → Edit code.

2. Open your theme.liquid file

3. Paste the below code before on theme.liquid

.collection-grid-item__title-wrapper:before { background-color: #fff !important; } .collection-grid-item__overlay { border-radius: 100% !important; }

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[Rahul_dhiman]

Hello @kay_png
Go to online store ---------> themes --------------> actions -------------> theme.scss
and this code at the very bottom of the file before .

.collection-grid-item__title-wrapper:before { background-color: #fff !important; } .collection-grid-item__overlay { border-radius: 100% !important; }

Thanks