Shopify themes, liquid, logos, and UX
Good evening! How's it going?
I'm looking to add a bit of a visual tweak to my site so I can have rounded corners (10px preferred or anything close) for product images/thumbnails that appear on:
I hope there is a way to keep embedded images on a page and home page visual tiles from being affected, since I'm using full-width imagery you can easily notice on the home page. Searching around it seems it may need done using liquid code, but I'm not too versed on editing liquid files. I purchased a premium theme.
Website: https://vhhess.com
Any help would be appreciated, thanks in advance!
Solved! Go to the solution
This is an accepted solution.
Add the following code at the bottom of your assets >> theme.css file.
Do let me know if you need any assistance.
.grid-product__image-mask {
border-radius: 10px !important;
}
Do let me know if it works for you!
Good Luck!
This is an accepted solution.
Add the following code at the bottom of your assets >> theme.css file.
Do let me know if you need any assistance.
.grid-product__image-mask {
border-radius: 10px !important;
}
Do let me know if it works for you!
Good Luck!
Yes, I think this will work out for me.
now, it seems like some of the premium themes or rather the animations involved in them such as showing a second product image when your mouse over the thumbnail, interferes with the rounded corner display of the product tiles but I think since most people will be shopping on mobile it won’t really matter much.
I think the main product pages should be left as is so I think this will get the job done; the code did not affect product pages but again that is ok. Thank you very much for your help. You’ve been awesome.
This is for the product page, I hope this is what you're looking for.
.product-image-main .image-wrap {
border-radius: 10px;
}
.product__thumb-item .image-wrap {
border-radius: 10px;
}
.product__thumb-item a.is-active:before {
border-radius: 10px;
}
Do let me know it works fine.
Hello, Will this work for the dawn theme? I need to change this border www.vir-gil.com
Hi, Your code did work but on the mobile, it will first be viewed squared and after a second it is switched to round, is there anything to do to make sure that it will be round on the first moment of seeing the picture?
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024