Jump to content

7.1 - Change Gallery Style for Mobile Only for Product Pages

Recommended Posts

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!

salt-less-mobile-product-image-gallery.png

Edited by artisanalies
Link to comment
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?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • artisanalies changed the title to 7.1 - Change Gallery Style for Mobile Only for Product Pages

@artisanalies You want

Desktop: Image in stacked design

Mobile: Image in carousel with arrows on left/right

Is this right?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 weeks later...
  • 1 month later...

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.

 

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 3 weeks later...
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

Screen Shot 2022-02-06 at 11.52.37 PM.png

Screen Shot 2022-02-07 at 10.29.21 AM.png

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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.