Separate CMS Items with a Comma

How to Display CMS Items with Custom Separators in Webflow

Webflow is an incredibly versatile platform for creating dynamic websites, and one of its standout features is its CMS (Content Management System). A common challenge when working with CMS collections is how to display items separated by a specific symbol, such as a comma, without the separator appearing after the last item. This guide will walk you through the process of achieving this, step by step, while keeping your design clean and professional.

Why Use Custom Separators?

Custom separators improve readability and aesthetics, especially when listing items like tags, categories, or attributes. However, ending a list with a separator (e.g., a trailing comma) can look unpolished. By learning how to manage separators effectively in Webflow, you’ll elevate the quality of your website’s design and user experience.

Step-by-Step Guide to Adding Custom Separators

1. Set Up Your CMS Collections

In Webflow, create your CMS collections. For this tutorial, we’ll use two collections:

• Types: Contains categories like “Vegetable” and “Fruit.”
• Items: Contains individual entries like “Fresh Apple” or “Sweet Peach,” each tagged with a type from the first collection.

2. Add a Collection List to Your Page

Go to the Webflow Designer and add a collection list to your page. For this example, we’ll display only the items tagged as “Fruit.”

• Select the collection list and connect it to your “Items” CMS.
• Apply a filter to show only items where the type is “Fruit.”

3. Display Item Names

Within the collection list, add a text element and connect it to the item name field in your CMS. This will display the names of all the items in the filtered collection.

4. Style the Collection List

To ensure the items are displayed inline:

• Apply a class to the collection list (e.g., .cms-list).
• Set the layout to Flex and choose the horizontal direction.
• Enable the Wrap option to prevent text overflow on smaller screens.
• Add spacing between items using the Gap property (e.g., 12px).

5. Add a Separator

Here’s where the magic happens:

• Use Webflow’s custom code feature to insert the code from above
• The code will automatically add a separator (e.g., a comma) after each item except the last one.

6. Test Your Design

Preview your page to ensure everything looks as intended. The items should appear in a clean, comma-separated list, with no trailing comma after the final item.

Bonus Tips for Advanced Customization

• Responsive Design: Adjust the Flex settings and spacing to ensure the layout adapts gracefully to different screen sizes.
• Styling Separators: Use CSS to style the separators, such as changing their color or adding spacing.
• Dynamic Filtering: Combine this technique with Webflow’s filtering options to create more interactive lists.

Final Thoughts

By implementing this technique, you’ll not only enhance your Webflow site’s design but also improve its usability and professionalism. Custom separators might seem like a small detail, but they can make a big difference in how users perceive your website.

Ready to take your Webflow projects to the next level? Follow this guide and start creating polished, dynamic CMS lists today!