Main product image + thumbnails

[Ryan1998]

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:

[BSSCommerce-HDL · Accepted solution]

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 😍

[BSSCommerce-HDL · Accepted solution]

Hi @Ryan1998, I see it still has borders on the corners. Here is the solution for this: 

<style>
.product-media-container {
    border: none;
}
</style>

Hope this can help you 😍

[BSSCommerce-HDL · Accepted solution]

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 😍

[BSSCommerce-HDL · Accepted solution]

Hi @Ryan1998, I see it still has borders on the corners. Here is the solution for this: 

<style>
.product-media-container {
    border: none;
}
</style>

Hope this can help you 😍

[Ryan1998]

great😁 could you make the main image smaller so its like this:

[BSSCommerce-HDL · Accepted solution]

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 😍