Webflow Joe

F'in Sweet Webflow Hacks

Add dynamic code to a Dynamic Collection List

What can this be used for?

  • Adding dynamic code inserts outside of template pages
  • Adding dynamic code when your custom code doesn't fit in the Collection List structure

Step 1

Add a Switch field to the Collection called "Code Block". Every item except 1 in this collection will have this switch off. One will have the switch turned on. You can turn it on for any item in the collection, it does not matter which one it is and there is no significance to which one your choose. 

[screenshots of this ]

Step 2

Create a hidden Dynamic List on the page

There will be two Collection Lists on the page

  1. Visible and displays the Collection content
  2. Hidden and used to inject dynamic collection fields into the webpage

Inf your second Collection List, and add a embed box to the item. Set a conditional statement to the Dynamic Collection List and only make elements that have the "Code Block" switch set to ON. Nice! We have one item with that switch on. This how we're going to inject dynamic javascript to the Collection ONCE. If we didn't have that conditional statement, the code would repeat itself as many times as their are items. If you have 100 items in your collection, the code would be inserted on the page 100 times. This conditional statement makes sure there is only one script code being generated.

Lastly, apply a class to the outer parent of the Dynamic List. Set it to display : none on the page. This can be anywhere on the page.

Step 4

Add the code to the embed component

Add the code to the embed component in the hidden Dynamic Collection List. You can now choose dynamic fields in the CMS that can be used to customize/generate your javascript code.

Nice! Dynamic javascript inserts are possible outside of Templates!

[show screenshots of working example and code bubbles]

Interested in more f'in sweet Webflow hacks?

Get an alert when we post a new one.
We have 20 posts scheduled to send throughout the next 3 months.

Nice! We'll let you know when a new hack is available.
Something went wrong while submitting the form. Please email us directly at projects@finsweet.com

Want Finsweet to build your Webflow site?

We're Webflow Experts!