How to Create a Searchable, Filterable Directory in Squarespace

The first step in creating your Squarespace directory is to define what information you want to display for each listing. EmbedDirectory makes this process intuitive with both built-in and custom fields.

How to Configure Fields:

1. Log in to your EmbedDirectory dashboard
2. Navigate to Set Up Listing Fields
3. Click "Add Field"
4. Choose from the available field types to structure your listings:
   • Text fields for names, titles, or short descriptions
   • Images for logos, product photos, or member portraits
   • Links for websites, social media profiles, or resource downloads
   • Buttons for clear calls-to-action
   • Tags/Categories for filtering content by type
   • Contact information like phone numbers or email addresses
   • Location data for address-based directories or map-based listings

Take time to consider what information your visitors will want to search and filter by. For example, if you're creating a staff directory, you might include fields for department, title, and skills. For a resource library, consider tags for content type, topic, and audience.

Now that your fields are configured, let's add entries to your directory:

Option 1: Add Listings Manually

1. Go to Manage Listings in your dashboard
2. Click "Add New Listing"
3. Fill in the information for each field you created
4. Save the listing
5. Repeat for each entry

Option 2: Import Listings in Bulk

1. Go to Import Listings
2. Prepare a CSV file with your data (make sure column headers match your field names)
3. Upload your CSV file
4. Map your CSV columns to the directory fields
5. Review the preview to ensure everything looks correct
6. Run the import

Whether you're creating a searchable product table, a filterable member roster, or a comprehensive resource library, having complete and consistent information for each entry will make your directory more functional and user-friendly.

Now it's time to customize how your directory looks and works on your Squarespace site.

Layout & Design Settings

1. Go to Widget Settings in your dashboard
2. Choose your preferred layout (grid, list, or custom)
3. Match colors to your Squarespace site's branding:
   • Set your brand color
   • Adjust background, button, and link colors for visual consistency
4. Adjust typography and spacing to align with your site's style
5. Fine-tune border radius and other styling details
6. Save your changes and refresh your Squarespace page to preview updates

Search & Filter Options

Make your directory easy to browse with interactive search and filter tools:

1. Add search bars for keyword-based searching
   • Choose which fields are searchable
   • Set custom placeholder text
2. Add dropdown filters for browsing by category
   • Link filters to tag fields or categorized data
   • Choose between multi-select or single-select filters
3. Add toggle filters for yes/no criteria
   • Useful for availability, features, or other boolean attributes
4. Set up sorting options
   • Let users sort by name, date, location, or other key fields

These features turn your directory into an interactive, user-friendly tool for your Squarespace visitors.

If your directory involves locations, adding map functionality can significantly enhance the user experience on your Squarespace site.

1. Go to Map Settings in your dashboard
2. Enable map features
3. Sign up for a free Mapbox account to power your map (required)
4. Add your Mapbox access token to the settings
5. Customize your map's appearance:
   • Choose from different map styles (street, light, dark)
   • Set marker colors to match your branding
   • Configure clustering options for areas with many listings
6. Set the map position in your layout (top, left, or right)
7. Choose whether the map should be visible by default

A map interface is perfect for creating location-based directories like local business finders, service provider maps, or neighborhood guides. Visitors can visually browse locations and click for more details.

Now it's time to add your interactive directory to your Squarespace website using a Code Block.

1. Log in to your Squarespace account
2. Navigate to the page where you want to add your directory
3. Click the + icon to add a new block
4. Search for and select Code in the menu
5. Copy your directory's embed code from the Embed section of your EmbedDirectory dashboard
6. Paste the code into the Squarespace Code Block
7. Click Apply to save the code
8. Click Save to update your page

Squarespace's Code Block feature makes it easy to add advanced functionality like interactive directories, searchable lists, or filterable content collections to your website without requiring technical expertise. Your directory will be fully responsive and work seamlessly on mobile devices.

Want to let visitors suggest listings for your directory? You can do that with the Submissions feature.

1. Go to Submissions Settings in your dashboard
2. Enable submissions and customize the form
3. Choose which fields submitters should complete
4. Configure notification emails for new submissions
5. All submissions will require admin approval before going live
6. Copy the submission form embed code
7. Add it to a separate Squarespace page using a Code Block

This is ideal for community directories, business listings, or resource collections where you'd like to crowdsource content but keep full control over what gets published.