Jump to content

How to COMPLETELY disable carousel in product

Recommended Posts

Hi there, I have added 2 images to a product, but as "main" image I don't want the user to be able to go through them, I want it to be static.

By adding 

//hide carousel in product page
.ProductItem-gallery-thumbnails {
 display:none;
}

I managed to hide the thumbnails underneath the main image, HOWEVER, I can still move through the images by pressing left/right arrow keys AND by sliding my finder on mobile.

 

How can I make that first imagine completely static?

 

Thanks in advance!

Link to comment
  • Replies 6
  • Created
  • Last Reply

Top Posters In This Topic

On 12/1/2020 at 11:47 AM, tuanphan said:

Can you share link to product in your question? We can check easier

Any of my poducts (for example https://www.audiobrewers.com/shop/p/ambisonics-test-library) contain 2 pictures, the "cover" picture and a small thumbnail that is visible for the Cart. I hid the carouser underneath but as you can see, even if you press left/right arrows AND if you slider left/right with your finger on mobile, it still goes to the next image!

 

Thanks!

Link to comment
On 12/8/2020 at 1:47 PM, Alejoca said:

I have added 2 images to a product, but as "main" image I don't want the user to be able to go through them. My products contain 2 pictures, the "cover" picture and a small thumbnail that is visible for the Cart.

Have you tried deleting the additional images so that you have a single product image?

product-images-new-product-composer.thumb.png.61770eb2f3bfa4c6f90bf9fb00af36a9.png

 

 

Edited by paul2009

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.
Catch up on all the release notes and announcements 2023 [for Circle members only] (there's a public version here)

Buy me a coffee

Link to comment

Hi @paul2009 - this does not work, as soon as I delete the second picture, the product stops having that picture as a thumbnail for when it's added to cart.

With two pictures:

image.png.06cfa23e15c60314783f59ee1a17550b.png

 

On the SKU thumbnail I can have the second picture as thumb:

image.png.12c0c2b25ee55532e3ab908159c05764.png

 

Once I remove the second picture:

image.png.2a3ff647961b32327b6f2ff2c7ba3b56.png

 

The picture on SKU disappears:

image.png.db1dc052f1f0b0c05a51080d74e98b91.png

 

Please mind that NEW EDITOR doesn't have this feature, which is something to miss when your product cover is a rectangular picture and the "cart picture" is a square picture.

 

So, I am sure with CSS there must be a way to deactivate the swipes/left-right keystrokes?

 

 

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.