Solved

Dawn Theme: Collection Card Rounded Edge

mangyite
Tourist
8 1 0

Hello,

 

I need to round the edge of my product images in the collection page. I have rounded them in the product page using the built in customization and would like to do same for collection page.

 

Thanks

Accepted Solution (1)
ThePrimeWeb
Shopify Partner
1757 492 358

This is an accepted solution.

Hey @mangyite,

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

 

Change the 15px value to whatever you like

<style>
.card--card.gradient, .card__inner.gradient {
    background: transparent !important;
}

.card .media {
    border-radius: 15px !important;
}
</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1710764879472.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website

View solution in original post

Replies 6 (6)

Bhaskar_Sonowal
Shopify Partner
21 5 4

Add style: "border-radius: 10px" or whatever value according to your needs to the product image element.

ThePrimeWeb
Shopify Partner
1757 492 358

Hey @mangyite,

 

Can you share the link to your store please? Thanks!

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
mangyite
Tourist
8 1 0

6aplus.com

password entry link is on top right

pass: Prussik#

ThePrimeWeb
Shopify Partner
1757 492 358

This is an accepted solution.

Hey @mangyite,

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

 

Change the 15px value to whatever you like

<style>
.card--card.gradient, .card__inner.gradient {
    background: transparent !important;
}

.card .media {
    border-radius: 15px !important;
}
</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1710764879472.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
mangyite
Tourist
8 1 0

Worked a charm, thanks!

Anshul_arora
Navigator
298 70 50

Hello @mangyite ,

As I understand you are looking to make the corners of your collection list images round.

You can change the corner radius using the theme customizer.

Please follow these steps -:

1. Go to Online Store -> Themes-> Click Customize

2. Follow the steps mentioned in screenshot.

Anshul_arora_0-1710763570836.png

 

3. Now Scroll down the Collection Card option and Go to 'Border' option.

Anshul_arora_1-1710763783888.png

 

4. You can also change the product image border using theme customizer.

Anshul_arora_2-1710763915958.png

Anshul_arora_3-1710764091329.png

 

I hope the solution helps you.

Please let me know if you have any query.

Thank you.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here