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

Pacific template family

The Pacific template family (Bryler, Charlotte, Horizon, Naomi, Pacific) use text overlays and a scrolling full-bleed index page to tie all of your content together into a single voice.

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

Supported pages

Pacific supports these page types:


Visitors use the header at the top to navigate your site. In Pacific, the header has the site title or logo (branding) and navigation links.

Style the header's fonts and colors in Site header.

  • Set the header color with Background color.
  • Display banners behind the header with Transparent on banner images.
  • Change the site title size with the Font size slider in the Site title font tweak. To prevent distortion, don't go higher than 72 pixels.
  • Change the logo size with Logo width.

Style the navigation links in Site navigation. Choose if navigation appears on the page or behind a ☰ icon with Always use overlay nav.

  • When unchecked, navigation links display either beneath the branding, or split on either side. This depends on the number of pages and browser width.
  • Change the Link color and set the overlay background with Background color.
  • In the ☰ overlay, links resize automatically to best fit the menu. The Link font: font size tweak doesn't affect them.



Banners create a visual element that can set the tone for your page. Add page thumbnail images and videos to create banners.

  • Banners display on album, blog, events, gallery (image only), products, and layout pages.
  • Stack multiple banners vertically in an index.
  • Page titles and descriptions and the site header can overlay the banner.
  • Add a color filter with Overlay color in Page banner. Index sections have separate overlay colors.


Banner text

Page titles and descriptions can display on banners.

  • Style the fonts in Page banner. Hide all titles with Show page title.
  • To remove page descriptions, delete them from page settings. To remove them without affecting the banner height, replace the text with line breaks.
  • To use different text for search results, add SEO titles and descriptions.

Banner height

To change the height, you can:

  • Change Padding in Page banner.
  • Add height to the page description by adding line breaks.

More help with banners

Keep in mind:

  • Video banners sometimes won't display on mobile, depending on the connection speed and browser version. Set a mobile fallback image to appear when the video banner can't load.
  • If a gallery page doesn't have a thumbnail image, the first image becomes the banner automatically whenever you make a change in the gallery. If you don't want a banner on your gallery page, open page settings to remove the thumbnail.


Set the site background color with Background color in Main content.


Customize Pacific's site-wide footer with blocks. The footer can include navigation links, contact information, and a second content area called the pre-footer.

Style the footer, contact information, and footer navigation links in the Footer section.

  • Display and style the contact information with the Site info tweaks. Change the information with the Physical location, Contact email, and Contact phone number fields in Business information.
Tip: If you don’t see the Site info tweak, preview a different template on your site, then cancel the preview.

The pre-footer displays above the footer.

  • Style its background and text colors in the Prefooter section.
  • To display the pre-footer, choose Content: custom. To hide it, choose Content: empty.

Keep in mind:

  • Some templates' demo content includes a social links block. Delete the block to remove the social icons.
  • Text links in the footer and pre-footer are underlined.


Blog pages

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

On the landing page:

  • Add category navigation to display category filters at the top of the page.
  • Post thumbnails display below the title for posts that have excerpts,
  • Excerpts display "Read more" links.
  • The full content of individual posts displays under the title for posts without excerpts.

On individual posts:

  • Individual posts have navigation for previous and next posts below the comments.
  • Single-column text blocks are inset on either side. This adds visual interest to your posts by varying the layout. There are no options to change the indent's width.

Style the metadata in the blog section:

  • Date, categories, and author names display above the post. Use the Meta priority to move one of these above the post title.
  • To hide author names, choose Hide entry author. This tweak isn't available when Meta priority: author is selected.
  • Source URLs, tags, and comment, like, and Share buttons display below the post. Check Hide list entry footer to hide them.

Style the text in Main content:

  • Style the metadata with the Meta tweaks.
  • Post titles follow the Heading 1 tweaks.
  • Body text follows the Text font and Text color tweaks.


Index pages

Pacific index page turn the content from multiple pages into stacked sections, so you can highlight different images and information in one location.

  • Content sections are made from layout Pages. They're a good option for adding text, buttons, and other blocks.
  • Gallery index sections are made from gallery pages, and can display in a grid or slideshow.
  • Album sections are made from album pages.
  • Page thumbnails display as a background for content and album sections.


Gallery index sections

Style gallery index sections in the Index gallery section of site styles. Set the layout of all gallery index sections with the Design tweak.

For slideshow layouts:

  • Choose if galleries Autoplay and set the Slideshow transition to Fade or Scroll.
  • Add or hide navigation elements with Gallery controls.
  • Add an eye icon that visitors can use to enable or disable captions with Gallery overlay toggle.
  • Image titles and descriptions center over the image.

For grid layouts:

  • Choose how many images display horizontally with Grid max columns.
  • Image titles display on hover. Image descriptions don't display.

Videos added to the gallery:

Section backgrounds

For content and album sections:

  • Page thumbnails display as a background.
  • Sections without thumbnails display the site background color.
  • Use Section separator in index to choose what happens when there are two consecutive sections without background images. You can either have alternating background colors, or a border dividing sections.

For gallery index sections:

  • Slideshow layout - Images display full bleed.
  • Grid layout - The Gallery overlay color in Index gallery displays fully opaque in any empty space in the grid.

Color overlays

You can add a color filter to images and videos. This helps any overlaying content stand out.

  • Content and album sections - Use Color in Index overlay.
  • Gallery index sections - Use Galley overlay color in Index gallery. The color only shows on images with titles or descriptions. For grid layouts, the color shows on hover.

Section height

To change the height of content and album sections, adjust the padding:

  • Sections with banner images - Use Page padding in Index overlay.
  • Sections without banner images - Use Page padding in index.
  • For content sections, you can also add height by adding extra line breaks to the page content.

Change the height for gallery index sections in Index gallery:

  • Slideshow layout - Change the Slideshow aspect ratio.
  • Grid layout - Change the Grid aspect ratio and Grid max columns.

On index pages set as the homepage:

  • The header navigation can be locked to appear at the top of the browser window when you scroll down past the first section in the index page (fixed navigation).
  • You can add links for content and album sections to the navigation. When you click the link, the page scrolls to that section.

To lock the navigation, choose Index scroll nav: show on scroll in Site navigation. Set the navigation background color with Background color in Site header.

Keep in mind:

  • Site branding won’t display.
  • You must have more than one section in your index for the locked nav to appear.


To create navigation links for content and album sections, check Expand homepage index links in Site navigation.

  • Gallery index sections don't display in the navigation. Use index anchor links to create links for them instead.


More help with index pages

  • Edit annotations may not appear on blank sections. To edit a blank page, move it out of the index, add content, then move it back.
  • To change the color of button, form, and quote blocks over images, use the Index overlay tweaks.
  • Share buttons always display on album sections.

Category navigation

Visitors use category navigation links to filter pages by post or product categories.

Add and style category navigations at the top of Blog and Store Pages in the Category navigation section. Style changes affect all category navigations on your site.


Shopping cart

A shopping cart button displays in the top-right corner of all pages after a customer adds a product to their cart. To style the button:

  1. Add at least one product to your cart so the cart button appears.
  2. Change the Cart button background color and Cart button font color in Site header.



With Squarespace's built-in responsive design, your site adjusts to look great on any device.

  • Navigation collapses into a ☰ in the top-left corner, and can stay locked in place as your scroll on index pages set as the homepage.
  • The site title or logo displays in the top center, with a maximum height of 50 pixels.
  • The shopping cart button displays in the bottom-right corner.
  • You can disable mobile styles, but we don't recommend it.
  • Grid galleries display two images per row. If you have an odd number of images, there will be a blank space next to the final image.

Headings won't display past these maximum sizes on mobile:

  • Heading 1 - 34 pixels
  • Heading 2 - 26 pixels
  • Heading 3 - 20 pixels

On smartphones:

  • A Back to top link appears at the bottom above the footer.
  • Galleries in index pages don't display image descriptions.


Language options

Within this family, the Charlotte, Naomi, and Pacific templates support two language options:

Was this article helpful?
20 out of 41 found this helpful
Pacific template family