How to create a directory with Listable

Creating a site

Creation

• Browse to Sites > Create in the sidebar
• You'll be prompted to enter a name, select a type and select a card template. Please note, the 'directory' type is the only one available at the moment. The others are in the roadmap.
• You can toggle through the card templates using the buttons at the top or bottom. You will be able to change these again later if needs be.

Notes

• Upon creation, you'll be redirected to the edit page. The site won't be available until the server configures. Until complete, an indicator will show on the top left hand side. Once complete, it will be replaced with a link icon that you can use to open your site.
• Pick a good name - unless you're using your own domain a formatted version of the name provided will be used in your URL. For example, a site called 'Test Directory' would be assigned the URL 'https://test-directory.listable.directory'

Add/manage custom fields

Adding custom fields

• Browse to Sites > List in the sidebar and select your site.
• Select Custom fields from the top menu & hit Add field to begin.
• Enter the details and hit Create field

Notes

• Enable Make field filterable in sidebar if users need to filter against the field. Once enabled, a filter will be added to the sidebar. Not all field types are supported.
• You can also delete fields from this area. This may result in data loss so proceed with care.
• Once added, you'll be able to populate custom fields via the main list page or via imports. This is discussed further below.

Add/manage listings

There are two ways to add listings, both of which are covered in the video:

Import (CSV or JSON)

• Browse to Sites > List in the sidebar and select your site.
• Hit the Import button which can be found on the top right-hand side
• This opens a multi-step window allowing you to import data.
• The first step allows you to upload your file. If you get an validation errors, please check your file and try again.
• The second step, lists our fields on the left and yours on the right (in select fields). Here you can tell the import which of your fields should be used to populate ours. This is known as mapping. At the bottom of the screen you'll see a basic preview, giving you an idea how the cards will look.
• The third step allows you to import tags. If your file has tags, then select Use my data, at which point you'll be asked to select a field. If not, then select No tags.
• The fourth step allows you to manage conflicts when running multiple/subsequent imports. You can choose to duplicate, update or ignore listings. Please note, you must provide the reference field for detection to work. Without it, all rows will be considered new/unique.

Notes

• It's not yet possible to import Categories. That's coming very soon.
• The preview is there as a rough guide only.
• If you're looking to update existing items with an import, you don't need to import everything. Only the fields selected will change.
• Upon completion, you'll notice a pop-up that the job was queued. After a couple of minutes, refresh the page and your items will be listed. If not, you can check the status of the import using the history button to the right of the import button.

Manually add listings

• To manually add a listing, hit the + button on the bottom right-hand side.
• You'll be presented with a slide-out window into which you can add your data.
• Custom fields, if you've created any, are held in a separate tab which you can access at the top of the window.

Edit listings

• You can edit each item from thi main page. Simply click the field you wish to edit
• Certain fields like text fields, can be edited inline. Others, when clicked, will open in a pop-up window.

Delete listings

• At the end of each row you'll see 3 vertically stacked dots. Click that to open the menu
• Along with a preview, you'll be presented with a delete button you can use to remove listings.
• You can also deactivate listings by clicking the green dot at the start of the row. Once deactivated, they'll no longer show on your website.

Add/manage categories

Adding categories & tagging listings

• Browse to Sites > List in the sidebar, select your site and hit Categories in the top-menu to begin.
• The first step is to add a root category. You can add as many of these as you need
• Once added you can add children to those root categories via the + button
• Categories can be infinitely nested, though we recommend sticking to a few levels where possible.
• Hit Save when you're done and return to your site from the breadcrumbs at the top of the page
• You can now tag your items against your categories using the Categories column

Notes

• You can't tag categories against categories with children. Instead, they essentially act like groups

Basic configuration

Miscellaneous settings

• One of the first things you should review after adding fields and listings is the Settings section. You'll find a link in the top menu.
• We recommend opening two windows when making changes here, as seen in the video. That way you can preview your changes as you go (you'll need to refresh the page after each change of course).
• From here you can customize the layout, add CTA buttons, add analytics scripts and configure global SEO.
• You can also enable a custom domain from this page once you're ready.

Notes

• Disabling full width search will replace the search bar the spans the entire screen with a smaller search bar. The replacement is either added to the hero (if you have one), or above the listings if not.
• Logos can either be text based, with an optional icon or you can provide an image yourself. Currently, it's only possible to provide an image as a URL. We'll be adding an upload field soon. If you need to upload a logo, please get in touch and we'll do that for you.
• A further note on logos: Enclosing text in [] will highlight it using the highlight colours from your theme.

Add a hero section

Adding a hero

• You can add a hero element via the Blocks section. You'll find a link in the top menu.
• Once open, hit the add block button to begin. You only need to add one block.
• We recommend opening two windows when making changes here - as seen in the video. That way you can preview your changes as you go (you'll need to refresh the page after each change of course).
• There are three types of hero, each with their own set of fields: color, gradient and image
• If you select image, you'll be asked to upload two images. One for desktop and one for mobile. Each of these should be sized differently. The mobile image should be square, something like 500x500. The desktop image should be landscape, something like 2000x500
• As with your logo, you can highlight parts of your Headline by enclosing text in square brackets e.g. [I'm highlighted]

Add other blocks

Adding a hero

• As with the hero, you can add other blocks via the Blocks section. You'll find a link in the top menu.
• At the top of the page you'll notice tabs that allow you to switch between the different block-enabled areas.

Notes

• At the time of writing there's only one block type available, Accordion. We'll be adding more soon

Customise theme

Choosing a theme

• You can customise your theme via the Theme section. You'll find a link in the top menu.
• At the time of writing, there are 3 pre-defined themes to choose from: Default, Pastel and Plum noir.
• You can also create your own theme via the Custom option. This involves selecting colours using color pickers as seen in the video.

Notes

• When customising your theme, considering having your site open in another window so you can see how changes look as you go.
• Once you've selected a colour once, you should see it in the palette at the bottom of the color picker pop-up so you dont have to find it each time.

Next steps

Once finished with the above, you should have a stylish, functional directory. To take it to the next level you have a few options:

• Create custom pages
• Set up a custom domain
• Enable monetization

We'll be adding guides for each of these in due course.