How to add an attribute:

close icon
Hey! Give us some feedback here.
No items found.
Step #1

Copy the Solution <script> and paste into the <head> of your page

copy icon
Copy Script
Step #2

Implement in Webflow

Apply attributes to elements on the page

Below is a list of elements and options that are used to create this Attributes functionality. Click any of them to see more details.

navigator arrow
LIST
I want to select my favorite items from this

Collection List or Collection List Wrapper

See how it works
see webflow attributes
Add this attribute
Description
Name
fs-favorite-element
copy icon
Value
list
copy icon
The CMS List that the user can select a favorite from.

Needs the CMS Item page link nested inside each item.
how to add cms sort list attribute
navigator arrow
Key
Items from this
select icon

Collection List

See how it works
see webflow attributes
to be shown in my favorite
select icon

Collection List

Add this attribute
Description
Name
fs-favorite-key
copy icon
Value
IDENTIFIER
copy icon
The IDENTIFIER creates an association between lists
Note: This logic is seen in solutions like CMS Nest and CMS Filter.

This attribute is added to two elements:

The element that triggers the “favorite” functionality. For example, a “heart button” nested in the list element

The Collection List that will show the items the user liked.
Needs the CMS Item page link nested inside each item
navigator arrow
Favorite Field
Add this identifier to all the dynamic content
div block icon

Elements

See how it works
see webflow attributes
Add this attribute
Description
Name
fs-favorite-field
copy icon
Value
IDENTIFIER
copy icon
Fields of content.

This attribute must be placed on all content fields of dynamic data in the Collection List of favorited items.

THIS MUST BE PLACED ON THE CMS TEMPLATE PAGE.

We must fetch this dynamic information from the Collection Template page. There will be a link to the dynamic content on the Template page.
navigator arrow
remove
I want to use this
button icon

Button

See how it works
see webflow attributes
to remove items from my favorite list
Add this attribute
Description
Name
fs-favorite-element
copy icon
Value
remove
copy icon
Placed on the “remove” or “delete” button that removes the item from the favorited list.
navigator arrow
Option
loader
I want to show a custom element while the list loads
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-favorite-element
copy icon
Value
loader
copy icon
Important: this element will be appended to the Collection List. It will always be the last item in the Collection List. The user can add this element to any location on the page. It will always be relocated to the Collection List

Working examples

See this solution working live in this Webflow project.

Example 1
CMS Sort using a select field
Walt Disney World
Orlando
/
United States
Walt Disney World
Walt Disney World

Is an entertainment resort complex in Bay Lake and Lake Buena Vista, Florida, United States.

October 25, 2021

Parque Güell
Barcelona
/
Spain
Parque Güell
Parque Güell

Parc Güell is a privatized park system composed of gardens and architectural elements.

October 18, 2021

Taj Mahal
Agra
/
India
Taj Mahal
Taj Mahal

The Taj Mahal is an ivory-white marble mausoleum on the right bank of the river Yamuna in the Indian city of Agra.

October 25, 2021

The Colosseum
Rome
/
Italy
The Colosseum
The Colosseum

The Colosseum is an oval amphitheater in the center of the city of Rome, Italy.

October 18, 2021

Sagrada Família
Barcelona
/
Spain
Sagrada Família
Sagrada Família

Is a large unfinished Roman Catholic minor basilica in the Eixample district of Barcelona.

October 18, 2021

The Grand Canyon
Arizona
/
United States
The Grand Canyon
The Grand Canyon

The Grand Canyon is a steep-sided canyon carved by the Colorado River in Arizona, United States.

October 25, 2021

Favorited Items

Capri Island
Capri
/
Italy
Capri Island

Capri is an island located in the Tyrrhenian Sea off the Sorrento Peninsula.

Capri Island
Remove
Close

Loading

Open Favorites
Copy and paste accessible CMS Sort components for your project
locked icon
Clone Accessible Components UI KIT
new

Frequently Asked Questions

Everything you need to know about this attributes solution.

No FAQ item found yet. Join Finsweet Support Forum if you have any question related to this solution.

Developer documentation

external link icon

Next time implement inside Webflow

external link icon
Subscribe

Sign up for future releases!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.