LostBoy

It actually wasn't that bad to implement flickity. I needed it for mobile version because squarespace gallery block are not user friendly via mobile. I followed youtube instructions implement the plug-in on squarespace and used the flickity site to customize the cell boxes. I used the following code to hide the squarespace carousel on mobile and hide flickity cells on desktop. It looks much better. You can even grab all your image urls from squarespace to add to each flickity cell block. I wish squarespace had an auto swipe function auto available to their galleries, but they don't yet. @

Nope, nothing.

I'm trying to do the same thing to effect all shop product images with the following code but it is not working. <script> $(document).on('ready', function () { $('#productList .product .product-image img, #productSlideshow .slide img').each(function () { $(this).attr('data-zoom-image',$(this).attr('data-image')); $("#productList .product .product-image img, #productSlideshow .slide img").elevateZoom();({cursor:"crosshair"}); }): }): </script>

@media only screen and (max-width:650px){.Footer-inner { padding: 65px; }} worked for me

Not every product necessary needs the zoom-in especially if you don't need to be providing a detail shot i.e. the user doesn't know what they are zooming in for. I'm wondering how to disable the zoom for individual products. I am assuming #item- specific code with css disabling the zoom feature. I haven't been able to figure it out.

How do you disable zoom for one product picture on one page (not all of them)

oop, figured it out <script> if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) { Y.on('domready', function () { var galleries = Y.Squarespace.GalleryManager.getGalleries(); for( i = 0; i<galleries.length; i++){ galleries[i].setAttrs({"autoplay":true}) } }); } </script>

Can you do auto scrolling for mobile only?

@media screen and (max-width:640px) { .sqs-block-gallery { width: 200%; margin-right:auto; margin-left:auto; } }

.Footer-inner {display: flex!important;} .Footer-blocks--top, .Footer-blocks--middle, .Footer-blocks--bottom {flex: 1!important; display: flex!important; flex-flow: row nowrap!important; justify-content: center!important;} @media only screen and (max-width:950px){.Footer-inner {display: inline;}}