Product page customization on Kingdom Theme

[shamrockweb]

Hi there. On the product page.... I am trying to move the navigation arrows on either side with the thumbnails immediately below the main product image (that is responsive and keeps the same distance from the main image when the screen size is smaller or large). Help! Thank you.

https://mimihalinew.myshopify.com/

PW: mimihali2024

[DaisyVo]

Hi @shamrockweb 

Do you mean that you want to move the arrow button here? 

Looking forward to hearing from you soon. Thank you!

Best,

Daisy - Avada Support Team.

 

[DaisyVo]

Hi @shamrockweb 

I hope you are well. You can follow our instructions below:

Step 1: Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
Step 2: From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/iDxwa8zBQ4Z-
Step 3: Copy the code below and paste it there

Here is the code for Step 3: 

.css-slider-button {
    top: unset !important;
    bottom: 0% !important;
}
span.css-slider-button.css-slider-prev {
    left: 20%;
}
span.css-slider-button.css-slider-next {
    right: 20% !important;
}

Result: 

Before: https://prnt.sc/p1XrHexSjD6y
After: https://prnt.sc/JBS6xrBDQpr8

Please let me know if it works. Thank you!

Best,

Daisy - Avada Support Team.

[shamrockweb]

Sorry. No. I want to move the arrows outside the main image. I don't want them on top of the image. I want them on either side in the white space. I also want the image to have a margin on the right side so there is white space before the edge of the page. Does that make sense?