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 summary gif.gif
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 summary gif.gif

Lazy Load Summaries Block

$55.00

The Lazy Summaries (a.k.a. Lazy Load Summary Block) plugin allows you to display 8x more items on your summary block by raising the limit from 30 to 250 items.

Plus you get the option to add lightbox for store or blog pages (not just galleries), filter summary items by tags or category, add custom classes for styling and sort your summary block items.

The Lazy Summaries (a.k.a. Lazy Load Summary Block) plugin allows you to display 8x more items on your summary block by raising the limit from 30 to 250 items.

Plus you get the option to add lightbox for store or blog pages (not just galleries), filter summary items by tags or category, add custom classes for styling and sort your summary block items.

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:

Lazy Summary Settings

Lazy Summary Additional Settings

Lazy Summary Sizes & Spacings

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>


Frequently Asked Questions

  • Yes, you can use the Lazy Summary on multiple pages. It works simultaneously on multiple summary blocks in 1 page or across multiple pages.

  • No, Lazy Summary only works on summary blocks. It does not work on any other content block or pages.

  • No, the Lazy Summary does not work with the masonry layout, simple and basic grids only.

    1. Copy the Lazy Summary installation code

    2. Go to Code Injection > Footer Injection and paste the code.

    3. Save.

    After saving the code, lazy summary plugin will automatically setup.

    You’ll know you successfully installed lazy summary when you find additional tabs in your Summary Block Settings.

    What’s next?

    Turn on Lazy Summary by toggling the button in the Lazy Settings tab.

    Can’t see Lazy Summary settings?

    Try re-opening the summary block settings to refresh the settings window.

    If you still can’t see it, contact us and we’ll get it fixed.

  • The Lazy Summary plugin is not a subscription. You only need to pay once per website.

  • The installation code is emailed to you when you purchase Lazy Summary plugin. You’ll find it in the .txt file attached in the email.

    If you haven’t received it or can’t find it, let us know and we’ll resend it to you.

  • Although we recommend pasting it in the Code Injection because content blocks are more susceptible to Squarespace changes, yes — Lazy Summary works on personal plan accounts.

    Just paste the code on a Markdown block and it’ll work as good as pasting it in the Code Injection.

WARNINGS

Using Lazy Summary on Squarespace 7.0

DO NOT use the Auto option in the Aspect Ratio under Design settings if you’re using gallery page on Squarespace 7.0 for your video gallery and you want to display your videos on a summary block.

All Aspect Ratio options work except for Auto.