Squarespace Templates: How to Choose the Best Template [2018]

 
 squarespace-background-video-bento-sites

Templates are the foundation of Squarespace. They’re crafted by the company's award-winning design team and employ the latest techniques in HTML, CSS, JavaScript, JsonT and JSON for modern browsers and mobile-friendly devices.

Each template belongs to a template family that shares the same underlying structure, style options and features, but is styled differently to highlight a template's versatility.

As of 2018, Squarespace has 21 template families and 100 templates in those families. Knowing how to choose 1 ideal template out of 99 others can be difficult.

In this post, I'm going to share how to choose the best Squarespace template for your website.

Step 1. Get Ready

 squarespace-template-questions

Since there are specific features and functionality built into each template that can't be changed, knowing what you want before browsing the template page is essential. Otherwise, you'd be previewing, installing and switching templates –– and growing frustrated by either too many choices or too many limitations. Let's begin with some starter questions.

Starter Questions

  • What’s the purpose of your site (e.g. business, blog, portfolio)?

  • Do you want to focus on information, photography or eCommerce?

  • What template features do you need (e.g. index, parallax, sidebar, fixed navigation)?

  • Do you want to focus on images (e.g. banners) or text (e.g. blog)?

  • Do you have any example sites for inspiration?

Pro Tip
Choosing the right template is one of the most important design decisions, so take time to answer the starter questions before moving on to the next step.

Step 2. Browse Template Categories

 browse-template-categories

Go to the Squarespace template page. Browse and filter templates by categories and sort them by featured, latest and most popular (see image). Choose 2 to 5 templates and add them to a list of favorites by clicking the heart icon.

Don't choose a template because of the business or person featured on the template. Instead, evaluate and choose a template based on its features and functionality. For example, you don’t have to be a restaurant to choose the Pacific template, but the Pacific template might be the best choice for a brand that needs long scrolling pages with background images and full-width galleries.

Template Categories

  1. Popular Designs

  2. Online Stores

  3. Art & Design

  4. Community & Non-Profit

  5. Creative Services

  6. Entertainment & Media

  7. Fashion & Beauty

  8. Food & Drink

  9. Health & Fitness

  10. Home & Living

  11. Music

  12. Photography

  13. Professional Services

  14. Travel & Lifestyle

  15. Wedding

Pro Tip
Each template has its own style options, default settings and demo content, but every template shares some common features and is able to sell products. Online Stores have an expanded feature-set like Quick View and Image Zoom.

Step 3. View Template Previews

 view-template-previews

Click "My Favorites" in the sidebar of the preview page. Then, hover over the templates that you added to your list of favorites and click "Preview Bedford" (or another template's name). The template preview page will then pop-up.

Template previews are embedded on the page and are clickable and scrollable (see image).



Step 4. View Alternative Previews

 reponsive-template-design

Click the desktop (default), tablet and mobile icons in the upper left corner of the preview page for alternative previews (see image).

Every Squarespace template uses responsive design, meaning that all of the content on your site will resize to fit different devices and screens. Whether a visitor uses a desktop, tablet or mobile device, the template will resize accordingly.

Step 5. Visit Live Previews

 template-demo-sites

Visit a template's Live Preview by clicking "View Template Demo” on the preview page. This opens a new tab in the browser that showcases the template's features and functionality with demo content (see image).

Study the Live Preview. Is it what you're looking for? Does it meet all or most of your needs? If not, continue previewing other demos and visiting more Live Previews until you have narrowed your search to 1 to 3 templates.

Template families listed below do not include discontinued templates.

Live Preview Demos

Adirondack Family
Adirondack

Avenue Family
Avenue

Aviator Family
Aubrey, Aviator

Bedford Family
Anya, Bedford, Bryant, Hayden

Brine Family
Aria, Basil, Blend, Brine, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West

Farro Family
Farro, Haute

Five Family
Five

Flatiron Family
Flatiron

Forte Family
Forte

Galapagos Family
Galapagos

Ishimoto Family
Ishimoto

Momentum Family
Momentum

Montauk Family
Julia, Kent, Montauk, Om

Native Family
Native

Pacific Family
Charlotte, Fulton, Horizon, Naomi, Pacific

Skye Family
Foundry, Indigo, Ready, Skye, Tudor

Supply Family
Supply

Tremont Family
Camino, Carson, Henson, Tremont

Wells Family
Wells

Wexley Family
Wexley

York Family
Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, York

Pro Tip
Many templates include a "Read Me" page that outlines a template's features. If available, read this page when visiting the Live Preview.

Step 6. View Squarespace Customer Sites

 squarespace-customer-sites

View a curated collection of Squarespace customer sites that display the possibilities of the templates and the power of the Squarespace platform.

Do any of these sites inspire you? Are they using a template that you've favorited? Do you like any particular features they're using? If so, study the site to learn how they’ve customized the template.

Squarespace Customer Sites

Pro Tip
To view live customer sites (not previews) on macOS, right click on "View Customer" > Click Open Link in New Tab.

Step 7. Use Template Comparison Charts

squarespace-template-comparison-charts.jpg

Use the Template Comparison Charts to compare multiple template features and functionality, side-by-side. Narrow your search to 1 or 2 choices.

Pro Tip
Bookmark the Template Comparison Charts, so you can easily refer to them in the future.

8. Read Template Guides

 squaresapce-template-guide

The Template Guides are grouped by family and include valuable information to understand a template's capabilities. Most template guides are about 5 pages, but the largest template family, Brine, includes 9 pages.

Read the Template Family Guides to learn all about the features and functionality for the 1 or 2 templates that you've chosen.

Since each template family also shares the name of one of the templates (e.g. Bedford Template Family, Bedford Template), this can be confusing. That’s why I’ve included links to each template family guide and a list of templates in those families below.

Template families listed below do not include discontinued templates.

Template Family Guides

Adirondack Family Guide
Adirondack

Avenue Family Guide
Avenue

Aviator Family Guide
Aubrey, Aviator

Bedford Family Guide
Anya, Bedford, Bryant, Hayden

Brine Family Guide
Aria, Basil, Blend, Brine, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West

Farro Family Guide
Farro, Haute

Five Family Guide
Five

Flatiron Family Guide
Flatiron

Forte Family Guide
Forte

Galapagos Family
Galapagos

Ishimoto Family Guide
Ishimoto

Momentum Family Guide
Momentum

Montauk Family Guide
Julia, Kent, Montauk, Om

Native Family Guide
Native

Pacific Family Guide
Charlotte, Fulton, Horizon, Naomi, Pacific

Skye Family Guide
Foundry, Indigo, Ready, Skye, Tudor

Supply Family Guide
Supply

Tremont Family Guide
Camino, Carson, Henson, Tremont

Wells Family Guide
Wells

Wexley Family Guide
Wexley

York Family Guide
Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, York

Pro Tip
Bookmark your favorite template family guides, so you can easily refer to them when designing your site.

Step 9. Install and Preview Templates

 install-and-preview-template

With Squarespace, you can install, preview and design multiple templates without affecting the live website. This can be useful if you're previewing templates or planning a website redesign.

Install a Template

To install a template for new websites, visit the Squarespace template page (see image) and click "Start with Bedford" (or another template's name).

If you already have a Squarespace account, go to the back end of Squarespace by clicking the Home panel > Design > Template > Install New Template > Pick a template to install > Hover over the template > Click Preview.

To uninstall a template, hover over a template > Click Uninstall > Confirm.

Switch Templates

To switch templates, go to the back end of Squarespace by clicking the Home panel > Design > Template > Hover over the template you've previously installed > Click Preview.

Set as Live Preview

Once you've chosen the best template, click "Set as Live Preview."

Pro Tip
Style Editor changes, custom CSS and the navigation link order is template-specific. Visit the Squarespace page on switching templates to learn more about what to expect when switching templates.

Step 10. Customize Your Template

 start-designing-your-website

Now that you've chosen a template, you're ready to start customizing it with your own content, structure and branding.

First, review how the Demo Pages and content communicate the capabilities of the template.

Next, delete the Demo Pages by hovering over them in the Pages panel > click the trash icon > Confirm. Keep the "Read Me" page (if applicable) until you're able to fully grasp the template's capabilities.

Deleted Demo Pages remain in the trash for 30 days before they’re automatically removed by the system. To restore a deleted Demo Page, scroll to the bottom of the Pages panel > Click Deleted Pages > Hover over a Demo Page > Click Restore.

Pro Tip
For advanced customization, use the CSS EditorCode InjectionCode Block and Markdown Block.

Wrap Up

You just learned how to choose the best Squarespace template for your website in 2018. Choosing the right template is one of the most important design decisions you'll make, so follow the steps outlined in this post.

Now, go master your website.

Squarespace Templates: How to Choose the Best Template [2018] first appeared on the Bento Sites Blog by Jeff Shibasaki.