Section Rendering API

Alpha Feature

This feature is still in development. While it’s already live on some stores, we’re actively refining the code. Got feedback? Feel free to share it with us on Discord!

Core Principals

You can use the Section Rendering API to load parts of your theme with an AJAX request. This lets you update parts of a page without reloading the whole thing — just fetch and swap out the sections you need.

This is really useful for things like filtering a collection, changing a product swatch, or showing predictive search results.

How to use the section rendering API with Liquify Pro?

With the new li-render tag, we’re bringing the power of the Section Rendering API into the Liquify Pro universe. We’ve included a few default use cases, but you also have the flexibility to build a completely custom functionality.

In the following steps, we’ll show you how to use it for collection filtering, variant swatches, predictive search, and a basic example you can adapt to any part of your store.

Heads up

This is a more advanced feature intended for users with some technical experience.

Getting started

1

Go to GitHub and copy the code from our repository.

2

In Shopify, open your Theme Code Editor.

3

Navigate to the Assets folder and click + Add a new asset.

4

Create a new blank JavaScript file named section-rendering.

5

Paste the copied code from GitHub into this new file.

6

In your Webflow project settings, paste the following script before the </body> tag:

<script src="{{ 'section-rendering.js' | asset_url }}"></script>

You’re now ready to jump into Webflow and start adding the necessary attributes.

In the next steps, we’ll walk you through some special use cases and show you how to customize things even further.

---

Filtering Collections

For a better user experience, it is recommended to not reload the entire page whenever you apply a filter on the collection page. This can be done with the Section Rendering API and a few Liquify Pro attributes.

First, you need to wrap all filter elements and the collection list inside the li-render-filter="wrapper" tag. When using the Starter Template, it’s best to apply it to the .padding-global element.

Webflow

li-render-filter = wrapper

li-render-filter = wrapper

Filter Element

First we will take care of the filter element. On the filter checkboxes or radio buttons you need to add the following Attributes:

Webflow

li-render-filter = filter

Webflow

li-render-filter-value = {{ filter_value.value }}

Webflow

li-render-filter-name = {{ filter_value.param_name }}

Optional: Here, you can select the trigger type. These are standard JavaScript events like click, input, change, etc. By default, the trigger is set to change.

Webflow

li-render-filter-trigger = click

Filter Price Element

For price filtering, use the special tag we’ve provided. Make sure to place it on the min price input field.

Webflow

li-render-filter = price-min

Webflow

li-render-filter-min-param = {{ filter.min_value.param_name }}

This tag should be placed on the max price input field.

Webflow

li-render-filter = price-max

Webflow

li-render-filter-max-param = {{ filter.max_value.param_name }}

Filter Clear All

To clear all currently applied filters, you can add an element with the following attributes. When clicked, it will reset all active filters.

Webflow

li-render-filter = clear-all

Remove Single filter

To remove a single filter, loop through all applied filters and add an element inside each one with the following attribute. When clicked, it will remove just that specific filter.

Webflow

li-render-filter = filter-remove

Webflow

li-render-filter-value = {{ filter_value.url_to_remove }}

Sort Collection

To sort the current collection, simply add the following attribute to your sort element:

Webflow

li-render-filter = sort

Optional: Here, you can select the trigger type. These are standard JavaScript events like click, input, change, etc. By default, the trigger is set to change.

Webflow

li-render-filter-trigger = change

Optional: By default, filters are applied automatically when a checkbox or radio is selected. However, you can also choose to apply filters only when the user clicks a submit button. To do this, simply add the following attribute to your button element:

Webflow

li-render-filter = submit-button

---

Predictive Search

To dynamically show contents of your shop, you can use Shopify's predictive search. You only need to apply a few attributes to make it work. Here is a link to the Shopify Documentation.

First, you need to wrap all search elements inside the li-render-search="wrapper" tag.

Webflow

li-render-search = wrapper

All following attributes need to be on the same li-render-search="wrapper" element

Optional: Search type

The search type setting lets you define which types of pages should be included in the search. The following are the accepted values, which can be combined in a comma-separated list:

• product

• page

• article

• collection

• query

This setting should be added to the element with li-render-search="wrapper".

Webflow

li-render-search-type = product, page, article, collection, query

Optional: Search Limit

This tag allows you to set a limit on the number of search results. Simply enter a number between 1 and 10 as the attribute’s value — the default is 10. Add this attribute to the element with li-render-search="wrapper".

Webflow

li-render-search-limit = 10

Optional: Search Limit Scope

Decides the distribution of results. The following are the accepted values:

• all: Return results up to limit across all types.

• each: Return results up to limit per type.

The default value is all. Add this attribute to the element with li-render-search="wrapper".

Webflow

li-render-search-limit-scope = all, each

Optional: Search unavailable

Specifies whether to display results for unavailable products. The following are the accepted values:

• show: Show unavailable products.

• hide: Hide unavailable products.

• last: Show unavailable products below other matching results.

The default value is last.

To change the default value, you can use Search Settings in the Search & Discovery app. This parameter is only applicable to type product. Add this attribute to the element with li-render-search="wrapper".

Webflow

li-render-search-unavailable = last

Optional: Search fields

Specifies the list of resource fields to search. The following are the accepted values:

• author

• body

• product_type

• tag

• title

• variants.barcode

• variants.sku

• variants.title

• vendor

The default search fields are title, product_type, variants.title, and vendor which can be combined in a comma-separated list. For the best search experience, you should search on the default field set. Add this attribute to the element with li-render-search="wrapper".

Webflow

li-render-search-fields = author, body, product_type, tag, title

li-render-search = wrapper

Search Input

To enable the search functionality, place an input field inside the element with li-render-search="wrapper". Then, add the following attribute to the input element:

Webflow

li-render-search = input

Optional: Render Target

If you only want to re-render a specific part of the section, you can add this attribute to an element. Everything inside that element will be refreshed on update.

This is especially useful when using a popup — for example, wrapping your search results with this ensures the popup stays open during a search. Otherwise, the entire section would be re-rendered, causing the popup to close.

Webflow

li-render-search = target

---

Recommended Products

To display recommended or related products on a product page, you can use the following attributes.

First, add an element with the li-render-recommended="wrapper" attribute. This should wrap the products list.

Webflow

li-render-recommended = wrapper

All of the following attributes must be added to the element with li-render-recommended="wrapper".

Webflow

li-render-recommended-product = {{ product.id }}

Webflow

li-render-recommended-path = {{ routes.product_recommendations_url }}

Optional: Recommendation intent

The recommendation intent that is used to generate product recommendations. You can use intent to generate product recommendations on various pages across the online store, according to different strategies. Learn more about recommendation intents.

The accepted values are related and complementary. The default value is related. Add this attribute to the element with li-render-recommended="wrapper".

Webflow

li-render-recommended-intent = related

Optional: Limit

Limits the number of results. The value can range from 1 to 10, and the default is 10. Add this attribute to the element with li-render-recommended="wrapper".

Webflow

li-render-recommended-limit = 4

li-render-recommended = wrapper

Optional: If you only want to re-render a specific part of the section, you can add this attribute to an element. Everything inside that element will be refreshed on update.

Webflow

li-render-recommended = target

---

Custom Wrapper (Example: Variant Swatch)

The Custom Wrapper is a special attribute designed for advanced use cases.

For example, it can be used to re-render a custom variant swatch like the one below—allowing you to load additional variant images or metafields dynamically. It unlocks a range of new possibilities while keeping performance on point.

It's important to wrap the elements inside li-render-custom="wrapper":

Webflow

li-render-custom = wrapper

If the li-render-custom-trigger elements are being re-rendered (for example, when they are in the li-render-custom="target" element), you need to set this attribute to the li-render-custom="wrapper" to re-initialize these elements.

Webflow

li-render-custom-reinit = true

All the following attributes must be added to the element with li-render-custom="wrapper".

li-render-custom = wrapper

The following two attributes should be added to an element that will trigger the rendering.

For example, you can apply them to variant selectors to dynamically fetch and update content related to the selected variant.

Webflow

li-render-custom-value = {{ product.url }}?section_id={{ section.id }}&variant={{ value.variant.id }}

Optional: Here, you can select the trigger type. These are standard JavaScript events like click, input, change, etc. By default, the trigger is set to change.

Webflow

li-render-custom-trigger = input

If you only want to render a certain part of the section, you can apply the follwing attribute

Webflow

li-render-custom = target

---

Events

If you are familiar with JavaScript, you can use our Events to run your own scripts. The following events are provided:

This event runs before any changes have been made to the DOM

liquify:before-render

This event will run once the filter-elements have been rendered

liquify:filter-rendered

This event will run once the custom-elements have been rendered

liquify:custom-rendered

This event will run once the search-elements have been rendered

liquify:search-rendered

This event will run once the recommended-elements have been rendered

liquify:recommended-rendered

This event will run any time a section has been rendered through our script

liquify:sections-rendered