← Back to Documentation Overview
Create different pin types for different categories using category pins.
When to use Custom Pins instead of Category Pins
Pro Tip: Use custom pins if you want each pin to represent a different item.
Custom pins let you assign unique icons to individual items, regardless of whether they belong to a category (option field) or not → Custom Pins for individual items
Youtube Tutorial on Category Pins
How to create an Option Field
Create Option Field
Create an option or a reference field
Create Filter
-
Create new category filter
-
Press “Save” in Dynamic Map App
Optional: Hide Filters
Pro Tip You can hide created filters in Webflow if they’re not needed using display none or hide element from Webflow’s settings.
Duplicate pin
Duplicate Dynamic Map’s default pin in styleguide
Add category pin class
Add the category pin combo class to the new custom pin, consisting of:
-
ncf
-
option_field_name
-
option_field_value
in this example:
“ncf-category-pop_up”
Take option_field_name and option_field_value from your Collection List’s option field that you want to filter
Pro Tip: You can see the exact name of the “option_field_name” in the list item code embed
Style in Webflow
Start styling your category pin in Webflow
Add Hover and Active State
You can add “hover” and “active” as well to style different states like you would do in your default pin
Troubleshooting: Your category pins aren’t working properly
If you’ve renamed your category pins, make sure to still use the original naming from the Dynamic Map’s code embed.