Note: While our most popular guides have been translated into Spanish, some guides are only available in English.
Galapagos template

Galapagos is a great template for building an online store with minimum fuss. With fewer style tweaks than other store templates, Galapagos's layout sets you up for success with a tried-and-true, elegant eCommerce design. Choose from several product layouts and special on-hover photo options to give your customers an interactive shopping experience.

This guide covers the features and design options for the Galapagos template. Site Styles tweaks are bold, and link to the list of all Galapagos tweaks to help you navigate the panel.

Tip: Galapagos's Live Preview page shows real customer sites using this template.

Supported pages

Supply supports these page types:

Header

Visitors use the header at the top to navigate your site. In Galapagos, the header is centered, with the Main Navigation at the top and the site title or logo and tag line stacked below.

Use Nav Style in Navigation to choose from six style options for the Main Navigation. 

  • The Box and Line tweaks follow the Nav Link Color.
  • For Full Background and Tag tweaks, the link color is automatically set to black or white based on the Nav Accent Color.

Folders open on hover.

  • Enable or disable the + symbol with Hide Folder Indicators in Navigation.
  • The menu background follows the site background color (Background Color in Site Wide).
  • The folder links follow the Nav Link Color.

galapagos-header.png

Background

Set the background color of your site with Background Color in Site Wide.

Check Tint Page Background in Site Wide to slightly darken the main content area of most pages. This helps pages stand out from the header. It's most noticeable over light, bright colors.

  • Tint Page Background is unchecked, the footer is tinted instead.
  • Product Pages and Gallery Pages don't show the background tint. The footer is always tinted on these pages.

galapagos-tint.png

Footer

The footer is split into left and right content areas, with Footer Navigation links below.

Customize either content area using blocks. The right footer area contains a Social Links Block by default.

  • In the content area, text links are underlined.
  • Footer Navigation links follow the Nav Link Color and Nav Link Font in Navigation.

Folders open on hover.

  • Enable or disable the + symbol with Hide Folder Indicators in Navigation.
  • The menu background follows the Nav Link Color.
  • Folder links follow the site background (Background Color in Site Wide).

galapagos-footer.png

Blog Pages

Galapagos Blog Pages display as a list of vertically-stacked posts.

Landing pages

  • Source URLs display below the post. All other metadata display above. 
  • To hide authors, check Hide Author in Blog.
  • Thumbnail images, tags, shares, and likes don't display.
  • Excerpts are text-only and display with a Continue link.

Posts

  • Likes, shares, author names, tags, and categories display below the post.
  • Navigation for previous and next posts displays below the comments.

Blog sidebar

A sidebar displays to the right of landing pages and posts. Customize it with blocks.

  • The sidebar scrolls up with the page.
  • If you have multiple blogs on your site, the same sidebar displays on all of them.
  • Hide or show it with Enable Blog Sidebar in Blog.
  • On mobile, the sidebar displays below the posts.

galapagos-blog.png

Products Pages

Galapagos Products Pages include features to help your products stand out, such as Quick ViewImage Zoom, and on-hover effects. The landing page displays the first image for each product in a sleek grid format.

  • Use Product Grid Style in Product Grid to choose the layout, then style it with Product Size and Product Spacing. You can set the spacing between images to 0% by manually typing 0.
  • The landing page holds up to 50 items at a time. Previous and Next arrows help customers navigate.
  • You can enable or disable Quick View and Image Zoom.
  • The landing page layout is the same on computer and mobile. However, on mobile, product names and prices don't display.

galapagos-products-page.png

Thumbnails

Choose how details on landing page thumbnails look in the Product Grid section:

  • To display details over the image without a color filter, choose any Product Info Style except Overlay, then use Product Info to choose what information displays.
  • To display details over a color overlay, select Product Info Style: Overlay. Details display in the “Simple” style on hover. Use Product Overlay Color to change the filter color.
  • For all styles, use Product Accent Color and Product Info Font to change the product details’ color and font.

For more details, see this tip.

Alternate image on hover

You can display secondary images on hover to show off special features, alternate colors, or key details. After you’ve added at least two images in the product editor:

  1. In the Product Grid section, select any Product Info Style except Overlay. For example, you could select Product Info Style: Simple.
  2. Check Show Alt Image on Hover.
  3. If you don’t want product details to display, select Product Info: None.

The second image in the product editor shows on hover. Drag and drop the images in the editor to set the image order.

Category navigation

Links to each category display below the header. Clicking a link filters out every product except the ones in that category.

  • If your header navigation style is set to Nav Style: Simple, a box displays around the category links.

galapagos-cat-nav-box.png

Item pages

Click any thumbnail on the landing page to open its item page.

  • Open an item before opening Site Styles to see style options in the Product Item section.
  • You can hide the Share button on items with Hide Product Share Button in Product Item.
  • If you add additional information to a product, it displays a More Info link, which scrolls to the additional information area.
  • On mobile, the price shows above and below the product image, so it remains visible on smaller screens.
  • Category navigation displays at the top of mobile navigation.

galapagos-mobile-cat-nav.png

Structure and style

Site width

On Layout Pages, use Page Width in Site Wide to set the width of the page content.

On all other pages, and for the header and footer, the width is fixed.

Fonts

Stye the text of the main content area with Heading and Body Text in Site Wide.

  • Check Custom Headings to style Heading 1, Heading 2, and Heading 3 independently.

Social icons

Galapagos doesn't have built-in social icons. Instead, add Social Links Blocks to footers or pages.

Sidebar

Blog Pages have sidebars.

Mobile

With Squarespace's built-in responsive design, your site adjusts to look great on any device. Navigation and branding display in a navigation bar at the top.

  • Tag lines don’t display on mobile.
  • The navigation bar follows the Nav Link Color in Mobile Styles.
  • Set the height of the mobile bar with Nav Height in Mobile Styles.

Branding

Site titles and logos have unique mobile styles. In the Mobile Styles section:

  • To style the mobile title, choose Nav Branding: Show Site Title, then style it with the Nav Site Title tweaks.
  • To upload a mobile logo, choose Nav Branding: Upload Mobile Nav Logo, then use the Nav Logo tweak. This is only an option if you have a site logo.
Tip: Upload the same logo or use the same site title font in mobile view to keep your branding consistent across devices.

Navigation

Navigation collapses to a ☰. 

  • The ☰ always displays on mobile, even if the Main Navigation is empty.
  • The ☰ and links follow the site background color (Background Color in Site Wide).
  • Products Page categories display in the navigation.

More help with mobile

galapagos-mobile.png

Was this article helpful?
11 out of 16 found this helpful