Round image wrapper

Store Design
, , , ,
1

Hi,
can anyone help me with the 2 following challenges on my product page media?

  1. round the corners of the media items ?

  2. move the image thumbnails to the bottom & show it also on mobile

https://bbe8ai0423i0sckp-79419244874.shopifypreview.com

To look like this

Daniel19901_0-1721818627944.png
Daniel19901_0-1721818627944.png317×350 87.8 KB

2

Hi @Daniel19901

Check this one.

  1. From you Admin page, go to Online Store > Themes
  2. Select the theme you want to edit
  3. Under the Asset folder, open the main.css(base.css, style.css or theme.css)
  4. Then place the code below at the very bottom of the file.
sht-prd-slideshow-itm.w-100.h-100.o-hidden.d-block-md {
    border-radius: 20px;
}
.product-slideshow__thumb.is-active-item, .btn-slideshow-thumb {
    border-radius: 10px;
}
.btn-slideshow-thumb:before {
    border-radius: 10px;
}

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!