Would you be able to make my main product images and thumbnails corners radius like this and also bring it away from the corner/smaller. So it goes from this
To this:
Topic summary
A user seeks to customize their Shopify product page by adding rounded corners to product images and thumbnails, and reducing the main image size to create spacing from the page edges.
Solution provided:
- Add CSS code to
base.cssfile in Shopify theme editor - Apply
border-radius: 25pxto main product images - Apply
border-radius: 10pxto thumbnails - Use media query to set fixed height (400px) for product images on screens wider than 750px
- Add top margin (22px) to media wrapper for spacing
Status: The issue appears resolved through iterative CSS adjustments. The helper provided code snippets with visual results confirming the desired rounded corners and reduced image size were achieved.
1 Like
Hi @Ryan1998 ,
Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code
Step 2: Search file base.css
Step 3: Insert this code:
.product__media.media.media--transparent img {
border-radius: 25px;
}
.thumbnail {
border-radius: 10px;
}
Here is result:
Hope this can help you,
If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 
1 Like
Hi @Ryan1998 , I see it still has borders on the corners. Here is the solution for this:
Hope this can help you
1 Like
could you make the main image smaller so its like this:Hi @Ryan1998 ,
Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code
Step 2: Search file base.css
Step 3: Insert this code:
@media only screen and (min-width: 750px) {
.product__media-item.grid__item,
.product__media.media.media--transparent img
{
height: 400px;
}
.grid__item.product__media-wrapper {
margin-top: 22px;
}
}
Here is result:
Hope this can help you,
If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you
1 Like