Add Padding/Margin Inside Product Slider Images

Hey,

I want to make the image smaller in the product slider, but without actually making the original pic smaller. Instead i want to add padding/margin inside the product image slider (but i haven’t figured out how to do that) See pic 2 for reference.

my store: https://r1vex.myshopify.com/products/emil-randig-strandstol-taupe

Right now:

How i want it to be:

Thanks for help!

Hi @manbru ,

Here are the steps you can follow:

1, Navigate to Online Store > Themes > Edit Code.

2, Locate and open the base.css (or theme.css, custom.css) file.

3, Paste the code snippet provided below at the bottom of the file, then save your changes.

.product__image-slider .carousel-cell {
    padding: 100px;
    background: #fff;
    border-radius: 15px;
}

Here is the result

We hope this assists in resolving the issue.

If you find our solution helpful, kindly consider Liking and Marking it as Accepted. Thank you!

  • Here is the solution for you @manbru
  • Please follow these steps:

  • Then find the base.css or theme.css file.
  • Then add the following code at the end of the file and press ‘Save’ to save it.
.product__image-slider .carousel-cell {
    padding: 55px !important;
    background: white !important;
    border-radius: 25px !important;
}
  • Here is the result you will achieve:

  • Please press 'Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.