Set Product gallery on two different layout for Desktop and Mobile

This topic has 11 replies, 3 voices, and was last updated 2 years, 3 months ago ago by Rose Tyler

  • Avatar: Giovanni
    Giovanni
    Participant
    January 23, 2022 at 21:53

    Is possible on xstore template set two tipe of product gallery as I saw on many sites?
    i wold like to have for desktop with two image ( Style gallery 5 ) https://unatemplate.com/desktop.JPG
    And set on mobile – one image with Thumbnails sliders below ( Style gallery 1 )
    https://unatemplate.com/mobile.JPG

    10 Answers
    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    January 24, 2022 at 17:11

    Hello,

    We’ll add this option in the next theme update (10-15 February).

    Regards

    Avatar: Giovanni
    Giovanni
    Participant
    February 25, 2022 at 18:22

    today on 25 February and two update not have this function, please if is possible add this option on your theme to select two different variation gallery that depend if is on desktop or mobile.

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    February 26, 2022 at 08:36

    Hello,

    Due to the fact that this option may affect other customers after the update, we decided to take more time to develop/implement this. We will inform you once it will be done

    Regards

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    February 26, 2022 at 11:37

    Our dev team answered:
    I was implemented in 8.1 version of the theme –
    IMPROVED: Single Product Builder gallery double image on mobile – https://xstore.8theme.com/update-history/
    When you select this layout in the Single product page builder https://unatemplate.com/desktop.JPG , on mobile it will be like this – https://unatemplate.com/mobile.JPG
    It happens automatically, additional settings will not be added.

    Regards

    Avatar: Giovanni
    Giovanni
    Participant
    February 27, 2022 at 13:24

    I have installed 8.1.1 but not see this function, see the video on private area.
    If you have implemented this, please you can send me an image, a video or an explanation for see how set up two different galleries between desktop and mobile?

    I don’t know if I explained well ..
    I would like the chance to set the gallery with two images on desktop and when you switch to mobile see the gallery with slider, having two different settings one for mobile and one per desktop.

    Please contact administrator
    for this information.
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    February 27, 2022 at 13:31

    Hello,

    We can’t watch your video. Upload it here – https://dropmefiles.com/ and provide URL, please.
    Check gallery here – https://olya.8theme.com/rose/headphone/product/airpods-pro/ , desktop – https://gyazo.com/c87cf4baec4724bb6b504f5e3cc0cc46 and mobile – https://gyazo.com/b06431c29d7fb9abaafe29e5dfa6ae5f

    Regards

    Avatar: Giovanni
    Giovanni
    Participant
    February 27, 2022 at 15:03

    Sorry, yes now I’ve seen, i thought there was an option, but when set the two images on desktop and is just turns it to slider gallery on mobile, thanks.

    Only one question, is possibile to have ( slide points ) on mobile after thumbnails for indicate how many image are, because in this mode i see only 3 thumbnails for previews and if have 4 – 5 – 6 images, users not imagining that have more preview if not have a indications.

    Please contact administrator
    for this information.
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    February 27, 2022 at 15:15

    Hello,

    We can’t check your screenshot – https://gyazo.com/9c01b939c570deea6f9ca6cd525de163 Please provide a new one + URL of your product page.

    Regards

    Avatar: Giovanni
    Giovanni
    Participant
    February 27, 2022 at 16:50

    Send new link on private area

    Please contact administrator
    for this information.
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    February 28, 2022 at 08:22

    Arrows can be visible there, add the next code in Theme Options > Theme custom CSS > Global:

    @media screen and (max-width: 768px) {
        .single-product .swipers-couple-wrapper.swiper-entry .swiper-control-bottom .swiper-custom-right,
        .single-product .swipers-couple-wrapper.swiper-entry .swiper-control-bottom .swiper-custom-left {
            display: block !important;
        } 
    }

    Regards

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

You must be logged in to reply to this topic.Log in/Sign up

Helpful Topics

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