How to Inject Static Content into a Webflow CMS Collection with Finsweet

In this tutorial, Sandro, cofounder of Gemeos Webflow agency, shows you how to inject static content into a Webflow CMS collection with Finsweet CMS Static.

Understanding the CMS Static use case

CMS Static lets you insert static elements (banners, CTAs, special cards) into a Collection List at specific positions. Example: add a “Download the guide” banner after the 3rd article in a blog list, or place a “Contact us” card in the last position of a catalog.

1. Add the script to the head

<script src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmsstatic@1/cmsstatic.js" defer>script>

2. Set up your Collection List

On your Collection List Wrapper, add fs-cmsstatic-element="list".

3. Create your static element

Create a Div with the design of your choice (CTA, banner, promotional card). Add the fs-cmsstatic-element="item" attribute to it. Place this element inside your Collection List Wrapper, outside the dynamic template.

4. Define the injection position

On your static element, add fs-cmsstatic-position="[valeur]". Available values: first (first), last (last), or a number for a specific position (3 for after the 3rd item). You can have multiple static elements at different positions.

Conclusion

CMS Static saves you from building complex workarounds to insert non-CMS content into your lists. Use cases:

• “See all articles” CTA at the end of a blog list
• Promotional banner inserted after the 3rd product in a catalog
• “Contact an expert” card in a resource list