How can I round image edges on collection page in Dawn theme?

mangyite · ‎03-18-2024

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

ThePrimeWeb · ‎03-18-2024

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.

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

Bhaskar_Sonowal · ‎03-18-2024

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

ThePrimeWeb · ‎03-18-2024

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
Check out our interview with Shopify!

mangyite · ‎03-18-2024

6aplus.com

password entry link is on top right

pass: Prussik#

ThePrimeWeb · ‎03-18-2024

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.

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

mangyite · ‎03-18-2024

Worked a charm, thanks!

Anshul_arora · ‎03-18-2024

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.

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

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

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

How can I round image edges on collection page in Dawn theme?