How to move product thumbnails below or on side of the main image

This topic has 6 replies, 2 voices, and was last updated 3 hours, 18 minutes ago ago by Ayan Rahman

  • Avatar: John
    John
    Participant
    June 18, 2026 at 15:37

    Hi support team,

    I am using the XStore theme and I am trying to customize the single product page layout. Currently, the product gallery thumbnails are overlapping/placed on top of the main product image.

    I would like to move the thumbnails so they appear below and outside of the main product image.

    I have already checked the Customizer settings under “Single Product” -> “Layout” and set “Thumbnails” to “Horizontal”, but the position does not seem to change as expected.

    Could you please advise if there is a specific setting I am missing, or if this requires custom CSS to achieve the desired layout?

    Looking forward to your guidance.

    Files is visible for topic creator and
    support staff only.
    5 Answers
    Avatar: Ayan Rahman
    Ayan Rahman
    Support staff
    June 18, 2026 at 16:11

    Hi,

    Thank you for reaching out to us.

    Please edit settings via the Single Product Builder with Elementor > edit template – https://www.8theme.com/documentation/xstore/xstore-builders/xstore-single-product-builder-with-elementor/

    Warm Regards,
    The 8Theme Team

    Avatar: John
    John
    Participant
    June 18, 2026 at 17:42

    Hi support team,

    Thank you for your reply. I have followed your instructions and used the Elementor Single Product Builder.

    However, the issue persists. Even when I select the option “Thumbnails down”, the layout remains identical to “Thumbnails down inside”. The thumbnails are still overlapping the main image instead of being placed clearly below it, outside the image area.

    It seems that the setting is not being applied correctly by the widget. Could you please check if there is a CSS conflict or a bug in this specific Elementor widget version?

    I look forward to your further assistance.

    Avatar: Ayan Rahman
    Ayan Rahman
    Support staff
    June 19, 2026 at 12:57

    Hi,

    We appreciate your prompt response.

    We’ve removed this custom CSS code

    @media screen and (min-width: 993px) {
            selector #swiper-unique-id-1 {
            position: absolute;
            bottom: 0;
            padding: 20px;
            left: 0;
            right: 0;
            margin: 0;
        }
    }
    @media screen and (max-width: 992px) {
            selector #swiper-unique-id-2 {
            position: absolute;
            bottom: 0;
            padding: 20px;
            left: 0;
            right: 0;
            margin: 0;
        }
    }

    Please check how it works now.

    If you have any additional questions or concerns, please do not hesitate to reach out to us. Our support team is always available to assist you.

    Warm Regards,
    The 8Theme Team

    Content is visible for topic creator and
    support staff only.
    Avatar: John
    John
    Participant
    June 19, 2026 at 13:12

    Thank you so much!

    Avatar: Ayan Rahman
    Ayan Rahman
    Support staff
    June 19, 2026 at 14:22

    Hi,

    You’re welcome!

    Warm Regards,
    The 8Theme Team

  • Viewing 6 results - 1 through 6 (of 6 total)

The issue related to '‘How to move product thumbnails below or on side of the main image’' has been successfully resolved, and the topic is now closed for further responses

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.