Pagination for shop page and pages width


On my laptop, it still blurs and stacks when I go from a product page back to the new-shop with the browser back button. It's not working correctly on my iphone and ipad at the moment, the first image is clear and the rest are blurry. When I refresh the page it goes blank.

In terms of the video, I thought there were a couple of spots where you were showing how to do something and then after you did it you would change your mind and do it another way. It was a bit hard to follow.


All of the pages except the shop are pushed to one side. Shall I email you a screen shot? It was not like this before, not sure what changed.


A screenshot would be helpful, as I'm not sure what you mean.

In any case, I did see something that might be related and I've added this code on CSS to fix it:

@media screen and (max-width: 1024px) {
  body main#main {
    width: 100% !important;

Was this it? If it was, this have been an issue for quite a while.

As for the new blur, I was testing with trying to speed things on mobile, but it ended up "blurring" all loaded images (not related to the previous blurring behaviour, which would then load a higher quality when on screen). Also already easily fixed.

And sure, I can record a new video when you think it's in a final satisfying result. I understand I was a bit confusing at some parts, I haven't even watched it again, I'll probably be able to see it when I do.

In any case, please see it again now! I just realized it actually is quite faster without loading the low quality images first.


Everything is looking really good. The margin thing seems to be fixed. The only thing I noticed was on my iphone the first image was clear and the rest of them were blurry...but not as blurry as before. Once everything is fixed, how do we switch the new-shop to be the main shop?

I would also like to understand how to make the Steals page into a shop like the new-shop. Perhaps I can do it on my own with your new video : )

Will we have to do anything special with the Archives? The older seasons are set up as our regular Shop currently.


Cool! Coincidentally I could access the site on a much bigger screen just now and realised what I should have known before, about that new "blurriness" issue there. Probably the big reason why the original squarespace shop crash on mobile is precisely that high quality image multiplied by 100. I'll fix that later on.

Will that be all?! smile

Switching is just a matter of renaming the pages. shop should become shop-print or anything else (can't delete it). If there's no link to it, only way to access would be direct link, which is fine. Whatever the new name is have to be also set on the script. And new-shop becomes shop. I can show that on the new video and then quickly revert back, but then it will become live for that little while if that's fine for you.

If steals are all items duplicated from shop, you could make it very much like the new-shop simply by using a summary filter such as category. You could also just make a new products page and make it separated.

If you want to apply it to archives, it will all be the same thing. Have a products page, make a regular page with a summary block and code injected to its advanced settings.


So, I've reached my limit here. At least for now.

I won't be able to develop this any further and I really hope it's satisfactory the way it is now.

The image blurring is basically fixed by using a bigger default size. Before it was 300px, now it is 750px. Squarespace shop dynamically sets it, and it can go up to 1500px, but even for big screens nowadays 750 is enough. Also, I'm using srcset which will allow for the browser to properly choose a size. This works fine with chrome already, but not many others.

I'm not sure when and if I'll be able to go back into building more on this. There are still somethings that could be improved.

So please, just answer me the last question about the video and what else you may be missing and I'll do my best to wrap this up.

I'm very proud of the results here so far and the way it is today. Really hope you've enjoyed it. wink

The new code also have reduced significantly:

<script src=""></script>

<style name="endless scrolling" author="">
  .summary-item-list {
    display: none;
<script name="endless scrolling" author="">
  Y.use('node', function()
    Y.on('domready', function()
      // enable Custom CSS to work on editor'main#main').addClass('endless-scrolling');

      // prevent script from running in squarespace editor
      if ( !== window.document)
        // with style, prevented summary to appear'main#main .summary-item-list').setStyle('display', 'block');
        'position': 'absolute',
        'bottom': 0,
        'left': '50px',
        'right': '50px'

      // settings
        'ajaxString': '/shop?format=json',
        'loadingMargin': 500,
        'container': 'main#main .wrapper',
        'list': '.summary-item-list',
        'item': '.summary-item',
        'onComplete': setMouseHover,
        'jsonAjax': jsonAjax

      function jsonAjax (ajaxString, callback)
        var json;, {
          on: {
            success: function (x, o) {
              try {
                json = Y.JSON.parse(o.responseText);
              } catch (e) {
                console.log("JSON Parse failed!");

              // when done loading json
      } // function cacheAjaxRequest

      // make it look like the original shop
      function setMouseHover ()
        var Ynode = Y.all('main#main .wrapper div .summary-item a img');
        Ynode.on('mouseenter', function(e)
        Ynode.on('mouseleave', function(e)
      } // function setMouseHover


I think we are all set except for the new video. It's fine if you make the new-shop live while you make the video. Just so I understand, our new-shop is a summary of the old that correct? You mentioned that we can't delete it and I'm not sure I understand why.


Yes, I am happy with your work. I hope I can confidently duplicate it, I may have some questions once I try to do it myself. Thank you for taking the time to answer them all : )


I noticed today that not all of the products are showing up in the new-shop, any idea why this is happening?


Yeah, the new shop is using a summary block of the current one, reason why we can't delete it on the config. But it sure can be removed from sight.

Which products aren't showing up? I couldn't reproduce. From what I could see they both have exactly same number of items (153 right now).

I'll record the video while making it live this week. Then I'll wait for your questions.


I checked the new-shop today and everything is there...fixed : )


I noticed the same problem mentioned before, not all the products are showing up in the new-shop when the page is originally loaded. Once the page is refreshed the missing product is there. Have any idea why this might be happening?


I really can't see the problem here. From your description, I suppose it's a browser cache related issue. Whenever you want to see how customers will see your site, use a completely cleaned browser or something like Chrome's Incognito mode or Safari's Private Window. Maybe that's it.


Okay, I will check that out. Thanks


Just a note: I couldn't make the video yet. frowning
Hopefully next week will be smoother.
At least looks like you're testing the new-shop to be stable, right? blush


Yes, it still looks good.


Continuing from the last video, I'll basically just copy the steps needed here, with mostly updated code and a few other updates, for better visualization.

First some technical self reference: I took this as a personal project to evolve my business there, as I said before. So most of the code is now on its own CDN ( by using rawgit as exposed in the first line ) and on a new repository. Just compiling this post alone, despite being mostly copied from previous ones, took me about 1 hour. Then little less than 1 extra hour to tweak scripts a bit more, polish it, and finally another one for the video production! open_mouth

Instead of renaming the old shop, I've left it with the same name and created a new page called shop-list (instead of using the new-shop, which I left there).

Keep in mind

The scripts have a few lines that rely on both /shop and /shop-list page names, the URL Slug as it's called under page settings. If you rename any of the two pages, please remember to rename it there in the code too. Fortunately that shouldn't happen that often!

There are a few things needed to recreate it from scratch, in case you do need to do it:


1) A page with a grid summary block inside and displaying thumbnail and price only (haven't even tested with other options). Column width here won't matter and there is no more paging abstraction, so number of items also won't matter (better just leave it at 1).

2) That page need to have an animated GIF with the loading image animation, and a clickthrough URL link set to javascript:endlessScrollingLoading();

3) Still on the same page, copy and paste the file endless-scrolling.html to that page's advanced settings, under page header code injection

4) Apply endless-scrolling-print.html on the shop page to fix the product item < SHOP "back" button. I've uncommented the line from before so there will be no "print" function this time. Also replaced new-shop by shop-list as advised under "keep in mind" up there:

<!--meta http-equiv="refresh" content="0; url=/shop-list"-->
<script name="endless scrolling" author="">
  // main settings 
  // change this to the correspondent URL Slug
  var shopList = '/shop-list';
  var thisPage = Static.SQUARESPACE_CONTEXT.collection.fullUrl;
  if (location.pathname === thisPage)
  Y.use('node', function()
    Y.on('domready', function()
      var pageId = window.location.href.split('/').pop();
      Y.all('a[href$="'+ thisPage +'"]').set('href', shopList + '/#[email protected]' + pageId);

5) Copy and paste the endless-scrolling.less file into Custom CSS, tweak it at your will, and have fun! yum

Here's the video of me applying those steps:

Lazy loading for squarespace grid gallery

Thank you for the new video, we may have some questions once we try to recreate what you did ourselves.


We are having the same problem with the shop as before. I wanted to ask again if you are able to fix it. When I click on the shop I do not see all of the product, there are always items missing until I refresh the page. It seems like the newest product is always there, then several are missing. Can you fix this? We add one new product everyday.


This situation is terrible for me. Horrifying!

I could see the problem (hopefully the same you saw), but I can't really easily reproduce it. I believe it have something to do with adding products and caching.

What scares me most is I'm in no condition to dedicate time to this anymore. I'm not sure you are aware, but I'm no longer in this business. Still, by coincidence I saw your message as soon as it arrived. And I hardly ever leave a direct message to me hanging for more than 1 day anyway. I just didn't know what to say in this case...

Right now I can say (and couldn't in the first day) I only got to see the problem because I've been trying, little by little, to see what I can do in these past days. And I'll keep trying whenever I'm able to squeeze some time in.

This is a surprising hairy problem, even for coming up with a quick fix. frowning

Lazy loading for squarespace grid gallery