Our Lazy Summaries plugin raises the limit on summary blocks from 30 to unlimited items and some additional features.

The Lazy Summaries Plugin allows you to increase the limit of the Squarespace Summary block from 30 to unlimited.

Set size and spacing of your Squarespace Summary Collection with the Lazy Summaries plugin.

With this Squarespace plugin you can remove the limit and display the entirety of your Summary collection (such as products, images, blogs, etc.)

Lazy Load Summaries Block Squarespace

$55.00

Our Squarespace Lazy Summaries Block plugin raises the limit on summary blocks from 30 to 250 items. And lets you Plus additional features like adding lightbox for store or blog pages (not just galleries). Some search for Squarespace Lazy load.

Add To Cart

While you're waiting for Squarespace raise Summaries limit, you may give a chance our Lazy Summaries plugin. Our Lazy Summaries plugin raises the limit on summary blocks from 30 to unlimited items. You will also get some additional features like showing alternative image on hover for Products, set different slides width for mobile etc.

So after purchasing you will get an instruction what you need to insert in Footer Injection or in Markup Block on page with targeted Summary.

Our PRO extension users may click Message Panel in extension window and find how to enable and use Lazy Summaries without any additional purchase.

After purchased Lazy Summaries plugin you should receive file named as Lazy Summaries - Footer Injections.txt. You need to paste its content to Footer injections, located at your-website.squarespace.com/config/settings/advanced/code-injection Footer region (or Settings -> Advanced -> Code Injection). Code in Advanced Collection settings or Code block/Markdown block will also work. After that you open any Summary block or creating new and seeing new options there - enable what you need in Summary Settings Dialog:

So settings titles talk themselves:

Enable Lazy Summaries - Activates lazy summaries;
Enable Session Storage cache - This will enable caching to sessionStorage and next time it will take items instantly from this cache. Session cache clearing on closing window or rerun browser only, so better use this for infrequently changing collections.
Load all or use Load more - if checked, it will request for all collection items (so it takes time for big collections) and append all items at once to Summary. If using Load more - it will add a button, clicking this button it will prepends items you've set in Number of items field.
Load more button text - if using Load more, here you may set the button text.
Enable Alternative image on hover - if enabled, it will look for galleries second image and prepend it to show on mouse over. Useful for products summaries when first image shows one color and hovering you're showing another one. Or if you have several renders (views) of your product, you may use this to change on hover.
Use separate settings for mobiles - if checked, shows additional range sliders where you may set columns width and gutter to use on screens less than 640px width. This way you may force to show 2 or 3 columns on devices (not 1 column as default does).

If using Load more button, notice it shows items count by default. We're using css pseudo element :after for this. And you may easy change the way it shows or even hide it. Here is the css snippet you may play with:

.sqs-block-summary-v2 .loadMoreButton:after {
    content: "("attr(data-items-left)")";/*attr data-items-left refreshing each time you click*/
}

Quick video to show plugin work:

Advanced Using

Lazy Summaries plugin has a useful hooks system you may use in your own coding:

<script>
window.customLazySummaries = {
    general: { //runs for all summary blocks
        startFunction: function(sum_block, jsonData) {
            //runs just when summary started, you do not need return smth

        },
        startRenderFunction: function(sum_block, jsonData) {
            //runs just when summary started/sorted and before request new items

        },
        startItemsFunction: function(item, jsonData) {
            //runs for each existed(start) summary item
        },
        transformExternalDataFunction: function(data, jsonData) {
            //collections json received and you may transform idata there
            //need return transformed data json, jsonData is summary config object

        },
        jsonTransformFunction: function(items, jsonData) {
            //collections json received and you may transform items json there
            //need return transformed items json, jsonData is summary config object

        },
        renderItemDataFunction: function(item, jsonData) {
            //you may do transformation on rendered summary-item node and return it,
            // it also runs for existing summary items

        },
        afterRenderItemFunction: function(item, jsonData) {
            //you may do transformation on rendered summary-item node and return it,
            // it also runs for existing summary items

        },
        allItemsRenderedFunction: function(new_items, jsonData) {
            //access all new loaded items there, you may transform and return them
        },
        portionItemsAddedFunction: function(sum_block, jsonData) {
            //runs after portion of items appended to summary block
        },
        allItemsAddedFunction: function(sum_block, jsonData) {
            //runs after all of loaded items appended to summary block
        },
        refreshFunction: function(sum_block, jsonData) {
            //runs after refresh summary block (appending items, sorting..)
        }
    },
    separate: [ //run for separate summaries, based on id attribute
        {
            id: 'block-yui_3_17_2_1_1579508745168_4942',
            startFunction: function(sum_block, jsonData) {
                console.log(sum_block);
            },
            //set summary ids there
            afterRenderItemFunction: function(item, jsonData) {
                console.log(item);

            }
        }
    ],
    related: [{//used to build Related Summaries
        container: '.collection-type-blog',
        //remoteSummary: '/remote-summary',
        placeTo: '.Main-content',
        summarySettings: {
            design: "autogrid",
            imageAspectRatio: 1,
            hideLoadMore: true,
            textSize: "small",
            metadataPosition: "above-title",
            primaryMetadata: "cats",
            secondaryMetadata: "none"
        },
        filter: {
            tag: true,
            category: false,
            featured: false
        }
    }]
};
</script>