Add Padding/Margin Inside Product Slider Images

[manbru]

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!

[BSS-TekLabs · Accepted solution]

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!

[BSS-TekLabs]

- 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.