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

Pacific, Bryler, Charlotte, Fulton, Horizon, and Naomi share the same underlying structure and functionality. This guide applies to all these templates.


This guide walks you through the options for adjusting the look and feel of your Pacific, Bryler, Charlotte, Fulton, Horizon, or Naomi site. These options are available in Site Styles.

This is a supplement to the guide Making style changes, which we suggest you read first if you're new to Squarespace.

Tip: In the Home Menu, click Design, then Site Styles. To access tweaks specific to a page, navigate to Site Styles when on that specific page.

Supported pages

Add pages to your site to create your site's underlying structure. Pages can appear as links in your site's navigation

Templates in the Pacific family support these page types:

  • Index - Create a long, scrolling page of stacked sections.
  • Blog - The list-style Blog Page stacks posts vertically.
  • Layout Page - An open page you can customize with blocks.
  • Album -  Create a page with playable music tracks and cover art.
  • Events - Create a calendar or list of events.
  • Gallery (Standard) - Style the gallery as a slideshow or grid.
  • Products (Classic) - Sell goods and services with our integrated Commerce features.
  • Cover Page - A unique landing page styled separately from your template.

Banner images

Create banner images at the top of any page, or stack multiple banner images vertically within an Index Page. To learn more, visit Banner images

Site header

The site header is the area where your Main Navigation and site title or logo display.

  • Use the Background Color tweak to set the header color.
  • When Transparent on Banner Images is checked, the header elements display over any banner images on your site.

Site title

The site title displays centered at the top of the page. Use the Site Title & Logo panel to adjust the site title, or replace it with a logo. These templates don't display a tag line.

Use the tweaks in the Site Header section of Site Styles to adjust the site title's color, font and formatting. The Font Size slider in the Site Title Font tweak adjusts the site title size. To prevent distortion, the recommended limit is 72 pixels.

Logos resize to a width of 140 pixels. The aspect ratio of the logo is maintained. You can adjust the width of the logo with the Logo Width tweak.

On mobile devices and reduced-width browsers, the site title or logo reduces to a maximum height of 50 pixels.

Main Navigation

The Main Navigation displays at the top of the page in the site header. Use the Always Use Overlay Nav tweak to choose whether it appears as inline links or as a navigation menu overlay. 

Use the tweaks in the Site Header section of Site Styles to adjust the color and font of your site's navigation links. For general help, visit Styling navigation

Tip: Add drop-down menus to the navigation with folders.

Header navigation

When the Always Use Overlay Nav tweak is unchecked, navigation links display either beneath the site title or logo, or split into two sections on either side of it. This depends on the number of pages and browser width. If the navigation is split and there are an odd number of links, the extra link displays to the left of the site title.

Index Pages

If you've set an Index Page as your homepage, its Album and Layout Page sections can display in the site-wide navigation links.

Homepage Index Pages can also create fixed navigation.

Navigation menu

When the Always Use Overlay Nav tweak is checked, a menu or hamburger icon displays in the top-left corner. When you click the menu icon, an overlay with your navigation links appears.

  • Link Color determines the hamburger icon color.
  • Background Color determines the overlay color.
  • The Link Font: Font Size tweak doesn't affect the overlay links. The links resize automatically to best fit the overlay menu.

Secondary Navigation

Secondary Navigation links display as footer navigation at the bottom of the page, above the footer content.

Use the Nav tweaks in the Footer section of Site Styles to adjust the links' color and font.

Category navigation

Use the Category Navigation section of Site Styles to add and style category navigations at the top of Blog Pages and Products Pages.

Category navigations display links to the different post categories or product categories. Clicking a link filters out every item except the ones in that category.

Tip: The category navigation style tweaks affect both Blog Pages and Products Pages.


Set the Background Color for your site in the Main Content section of Site Styles. You can also set alternating background colors or separating borders for sections in an Index Page.

The headerfooter and pre-footer have their own background colors.

These templates don't support a site-wide background image. However, you can add images with text and content overlays to your site with banner images.

Page title and description

The page title and description from Page Settings can display over banner images or videos.

The title and description don't display on Index sections.

Tip: To use different text for search results, add an SEO title and description.


Because Squarespace templates are built with responsive design, your site will adjust on mobile devices to better fit the format of that device. You can use Device View to see how your site will look on different devices.

On a mobile device, the navigation displays as a menu icon in the top-left corner. When you tap the menu icon, an overlay with your navigation links appears.

The site title or logo displays in the top middle. On mobile devices and reduced-width browsers, site titles and logos reduce to a maximum height of 50 pixels to fit in the mobile navigation bar. 

On smartphones, a Back To Top link appears at the bottom of the page above the footer.

Due to space limitations, galleries in an Index Page don't display image descriptions on mobile devices.

Note: You can disable mobile styles.

Footer and pre-footer

Your site supports a site-wide footer. This means the same content displays on every page. The footer has an optional top section called the pre-footer. To add the pre-footer, select the Content: Custom tweak. To hide it, select Content: Empty.

Tip: The pre-footer won't be visible when Site Styles is open unless it contains content. You can leave Site Styles, add content to the pre-footer, then re-open Site Styles to continue making changes.

Add content directly to the footer and pre-footer using blocks. When viewing the page, hover over the footer or pre-footer and click Edit to open the editor. To learn more, visit Editing footers.

  • Use the tweaks in the Prefooter section of Site Styles to set its background, heading, and text colors.
  • Use the tweaks in the Footer section to set the footer's background, heading, site info, and text colors, and to adjust the links for the Secondary Navigation.
  • Text links in the footer and pre-footer are underlined.

Certain content auto-populates in the footer and pre-footer:

  • Secondary Navigation displays at the top of the footer, below the pre-footer.
  • Contact information displays below the Secondary Navigation and above any footer content. Add or adjust this in the Physical Location, Contact Email, and Contact Phone Number sections of the Business Information panel. Style the text with the Site Info tweaks.
  • Depending on which template you've chosen, social icons may display in a Social Links Block. Delete the Social Links Block to remove them.

Shopping cart

If your site has a Products Page, a shopping cart button displays in the top-right corner of all pages after a customer adds a product to their cart. In Pacific, you can style the button's colors.

To customize the shopping cart button:

  1. Add at least one product to your cart so the cart button appears.
  2. In Site Styles, use the Cart Button Background Color and Cart Button Font Color tweaks to style the button.

On mobile, the cart button looks the same and displays in the bottom-right.


These templates don't support a sidebar on any page. For a list of templates with sidebars, visit Editing sidebars.

Social icons

These templates don't support built-in social icons. Instead, add a Social Links Block to the footer or to your page content.

Next Step

Create a vertically-scrolling homepage with an Index Page.

Was this article helpful?
8 out of 16 found this helpful
Pacific structure and style