Moving Product image slider icons/cirlces up (Brooklyn theme)

Store Design
1

Hey!

Hoping someone can help…

I wondered if anyone know how i might be able to move the small slider icon up (Screenshot below)

I’m using Brooklyn theme

Screenshot_20220628-153913_Samsung Internet.jpg
Screenshot_20220628-153913_Samsung Internet.jpg1440×2922 147 KB

An help would be much appreciated.

Thanks in advance!

2

Hi!

Could you provide the URL for the page in question and I’ll take a look for you :slightly_smiling_face:

3

Hi WoodyDev,

Yeah of course, that’s great: https://www.notacard.com/products/black-bottle-whisky-whisky-stones-in-velvet-bag

(It only shows in mobile view)

Thanks in advance!

4

Perfect!

Head into your theme.scss file and find the following code:

.product-single__media-group-wrapper .slick__controls {
    margin-top: 25px;
    margin-bottom: 0;
    padding: 0 15px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
}

You can adjust the ‘margin-top:25px;’ value and this will set the distance between the buttons and the image.

Note: you can set this to a negative number i.e. -10px if you need to get closer than it sits when its at 0px.

5

Hi @WoodyDev ,

Worked like an absolute charm. Thanks very much!

On a side note, would there be a way to change the colour? Wanted to fade it slightly.

No worries if not and thanks again for your help!

Thanks again,

James

6

Hi!

No problem at all, yes you can reduce the opacity with the following:

.product-single__media-group-wrapper .slick__controls {
    margin-top: 25px;
    margin-bottom: 0;
    padding: 0 15px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    opacity:50%;
}

You can edit the 50% to set how faded/solid you’d like it to be :slightly_smiling_face:

2 Likes
7

Spot on! Thanks very much

8

You’re very welcome!

If you need any help in the future feel free to message me directly, and if you could spare a moment to read through my signature below, I would highly appreciate it :heart:

9

Much appreciated. Sent a tip via PayPal :+1:

1 Like
10

Very much appreciated thankyou!