← Back to Documentation Overview | Search these pages with the button in the top right

<aside> 💡 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 or not.

Custom Pins

</aside>

Create different pin types for different categories using category pins

Youtube tutorial on how to create category pins.

https://www.youtube.com/watch?v=NQ3GcxhKzpU&t=1026s

Create custom pins with option field

Create Option Field

Create an option or a reference field

Create Filter

1. Create new category filter
2. Press “Save” in Dynamic Map App

<aside> 💡 Pro Tip You can hide created filters in Webflow if they’re not needed using display none or hide element from Webflow’s settings.

</aside>

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:

1. ncf
2. option_field_name
3. 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

<aside> 💡 Pro Tip You can see the exact name of the “option_field_name” in the list item code embed

</aside>

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

<aside> ⚠️ 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.

</aside>

<aside> 👉 Questions? We're excited to [email protected]

</aside>