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

This guide walks you through Supply’s options for adjusting the look and feel of your site. These options are available in the Style Editor.

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

Tips: In the Home Menu, click Design, then Style Editor. To access tweaks specific to a page, navigate to the Style Editor 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.

Supply supports these page types with template-specific features:

  • Index - Create a grid of thumbnail images that link to pages on your site
  • Products - Style your store with a customizable background color, product grid, and on-hover effects
  • Gallery - Showcase your videos and images in a stacked format.
  • Blog - The list-style Blog Page stacks posts vertically

And these standard pages:

  • Regular Page - A blank page you can customize with blocks
  • Album - Add music and cover art to your site
  • Events - Create a calendar or list of events
  • Gallery - Style the gallery as a slideshow or grid
  • Cover Page - A unique landing page styled separately from your template
Tip: If you're new to Squarespace, we suggest you read Understanding the Pages panel and Adding pages to your navigation for an overview of how pages and content work in Squarespace.

Navigation sidebar

Supply features a navigation sidebar on all pages. The sidebar contains your site title, tag line, Main Navigation, and Secondary Navigation. Social icons can also display in the sidebar. Unlike other templates, the sidebar is more fixed in its layout and doesn’t support adding content with blocks.

Tip: If you can't see the navigation sidebar in your site preview, widen your browser window.

Change the background color of the sidebar with the Header Color in the Header section of the Style Editor. Check Header Border to add a border to the sidebar. and adjust the Header Border Thickness and Header Border Color.

Check Header Border and adjust the Header Border Thickness and Header Border Color to add a border between the sidebar and the page content. Use the tweaks that appear to adjust the border’s thickness, color, and transparency.

Use the Social section of the Style Editor to display or hide the social icons, and to adjust their style and color.

The Site Vertical Alignment tweak in the Site Wide section affects where the sidebar elements display. If alignment is set to Top, the site title, tag line, and Main Navigation display at the top on taller browsers, while Secondary Navigation and social icons display at the bottom. Choose Site Vertical Alignment: Middle to display both centered vertically.

Some pages display additional elements on the right side of the page.

If the content of the sidebar is taller than the browser, visitors can scroll within the sidebar.

Navigation links

The Main Navigation and Secondary Navigation display in the sidebar. Adjust which pages display as links in your navigation in the Pages panel. To learn how, visit Adding pages to your navigation.

In Supply, sublinks can display for folders, Products Pages, and Index Pages. Adjust the settings for each with the Navigation section of the Style Editor:

  • Folders - In Supply, folder sublinks can either display on click or always show. Use the Folder Links tweak to set the folder style. Folder sublinks always show on mobile.
  • Index Pages - For Index Pages, the navigation can display the Index Page link, links for the pages within the Index, both, or neither. Use the Index Links tweak to adjust how they display.
  • Products Pages - Categories you’ve added to your products can display in the navigation. Use the Product Category Links tweak to adjust how they display. These sublinks don’t display if the Products Page is within an Index.

Use the tweaks in the Navigation section to adjust the colors, fonts, and spacing of the navigation. Nav Active Color determines the color of the link for any page you’re actively viewing.

Site title and logo

The site title or logo and tag line display at the top of the sidebar. Use the Site Title & Logo panel to adjust the site title, or to replace the site title with a logo.

Use the Site Title and Site Tagline tweaks in the Header section of the Style Editor to adjust the font and colors of the site title and tag line, or to adjust the logo size.

If you’ve replaced your site title with a logo, you can choose if displays in mobile view. When Use Site Title in Mobile Header is checked, the site title will display on mobile instead of a logo, which can be useful if your logo is square or tall. Uncheck it to display the logo on mobile.

The tag line doesn’t display on mobile.

Background color

Use the Page Color tweak in the Site Wide section of the Style Editor to change the background color of your site.

Index Pages and Products Pages have separate background colors from the rest of the site. While on those pages, navigate to the Style Editor.

  • For Products Pages, use the Product Background Color tweak in the Products section.
  • For Index Pages, use the Index Background Color tweak in the Index section.

Product items and pages within the Index will show the main site’s background color.

Change the background color of the sidebar with the Header Color in the Header section.

Page width

The content area in Supply is fixed at the same width for most pages. If you’ve added a thumbnail to the page, it displays on the right to the width of the browser as a vertical banner. If there’s no page thumbnail, the page background color extends to the browser edge.

Products Pages and Index Pages display at full width.

Gallery images on Gallery Pages stack vertically within a fixed width. The page title and description displays to the right over the page background color. The Gallery Page doesn’t have a banner.

If you set a Regular Page as your homepage, you can display that page at full width. In the Homepage section of the Style Editor, check Full Width Homepage.

If Full Width Homepage isn't checked, the homepage stays constrained to maintain the layout of your content on larger screens.

Note: When set to Full Width Homepage, the thumbnail banner image will show in the bottom right-corner if the browser window is taller than the page content.

Vertical banner images

The thumbnails for certain pages become a banner image on the right side. On mobile or narrower browser windows, the banner displays at the top of the page.

  • Banner images display on Blog, Album, Events, and Regular Pages. To create a banner on any of these pages, add a page thumbnail
  • They also display on individual blog posts and events. To create a banner on any of these items, add a collection item thumbnail

Banners are fixed, which means they don’t scroll with the rest of the page. The banner fills the remaining width of the browser to the right of the fixed page width.

Footer

Supply supports a footer on all pages except Gallery Pages. Aside from the Gallery Page, the same footer content displays on all pages.

Customize the content in the footer using blocks. To learn more, visit Editing footers.

Mobile

Because Squarespace templates are built with responsive design, your site will adjust on a 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. For general information, visit How will my site appear on a mobile device?

  • If you’ve replaced your site title with a logo, you can choose whether it displays in mobile view. In the Header section of the Style Editor, check or uncheck Use Site Title in Mobile Header. When the tweak is checked, the site title will display on mobile instead of the logo. If your logo is large, replacing it with a site title on mobile will help keep your page streamlined.
  • The tag line doesn’t display in mobile.
  • On a mobile device, the navigation displays as a menu ("hamburger") icon in the top-right corner. When you tap the menu icon, a menu with your navigation links appears. The menu background matches the Header Color.

mobile-supply.png

Note: Unlike some other Squarespace templates, you can’t disable mobile styles for Supply. This ensures your site always follows best practices and stays mobile-friendly.

Font styling

Use the tweaks in the Main Content section of the Style Editor to adjust the fonts on your site, including the font, size, and color of the headers and body text.

Next step

To learn how to set up your store, visit Supply Products Pages.

Was this article helpful?
1 out of 2 found this helpful
Supply structure and style