Move slide control buttons above image slides

Store Design
, ,
1

Hello, I’m trying to move the image slide “dots” up to overlap the slides.

I managed to do this with:

.slideshow__control-wrapper {

position: relative;

margin-top: -100px

}

However the area where you click the buttons stay below the images. (at the previous location of the dots)

can anyone assist me with this?

store https://g484as6sbwknfyvl-66895675693.shopifypreview.com

sdad.jpg
sdad.jpg1476×1826 262 KB

2

Hallo @memikee

Hallo @Alliance

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid theme file

  3. Paste the below code before

.slideshow__controls.slideshow__controls--top.slider-buttons.no-js-hidden.slideshow__controls--border-radius-mobile { position: absolute !important; bottom: 0 !important; left: 0 !important; right: 0 !important; z-index:3 !important; }

If you require any further information, feel free to contact me.

Best regards,

3

Found the solution, but i will leave this post up for anyone wondering how to do the same :slightly_smiling_face:

Fix: had to ad the following code below.

.slideshow__controls {
display: relative;
margin-top: -100px;
z-index: 2;
position: relativ;

}

4

Hello @memikee

Once you Log in to the Admin, then process the following steps:

Step 1: Go to Dashboard ->Online Store ->Theme-> Action->Edit code->

Step 2: Search the file base.css

Step 3: Paste the below CSS at bottom of the file → Save

.slideshow__controls.slider-buttons.no-js-hidden.slideshow__controls--border-radius-mobile {
    position: absolute;
    left: 0;
    top: 25%;
    display: flex;
    justify-content: center;
    width: 100%;
}

Output:

WebDeskSolution_0-1673620334879.png
WebDeskSolution_0-1673620334879.png452×690 70.3 KB

If you find our reply helpful, please hit Like and Mark it as a Solution.

An award-winning North American Shopify Development Agency That Delivers Powerful Results, Innovation, and Secure Digital Transformation.

5

didn’t work

6

Does that work for both the desktop in the mobile version, does it get the dots above the image for both?

7

Does this affect both the desktop and the mobile version?