7.1 - Change Gallery Style for Mobile Only for Product Pages

I would like my product pages to display product images as "Stacked" for all desktop screen sizes, but I would like to keep the original "carousel" display for the product images on mobile only.

So I would like the mobile version of the product image display as seen in the SALT-LESS squarespace 7.1 theme (image attached), but on desktop screens I want the images to show using the "Stacked" display option instead which I know I can select from the settings for the product image display in general.

I don't have my site set up yet so can't share a link but if you could still help me out that would be great. So I can see what is possible before committing to a theme design to start with.

Thank you so much!

11 minutes ago, artisanalies said:

I have set my product pages to display product images as "Stacked".

I would like to set the Quick View light box galleries on the Shop page to display product images as "Slideshow" so they are just more condensed and clean looking. Is this possible to achieve? Might anyone be able to provide me some code for it for a site designed on 7.1?

Can you share your site with protected password and show an image of the desired result?

@bangank36 I edited my original comment to better reflect what I am going for. I hope it's helpful for now it's the best I can do! Thank you!

@artisanalies You want

Desktop: Image in stacked design

Mobile: Image in carousel with arrows on left/right

Is this right?

Just like it shows here in the salt-less demo of Squarespace on mobile (attached image) with the arrows left and right and the 1/2 numbering in the top right corner of the image representing how many images there are to go through for each product.

Wondering if this was ever answered.

Try add this to Design > Custom CSS

/* Product slide arrows control */
@media screen and (max-width:767px) {
.ProductItem-gallery-carousel-controls {
    display: flex !important;
}
/* arrows background */
.ProductItem-gallery-carousel-controls * {
    background: white;
}
.ProductItem-gallery-carousel-controls>div {
    justify-content: center !important;
}
.ProductItem .ProductItem-gallery-carousel-controls>div::after, .ProductItem .ProductItem-gallery-carousel-controls>div::before {
    border-color: black !important;
}
}

On 1/18/2022 at 4:39 AM, David_GM said:

Wondering if this was ever answered.

 

Hi,

I want to remove the arrows, 1/6 numbers, and have the thumbnails in mobile (first photo) on the side like on desktop (second photo). For all products.

There's also a weird gradient under the thumbnails on desktop any idea what it is and how to remove it?

https://www.tribeandsol.com/shop/p/adzer-knit-jacket

On 2/7/2022 at 11:48 PM, MoonMama said:

Hi,

I want to remove the arrows, 1/6 numbers, and have the thumbnails in mobile (first photo) on the side like on desktop (second photo). For all products.

 

There's also a weird gradient under the thumbnails on desktop any idea what it is and how to remove it?

https://www.tribeandsol.com/shop/p/adzer-knit-jacket

Add to Design > Custom CSS

@media screen and (max-width:767px) {
.ProductItem-gallery-current-slide-indicator.enable-on-first-image-load.enabled {
    visibility: hidden;
}
button.product-item-gallery-carousel-control.ProductItem-gallery-next {
    visibility: hidden;
}
}

8 hours ago, tuanphan said:

Add to Design > Custom CSS

@media screen and (max-width:767px) {
.ProductItem-gallery-current-slide-indicator.enable-on-first-image-load.enabled {
    visibility: hidden;
}
button.product-item-gallery-carousel-control.ProductItem-gallery-next {
    visibility: hidden;
}
}

 

This didn't work

On 2/13/2022 at 4:52 AM, MoonMama said:

This didn't work

I tested & it works here. Where did you add? It should add to Design > Custom CSS

On 2/13/2022 at 9:20 PM, tuanphan said:

I tested & it works here. Where did you add? It should add to Design > Custom CSS

Can you show me your testing because it didn't work for me.

Tested on browser here. 

On 2/21/2022 at 3:15 AM, tuanphan said:

Tested on browser here. 

I still see arrows and the product is not on the side.