AttRibutes
List Sort
What is this page about?

Attributes, by Finsweet, offers a free series of Solutions that provide essential features to improve your Webflow websites.

List Sort

Sort content in a CMS or static list in Webflow.

Watch a quick tutorial

List Sort • Flash Card

Copy Script

For advanced users familiar with this solution. Includes all attributes from this page. Click on attributes and values to copy them.

Required attributes

List

Add to Collection List

fs-list-element
=
"
list
"

Field Idetifier

Add to Text Block, Paragraph Heading, Text Link

fs-list-field
=
"
IDENTIFIER
"

Sort Trigger

Add to Select, Dropdown or Button/Text Link/Link Block

fs-list-element
=
"
sort-trigger
"

Dropdown Ascending Identifier

For Dropdown element. Add to Text Link or Link Block

fs-list-field
=
"
IDENTIFIER-asc
"

Dropdown Descending Identifier

For Dropdown element. Add to Text Link or Link Block

fs-list-field
=
"
IDENTIFIER-desc
"

Optional attributes

Scroll Anchor

Add to Div Block

fs-list-element
=
"
scroll-anchor
"

Type

Add to element with fs-list-element="list"
Use "date" or "number" as value.

fs-list-type
=
"
VALUE
"

Duration

Add to element with fs-list-element="list"

fs-list-duration
=
"
TIME_IN_MS
"

Scroll Anchor

Add to Div Block

fs-list-element
=
"
scroll-anchor
"

Dropdown Label

For Dropdown trigger type only

Add to Text Block

fs-list-descclass
=
"
CLASS_NAME
"

Duration

Add to element with fs-list-element="list"

fs-list-duration
=
"
TIME_IN_MS
"

Reverse

For Button trigger type only

Add to element with fs-list-element="list".

fs-list-reverse
=
"
true
"

Ascending Active State Class

For Button trigger type only

Add to element with fs-list-element = "sort-trigger"

fs-list-ascclass
=
"
CLASS_NAME
"

Descending Active State Class

For Button trigger type only

Add to element with fs-list-element = "sort-trigger"

fs-list-descclass
=
"
CLASS_NAME
"
1

Add this <script> inside the <head> tag of your page or project

This script is the universal Attribute script: you only need to include it once, even if you have multiple Attribute solutions on the page. Learn more .

<script async type="module"
src="https://cdn.jsdelivr.net/npm/@finsweet/attributes@2/attributes.js"
fs-list
></script>

Copy Script
2

Choose which type of element will serve to trigger sorting

Form Select Field

Use a Form Select element to display the sorting options, especially if you are already using a Form for your List Filter options.

Buttons

Implement a series of buttons to activate sorting options. This method conveniently displays all sorting choices directly and is compatible with CMS content.

Dropdown

Use a Dropdown element to display the sorting options. The contents of the Dropdown Menu can either be static or driven by CMS.

3

Add these required attributes to the elements

List

Defines the Collection List that will be sorted
fs-list-element
=
"
list
"

Apply this attribute to the Collection List to which you want to add the sorting feature.

Once this solution is fully implemented and the page is published, visitors will be able to dynamically sort the items of this Collection List.

Add this attribute:
Name
fs-list-element
Copy
Value
list
Copy
Add it to those type(s) of element(s):
Collection List
NOTE

In case you want to use non-CMS content, replicate the CMS structure using div blocks as follows:

Learn everything about using a non-CMS list with the List Solutions on How to use List Solutions on static lists.

Field Identifier

Define the sorting choices in the CMS Item
fs-list-field
=
"
IDENTIFIER
"

Add the fs-list-field attribute to one or several elements within the Collection Item of your List.

The content of those elements will represent the terms the list will be sorted on, e.g., a text, a price, a date.

Give each field a different IDENTIFIER.

Add this attribute:
Name
fs-list-field
Copy
Value
IDENTIFIER
Copy
Define your own value instead of IDENTIFIER.

Example:
fs-list-field = "name"
fs-list-field = "date"
fs-list-field = "price"
Add it to those type(s) of element(s):
Text Block
Paragraph
Heading
Text Link
IMPORTANT

To sort content by date or number, you must include the Type attribute, which is available under the ‘Add more settings’ section below.

NOTE

If you are also using List Filter on this Collection List, the fs-list-field attribute that you've defined for the filters will also work with your Sort Trigger — as you can't define twice the same attribute on a single element anyway.

Select Trigger

Defines the Form Select Field element listing the sorting options
fs-list-element
=
"
sort-trigger
"

Add this attribute to a Form Select FIeld element that will serve as a sorting Choices list.

Add this attribute:
Name
fs-list-element
Copy
Value
sort-trigger
Copy
Add it to those type(s) of element(s):
Select
NOTE

In order to create the Select element, you have to first add a Form element, then add a Select element inside of it. You can delete all the other elements of the Form, including the Submit button.

If you are also using List Filter on this List, you can place the Select element in the Form where your filters elements are.

EXAMPLE

A Select element consists of a list of Choices. When you have selected your Select element, you can add Choices through the Settings panel.

Each Choice is defined by a Text field, which is the text displayed in the Select list, and a Value field. The Value field should contain an IDENTIFIER that matches those specified in the previous step with the fs-list-field="IDENTIFIER" attribute.

Each Choice represents a sorting option.

4

Set the sort order options on the Select Field element

Set Sort Ascending

value
=
"
IDENTIFIER-asc
"

An ascending sort order presents the List Items in an alphabetical and numerical order. E.g.; "A to Z", or "Smaller to bigger".

Select the Select Field, go to ‘Settings,’ and add a new choice. This choice should have the value 'IDENTIFIER-asc'.

Add this value:
Value
IDENTIFIER-asc
Use the same IDENTIFIER that you added in the Identifier Field in Step 3.
‍
Example:
name-asc
date-asc
price-asc
Add it to those type(s) of element(s):
Select

Set Sort Descending

value
=
"
IDENTIFIER-desc
"

A descending sort order presents the List Items in a reverse alphabetical and numerical order. E.g.; "Z to A", or "Bigger to smaller"

Select the Select Field, go to ‘Settings,’ and add a new choice. This choice should have the value 'IDENTIFIER-desc'.

Add this value:
Value
IDENTIFIER-desc
Use the same IDENTIFIER that you added in the Identifier Field in Step 3.
‍
Example:
name-desc
date-desc
price-desc
Add it to those type(s) of element(s):
Select

Define Ascending and Descending sort orders on the Select element Choices

Create the sorting Choices in the Select element

The IDENTIFIER value connects a sorting Choice from the Select element to the corresponding field in the Collection List Item. Add as many Choices to your Select element as there are defined Field Identifiers.

For each Select Choice item, carefully define the Text and Value fields:

  1. Write in the Name field the text that will represent the sorting Choice in the Select list, e.g.; "Name (A-Z)".
  2. In the Value field, enter the IDENTIFIER term that corresponds to the defined Field Identifier, followed by the ascending or the descending order option — see below.

Define an Ascending sort order on a Select Choice

An ascending sort order presents the List Items in an alphabetical and numerical order. E.g.; "A to Z", or "Smaller to bigger".

  • For a Select Field Choice to trigger an ascending sort order, append -asc to the end of your chosen IDENTIFIER text — e.g.: if your Field Identifier is name, write name-asc.
  • Double check that the Text field content reflects the sort order option — e.g.; "Name (A-Z)", or "Price (cheapest first)".

A descending sort order presents the List Items in a reverse alphabetical and numerical order. E.g.; "Z to A", or "Bigger to smaller"

Define a Descending sort order on a Select Choice

  • To define a descending sort order , append -desc to the end of your chosen IDENTIFIER text — e.g.: if your Fiel Identifier is name, write name-desc.
  • Verify that the value of the Text field reflects the sort order option — e.g.; "Name (Z-A)", or "Price (Highest first)".
IMPORTANT

To sort content by date or number, you can include the optional Date and Number attributes available under the "Add more settings" section below.

5

Publish your project! Done, easy right?

Check more elements and settings below
Optional

Add more

elements

Scroll Anchor

Specifies an element to scroll to after sorting the list.
fs-list-element
=
"
scroll-anchor
"

When content is sorted, the page automatically scrolls to this anchor element.

This enhances user experience, especially in sorting interfaces with many items. By anchoring the scroll to the top of the page, it ensures that users consistently start viewing from the top of the list.

It's typically set to a close parent element of the Collection List.

Add this attribute:
Name
fs-list-element
Copy
Value
scroll-anchor
Copy
Add it to those type(s) of element(s):
Div Block
Optional

Add more

settings

Type

Enable sorting by date or numerical value
fs-list-type
=
"
VALUE
"
Values allowed
Date
Number

Enables sorting by date format.

Compatible with the following date formats:

  • July 4, 2021
  • July 4, 2021 13:30
  • 07/04/2021
  • 07/04/2021 13:30
  • December 2021
Add this attribute:
Name
fs-list-type
Copy
Value
date
Copy
Add it to any element with
fs-list-field = "IDENTIFIER"

Enables sorting by number.

By default, List Sort processes all fields as alphanumeric strings. Use this attribute to specify a numeric field that may include decimals or negative values such as:

  • 25.89
  • -13
  • -2.68
  • 100.50
Add this attribute:
Name
fs-list-type
Copy
Value
number
Copy
Add it to any element with
fs-list-field = "IDENTIFIER"

Animate the List

Define CSS animations on the List when sorting is triggered
fs-list-sortingclass
=
"
CLASS_NAME
"

List animations are fully controlled through CSS.

When a list is filtered—or sorted, or paginated—temporary classes are applied to the Collection List Wrapper to trigger transitions or animations, and then removed once the action completes.

This system supports per-action animation, per-item staggering, and precise control via CSS.

  • During a sort action, the .is-list-sorting class is added to the Collection List Wrapper. It is removed once the action completes.
  • fs-list detects any CSS transitions triggered by the class and waits for them to finish before updating the list.
  • The class can be renamed using the attribute fs-list-sortingclass.
Add this attribute:
Name
fs-list-sortingclass
Copy
Value
CLASS_NAME
Copy
Default:
fs-list-sortingclass = "is-list-sorting"
Example:
fs-list-sortingclass = "my-sorting-class"
Add it to this type of element
Collection List Wrapper
script icon
Script tag
?
NOTE

Please refer to the List Sort and List Load documentation pages for animating the List when it's sorted or loaded.

Optional

Add more

Instances

Define an instance on a common parent wrapper

fs-list-instance
=
"
IDENTIFIER
"

If you wish to create multiple instances of this solution on the same page, please follow the steps below:

  1. Select a wrapper parent that contains all the elements of an instance.
  2. Add an -instance attribute to it, with a unique value.
  3. Repeat for every instance.
Add this attribute:
Name
fs-list-instance
Copy
Value
IDENTIFIER
Copy
Examples:
fs-list-instance = "1"
fs-list-instance = "2"
fs-list-instance = "blog"
fs-list-instance = "team"
Learn more ways to set up multiple instances and how it works
3

Add these required attributes to the elements

List

Defines the Collection List that will be sorted
fs-list-element
=
"
list
"

Apply this attribute to the Collection List to which you want to add the sorting feature.

Once this solution is fully implemented and the page is published, visitors will be able to dynamically sort the items of this Collection List.

Add this attribute:
Name
fs-list-element
Copy
Value
list
Copy
Add it to those type(s) of element(s):
Collection List
NOTE

In case you want to use non-CMS content, replicate the CMS structure using div blocks as follows:

Learn everything about using a non-CMS list with the List Solutions on How to use List Solutions on static lists.

Field Identifier

Define the sorting choices in the CMS Item
fs-list-field
=
"
IDENTIFIER
"

Add the fs-list-field attribute to one or several elements within the Collection Item of your List.

The content of those elements will represent the terms the list will be sorted on, e.g., a text, a price, a date.

Give each field a different IDENTIFIER.

Add this attribute:
Name
fs-list-field
Copy
Value
IDENTIFIER
Copy
Define your own value instead of IDENTIFIER.

Example:
fs-list-field = "name"
fs-list-field = "date"
fs-list-field = "price"
Add it to those type(s) of element(s):
Text Block
Paragraph
Heading
Text Link
IMPORTANT

To sort content by date or number, you must include the Type attribute, which is available under the ‘Add more settings’ section below.

NOTE

If you are also using List Filter on this Collection List, the fs-list-field attribute that you've defined for the filters will also work with your Sort Trigger — as you can't define twice the same attribute on a single element anyway.

Button Trigger

Defines a button as a sorting trigger toggle
fs-list-element
=
"
sort-trigger
"
fs-list-field
=
"
IDENTIFIER
"

Designate a Button, Text Link, or Link Block as a sorting trigger that toggles between ascending and descending sort order.

This trigger must include the attribute fs-list-field="IDENTIFIER" to specify the Field Identifier it sorts by.

Add this attribute:
Name
fs-list-element
Copy
Value
sort-trigger
Copy
Add this attribute:
Name
fs-list-field
Copy
Value
IDENTIFIER
Copy
Examples:
fs-list-field = "date"
fs-list-field = "name"
fs-list-field = "price"
Add it to those type(s) of element(s):
Button
Text Link
Link Block
NOTE

By default, the first click will sort content in ascending order, and the second click will sort in descending order. To reverse this order, use the 'Reverse' option in the 'Add more settings' section.

NOTE

To style the ascending and descending states, apply and style the combo classes is-list-asc and is-list-desc to the default button, respectively:

  1. First add the class is-list-asc as a combo class to the button element, and style its look for the ascending order state.
  2. Remove the is-list-asc combo class, replace it by is-list-desc and style the descending order state.
  3. Remove the is-list-desc combo class.

For example, you can use an arrow up image for the ascending active style, and an arrow down image for the descending style.

5

Publish your project! Done, easy right?

Check more elements and settings below
Optional

Add more

elements

Scroll Anchor

Specifies an element to scroll to after sorting the list.
fs-list-element
=
"
scroll-anchor
"

When content is sorted, the page automatically scrolls to this anchor element.

This enhances user experience, especially in sorting interfaces with many items. By anchoring the scroll to the top of the page, it ensures that users consistently start viewing from the top of the list.

It's typically set to a close parent element of the Collection List.

Add this attribute:
Name
fs-list-element
Copy
Value
scroll-anchor
Copy
Add it to those type(s) of element(s):
Div Block
Optional

Add more

settings

Reverse

Reverse the sequence of the sort trigger toggle
fs-list-reverse
=
"
true
"

Enable the Reverse option to make the first click on the sorting trigger apply descending order, instead of the default ascending.

This is helpful for lists that are automatically sorted in ascending order by default with Webflow's native sorting options.

Add this attribute:
Name
fs-list-reverse
Copy
Value
true
Copy
Default value:
fs-list-reverse = "false"
Add it to any element with
fs-list-element = "sort-trigger"

Ascending Active State Class

Style the trigger for its ascending active state
fs-list-ascclass
=
"
CLASS_NAME
"

Optionally, assign a class to the button element when the list is sorted in ascending order.

Specify a class name for this attribute.

To style the active class of your trigger element, add this class as a combo class to it, and style it for its active state. Remove the combo class after use.

Add this attribute:
Name
fs-list-ascclass
Copy
Value
CLASS_NAME
Copy
Example:
fs-list-ascclass = "is-asc"
Default value:
fs-list-ascclass = "is-list-asc"
Add it to any element with
fs-list-element = "sort-trigger"

Descending Active State Class

Style the trigger for its descending active state
fs-list-descclass
=
"
CLASS_NAME
"

Optionally, assign a class to the button element when the list is sorted in descending order.

Specify a class name for this attribute.

To style the active class of your trigger element, add this class as a combo class to it, and style it for its active state. Remove the combo class after use.

Add this attribute:
Name
fs-list-descclass
Copy
Value
CLASS_NAME
Copy
Example:
fs-list-ascclass = "is-desc"
Default value:
fs-list-ascclass = "is-list-desc"
Add it to any element with
fs-list-element = "sort-trigger"

Type

Enable sorting by date or numerical value
fs-list-type
=
"
VALUE
"
Values allowed
Date
Number

Enables sorting by date format.

Compatible with the following date formats:

  • July 4, 2021
  • July 4, 2021 13:30
  • 07/04/2021
  • 07/04/2021 13:30
  • December 2021
Add this attribute:
Name
fs-list-type
Copy
Value
date
Copy
Add it to any element with
fs-list-field = "IDENTIFIER"

Enables sorting by number.

By default, List Sort processes all fields as alphanumeric strings. Use this attribute to specify a numeric field that may include decimals or negative values such as:

  • 25.89
  • -13
  • -2.68
  • 100.50
Add this attribute:
Name
fs-list-type
Copy
Value
number
Copy
Add it to any element with
fs-list-field = "IDENTIFIER"

Animate the List

Define CSS animations on the List when sorting is triggered
fs-list-sortingclass
=
"
CLASS_NAME
"

List animations are fully controlled through CSS.

When a list is filtered—or sorted, or paginated—temporary classes are applied to the Collection List Wrapper to trigger transitions or animations, and then removed once the action completes.

This system supports per-action animation, per-item staggering, and precise control via CSS.

  • During a sort action, the .is-list-sorting class is added to the Collection List Wrapper. It is removed once the action completes.
  • fs-list detects any CSS transitions triggered by the class and waits for them to finish before updating the list.
  • The class can be renamed using the attribute fs-list-sortingclass.
Add this attribute:
Name
fs-list-sortingclass
Copy
Value
CLASS_NAME
Copy
Default:
fs-list-sortingclass = "is-list-sorting"
Example:
fs-list-sortingclass = "my-sorting-class"
Add it to this type of element
Collection List Wrapper
script icon
Script tag
?
NOTE

Please refer to the List Sort and List Load documentation pages for animating the List when it's sorted or loaded.

Multiple instances of this Solution on the same page

Most Attributes Solutions can work several times at once on a page.

Some do this automatically, but this Solution needs special settings with the -instance custom attributes.

Learn how to set up instances, the same method is used for any Solution that needs specific settings to run more than once on a page.

Learn how to use instances
3

Add these required attributes to the elements

List

Defines the Collection List that will be sorted
fs-list-element
=
"
list
"

Apply this attribute to the Collection List to which you want to add the sorting feature.

Once this solution is fully implemented and the page is published, visitors will be able to dynamically sort the items of this Collection List.

Add this attribute:
Name
fs-list-element
Copy
Value
list
Copy
Add it to those type(s) of element(s):
Collection List
NOTE

In case you want to use non-CMS content, replicate the CMS structure using div blocks as follows:

Learn everything about using a non-CMS list with the List Solutions on How to use List Solutions on static lists.

Field Identifier

Define the sorting choices in the CMS Item
fs-list-field
=
"
IDENTIFIER
"

Add the fs-list-field attribute to one or several elements within the Collection Item of your List.

The content of those elements will represent the terms the list will be sorted on, e.g., a text, a price, a date.

Give each field a different IDENTIFIER.

Add this attribute:
Name
fs-list-field
Copy
Value
IDENTIFIER
Copy
Define your own value instead of IDENTIFIER.

Example:
fs-list-field = "name"
fs-list-field = "date"
fs-list-field = "price"
Add it to those type(s) of element(s):
Text Block
Paragraph
Heading
Text Link
IMPORTANT

To sort content by date or number, you must include the Type attribute, which is available under the ‘Add more settings’ section below.

NOTE

If you are also using List Filter on this Collection List, the fs-list-field attribute that you've defined for the filters will also work with your Sort Trigger — as you can't define twice the same attribute on a single element anyway.

Dropdown Trigger

Defines a Dropdown element as the sorting trigger
fs-list-element
=
"
sort-trigger
"

This attribute defines a Dropdown element as the sorting trigger. The sorting choices are presented within the Dropdown Menu.

Here's how to set it up:

  1. Create a Dropdown element on your page and apply this attribute to it.
  2. Access the Dropdown Menu from the Settings panel and adjust the links inside — refer to the following two steps.
Add this attribute:
Name
fs-list-element
Copy
Value
sort-trigger
Copy
Add it to those type(s) of element(s):
Dropdown

Ascending Identifier

Defines the dropdown link that will sort in ascending order
fs-list-field
=
"
IDENTIFIER-asc
"

The IDENTIFIER value of this attribute connects each sorting to the corresponding field in the Collection List Item. Add as many links to the Dropdown Menu element as there are defined Field Identifiers.

For each Link Block of te Dropdown Menu, carefully define the text and the attribute:

  1. Ensure the text on each link accurately represents the sorting option and its order. E.g.; "Name (A-Z)" or "Price (Low to high)"
  2. Attach this ascending field IDENTIFIER attribute to each link, and align these identifiers with those you established earlier, and append the IDENTIFIER with the suffix -asc. E.g.; date-asc or name-asc.
Add this attribute:
Name
fs-list-field
Copy
Value
IDENTIFIER-asc
Copy
Examples:
fs-list-field = "date-asc"
fs-list-field = "name-asc"
fs-list-field = "price-asc"
Add it to those type(s) of element(s):
Text Link
Link Block

Descending Identifier

Defines the dropdown link that will sort in descending order
fs-list-field
=
"
IDENTIFIER-desc
"

The IDENTIFIER value of this attribute connects each sorting to the corresponding field in the Collection List Item. Add as many links to the Dropdown Menu element as there are defined Field Identifiers.

For each Link Block of te Dropdown Menu, carefully define the text and the attribute:

  1. Ensure the text on each link accurately represents the sorting option and its order. E.g.; "Name (Z-A)" or "Price (High to low)"
  2. Attach this descending field IDENTIFIER attribute to each link: align these identifiers with those you established earlier, and append the IDENTIFIER with the suffix -desc. E.g.; date-desc or name-desc.
Add this attribute:
Name
fs-list-field
Copy
Value
IDENTIFIER-desc
Copy
Examples:
fs-list-field = "date-desc"
fs-list-field = "name-desc"
fs-list-field = "price-desc"
Add it to those type(s) of element(s):
Text Link
Link Block
4

Publish your project! Done, easy right?

Check more elements and settings below
Optional

Add more

elements

Dropdown Label

Display the current sorting option in the Dropdown element
fs-list-element
=
"
dropdown-label
"

Modify the text within the Dropdown Toggle to dynamically reflect the current active sorting option.

For instance, if a user selects "Name (A-Z)" from the Dropdown Menu, the label element in the Dropdown set with this attribute should automatically update to show "Name (A-Z)".

Add this attribute:
Name
fs-list-element
Copy
Value
dropdown-label
Copy
Add it to those type(s) of element(s):
Text Block

Scroll Anchor

Specifies an element to scroll to after sorting the list.
fs-list-element
=
"
scroll-anchor
"

When content is sorted, the page automatically scrolls to this anchor element.

This enhances user experience, especially in sorting interfaces with many items. By anchoring the scroll to the top of the page, it ensures that users consistently start viewing from the top of the list.

It's typically set to a close parent element of the Collection List.

Add this attribute:
Name
fs-list-element
Copy
Value
scroll-anchor
Copy
Add it to those type(s) of element(s):
Div Block
Optional

Add more

settings

Type

Enable sorting by date or numerical value
fs-list-type
=
"
VALUE
"
Values allowed
Date
Number

Enables sorting by date format.

Compatible with the following date formats:

  • July 4, 2021
  • July 4, 2021 13:30
  • 07/04/2021
  • 07/04/2021 13:30
  • December 2021
Add this attribute:
Name
fs-list-type
Copy
Value
date
Copy
Add it to any element with
fs-list-field = "IDENTIFIER"

Enables sorting by number.

By default, List Sort processes all fields as alphanumeric strings. Use this attribute to specify a numeric field that may include decimals or negative values such as:

  • 25.89
  • -13
  • -2.68
  • 100.50
Add this attribute:
Name
fs-list-type
Copy
Value
number
Copy
Add it to any element with
fs-list-field = "IDENTIFIER"

Animate the List

Define CSS animations on the List when sorting is triggered
fs-list-sortingclass
=
"
CLASS_NAME
"

List animations are fully controlled through CSS.

When a list is filtered—or sorted, or paginated—temporary classes are applied to the Collection List Wrapper to trigger transitions or animations, and then removed once the action completes.

This system supports per-action animation, per-item staggering, and precise control via CSS.

  • During a sort action, the .is-list-sorting class is added to the Collection List Wrapper. It is removed once the action completes.
  • fs-list detects any CSS transitions triggered by the class and waits for them to finish before updating the list.
  • The class can be renamed using the attribute fs-list-sortingclass.
Add this attribute:
Name
fs-list-sortingclass
Copy
Value
CLASS_NAME
Copy
Default:
fs-list-sortingclass = "is-list-sorting"
Example:
fs-list-sortingclass = "my-sorting-class"
Add it to this type of element
Collection List Wrapper
script icon
Script tag
?
NOTE

Please refer to the List Sort and List Load documentation pages for animating the List when it's sorted or loaded.

Multiple instances of this Solution on the same page

Most Attributes Solutions can work several times at once on a page.

Some do this automatically, but this Solution needs special settings with the -instance custom attributes.

Learn how to set up instances, the same method is used for any Solution that needs specific settings to run more than once on a page.

Learn how to use instances

Still need help?

Get Support