Galapagos template

The style and features of the Galapagos template.

Last updated December 21, 2024

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 and the section they appear under in the Site Styles panel are bold.

Supported pages

Galapagos 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 tagline stacked below.

Use the Nav style tweak under 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.

Dropdowns open on hover.

  • Enable or disable the + symbol with the Hide folder indicators tweak under Navigation.
  • The menu background follows the site background color (Background color under Site wide).
  • The dropdown links follow the Nav link color.

galapagos-header.png

galapagos-header.png

Background

Set the background color of your site with the Background color tweak under Site wide.

Check Tint page background under 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

galapagos-tint.png

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 tweaks under Navigation.

Dropdowns open on hover.

  • Enable or disable the + symbol with the Hide folder indicators tweak under Navigation.
  • The menu background follows the Nav link color.
  • Dropdown links follow the site background (Background color under Site wide).

galapagos-footer.png

galapagos-footer.png

Blog Pages

Galapagos blog pages display as a list of vertically-stacked posts.

On the landing page:

  • Source URLs display below the post. Author name, publish date, and categories display above. To hide authors, check Hide author under Blog.
  • Excerpts are text-only and display with a "Continue" link.
  • The full content of individual posts displays under the title for posts without excerpts.

On individual posts:

  • Author name, publish date, and categories display above the post.
  • Likes, shares, author names, tags, and categories display below.
  • To hide authors, check Hide author under Blog.
  • 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

galapagos-blog.png

Store Pages

Galapagos store pages include features to help your products stand out, such as quick view, image zoom, and on-hover effects. The store page displays the first image for each product in a sleek grid format.

  • Use the Product grid style tweak under 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 store 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 store page layout is the same on computer and mobile. However, on mobile, product names, prices, and sold out labels don't display.
galapagos-products-page.png

Choose how details on store page featured images look in the Product grid section of site styles:

  • 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 featured image on the store 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 under 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 the Page width tweak under 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 the Heading and Body text tweaks under 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.

  • Taglines don’t display on mobile.
  • The navigation bar follows the Nav link color under Mobile styles.
  • Set the height of the mobile bar with Nav height under Mobile styles.

Branding

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

  • 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 under Site wide).
  • Store page categories display in the navigation.

More help with mobile

galapagos-mobile.png

Troubleshooting Galapagos

Here are some common issues with this template. Some of these are bugs or known issues. Although we still support Squarespace version 7.0, fixing bugs or issues is a lower priority for us while we focus on our current platform, version 7.1. You can move your version 7.0 site to version 7.1 using our update tool.

Blog sidebar moved from left to right

The blog sidebar displays to the right of page content. When you create a new blog page, there isn’t any page content, so the sidebar displays on the left. After you add a blog post, the sidebar will move to the right.

How do I change my mobile site title or logo?

Branding in mobile view is styled independently from computer view. In the Mobile styles section of site styles, use Nav branding to choose if it's a site title or a logo.

The Nav branding tweak only appears when you’ve added a logo in computer view. If you don’t see this tweak:

  1. Open the Design panel and click Logo & title.
  2. Temporarily upload a logo in the Logo image section. Click Save.
  3. Open site styles and scroll down to mobile styles.
  4. Use the Nav branding tweak to select either Upload mobile nav logo or Show site title.
  5. Adjust the mobile logo or site title with the other tweaks in this section. Click Save.
  6. Go back to the Logo & title panel and delete the temporary logo.

The Nav style you select in the Navigation section of site styles determines whether or not you can change the link color.

  • Simple, Box, Line, and Top border - Use the Nav link color tweak to adjust the color.
  • Tag and Full background - The navigation links are automatically set to black or white depending on the Nav accent color and can't be changed.
galapagos-troubleshoots1.gif

How do I change the size of my headings?

  1. Open the Site Styles panel.
  2. In the Site-wide section of site styles, check Custom headings.
  3. Use the Heading 1, Heading 2, and Heading 3 font tweaks to adjust the font sizes.

To adjust the size of the body text, use the Body font tweak in the Site wide section of site styles.

Note that when Custom headings is enabled, the Size tweak won't apply to Heading 2 or Heading 3 text within blog posts. While you can adjust the size in site styles, Heading 2 text will always revert to 18 pixels and Heading 3 text will always revert to 14 pixels.

Navigation doesn’t show up on mobile

The navigation icon and links in mobile view use the same color as the site background.

If your links don't display on mobile:

  1. Open the Site styles panel.
  2. Scroll to Site wide, then click Background color.
  3. Ensure the transparency is opaque.
  4. Ensure the Background color is set to a color that is distinct from Nav link color. For example, if both tweaks are set to black, the navigation links won’t display.

“Previous” and “Next” buttons on product details pages don’t have any text

Pagination labels on product details pages match the site background color. If the navigation text isn’t showing:

  1. Open any product item in the site preview, then open site styles.
  2. In the Site wide section, click the Background color tweak.
  3. Ensure the transparency is opaque.
  4. Ensure the Background color is set to a color that is different from Body text color. For example, if both tweaks are set to black, the text won’t display.
galapagos-troubleshoots2.png

Product names and prices don't display on mobile

Product names and prices don't display on store pages on mobile for Galapagos. They display after your customer taps the featured image to view an individual product.

To create a similar page for your store that includes names and prices on mobile:

  1. Add a layout page.
  2. Add a grid summary block on that page and link it to your store page.

Note that the summary block stacks on mobile.

galapagos-mobileprodgrid.png

What are the layout options for Store Pages?

Use the Product grid style tweak under Product grid to choose the layout for store pages.

  • Product grid style: fit - All products display at the same size and shape, for a clean, minimalist look.
  • Product grid style: featured - The first product displays larger, to make it the most prominent product on the page. All other featured images display at the same size and shape.
  • Product grid style: organic - The featured images display in a mixture of sizes, giving the page a dynamic feel.
galapagos-products-layouts.gif

What are the style options for item names and prices?

For store pages, you can choose from multiple options in the Product grid section of site styles. For all styles, use the Product accent color and Product info font tweaks to change the product details’ color and font.

With a color filter

To display product details over a semi-transparent or opaque color overlay, click the Product info style tweak and choose Overlay.

  • Use the Product overlay color tweak to change the color filter that displays over the image.
  • The name and price display in the Simple style on hover.
galapagos-coloroverlay.gif

Without a color filter

Click the Product info style tweak and choose Simple, Tag, Corner, or Box.

galapagos-info-styles.gif

Next, use the Product info tweak to choose what information displays:

  • Price, title on hover - Price displays. On hover, it’s replaced by the title.
  • Title, price on hover - Title displays. On hover, it’s replaced by the price.
  • Price and title - Price and title display.
  • Price - Price displays.
  • Title - Title displays.
  • Price on hover - Price displays on hover.
  • Title on hover - Title displays on hover.
  • None - Neither price nor title display. This also hides any Sale or Sold out labels.

Why can't I style my mobile site title?

This can happen when you've enabled the mobile logo and then removed the computer logo. To fix this:

  1. Open the Design panel and click Logo & title.
  2. Click Add a logo to add a logo to your site. Note that this logo will be temporarily visible to your site visitors.
  3. Click Save and go back to the Design menu. Click Site styles.
  4. Scroll down to the Mobile styles section.
  5. Click the Nav branding tweak and choose Show site title. The Nav site title color and Nav site title font tweaks will reappear.
  6. When you've finished styling the mobile site title, click Save.
  7. You can now go back to the Logo & title panel to remove the computer logo.
Footer Image
  • Get help from our community

  • Get help from our community on advanced customizations.

  • Hire a Squarespace Expert

  • Stand out online with the help of an experienced designer or developer.