Product page customization on Kingdom Theme

Store Design
, ,

Topic summary

A user is seeking help customizing the product page layout on the Kingdom theme. They want to:

Main Request:

  • Reposition the navigation arrows from overlaying the main product image to outside it, on either side in the white space
  • Keep thumbnail images directly below the main product image
  • Ensure the layout remains responsive across different screen sizes

Additional Requirement:

  • Add a right margin to the main image so white space appears before the page edge

A support team member initially misunderstood the request, offering CSS code to adjust arrow positioning within the image. After clarification, the user confirmed they want the arrows completely outside the image boundaries in the surrounding white space, not just repositioned on top of it. The issue remains unresolved as the provided CSS solution doesn’t address the actual requirement.

Summarized with AI on November 4. AI used: claude-sonnet-4-5-20250929.
1

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

2

Hi @shamrockweb

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

aa.png
aa.png988×758 336 KB

Looking forward to hearing from you soon. Thank you!

Best,

Daisy - Avada Support Team.

3

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.

4

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?