A user seeks help rounding corners on images in their mega menu and cart page to maintain design consistency across their site, where buttons, images, and search bars already have rounded corners.
Solution Provided:
border-radius propertiesFollow-up Issue:
.product-item__primary-image and .product-item__secondary-image with border-radius: 50% !important was provided to resolve thisStatus: Issue appears resolved with the supplementary CSS code. Screenshots were shared showing implementation steps.
Hi everyone, I’m looking for some help to round the corners of my images in the mega menu, as well as the buttons & images in cart.
I’ve managed to round the corners throughout the rest of my site and want to keep it consistent. (E.g. all the buttons are rounded, all the images are rounded from start to checkout, search bar etc)
Please let me know if you are able to assist!
Hello, Can You Please Share Your Store URL I Will Check and Provide Proper Solution
@MattyCeravolo
Hello,
.mobile-nav__image {
border-radius: 50%;
}
.line-item__image {
border-radius: 50%;
}
.checkout-button.button.button--primary.button--full {
border-radius: 50px;
}
.features--image-zoom .image-zoom img {
border-radius: 50%;
}
Add this css at the bottom of Online Store->Theme->Edit code->Assets->theme.scss.liquid
Like This
Thank you so much!
That worked great!! The only problem is that it didn’t apply to the “you may also like” section . It’s seems it’s under “mini cart recommendations list”
thanks so much!
@MattyCeravolo
Hello,
.product-item__primary-image, .product-item__secondary-image {
border-radius: 50% !important;
}
Add this CSS at the bottom of Online Store->Theme->Edit code->Assets->theme.scss.liquid
Like This
This Solution Its Useful So Please Like and Accept Solution
