How to Create a Searchable, Filterable Directory in Squarespace

Squarespace doesn't include built-in directory features. Here's how to add a searchable, filterable directory to your Squarespace site in minutes.

Before You Start

You'll need an EmbedDirectory account to create and embed a searchable directory on your Squarespace site. No coding required — just copy-paste.

Start 7-Day Free Trial See Examples

Try free for 7 days. No coding required.

Step 1: Set Up Your Directory Fields

Start by defining what information each listing should display. EmbedDirectory includes built-in fields (name, description, address) and lets you add custom fields for anything else.

How to Configure Fields:

1. Log in to your EmbedDirectory dashboard
2. Navigate to 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

Think about what visitors will search and filter by. A staff directory might need department, title, and skills. A resource library benefits from tags for content type, topic, and audience.

Step 2: Add Your Listings

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

Option 1: Add Listings Manually

1. Go to Manage Listings
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

Complete and consistent information across listings makes your directory more useful and easier to browse.

Step 3: Configure Your Directory Design & Functionality

Customize how your directory looks and behaves on your Squarespace site.

Layout & Design Settings

1. Go to Widget Settings
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.

Step 4: Add Map Features (Optional)

If your directory involves locations, adding a map makes it much easier for visitors to browse and find listings.

1. Go to Map Settings
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

Visitors can visually browse locations and click markers for details - great for business finders, service provider maps, or neighborhood guides.

Step 5: Add to Your Squarespace Website

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

Your directory will be fully responsive and work seamlessly on mobile devices.

Step 6: Enable User Submissions (Optional)

Want to let visitors suggest listings for your directory? Connect a form builder integration — choose from JotForm, Typeform, or Tally.

Incoming submissions appear in Submissions, where you can review and approve them before publishing.

Useful for community directories, business listings, or resource collections where you want to crowdsource content but keep control over what gets published.