Supply is a business template made with creative designers in mind. Its sidebar navigation, customizable Products Page, Index navigation thumbnails, and stylized layout emphasize the important aspects of each product and image in your store.

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

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

Supported pages

Supply supports these page types:

• Album Pages
• Blog Pages - List
• Cover Pages
• Events Pages
• Gallery Pages - Stacked
• Index Pages - Grid
• Layout Pages
• Products Pages - Unique

Navigation sidebar

The site-wide sidebar displays on the left. If the content of the sidebar is taller than the browser, visitors can scroll within it.

The sidebar collapses to a ☰ on mobile. If you can't see the sidebar in your site preview, widen the browser window.

Header elements

The sidebar has these header elements:

• Site title or logo
• Tag line
• Main Navigation and Secondary Navigation
• Built-in social icons

Unlike some other templates, the sidebar doesn’t support adding content with blocks.

Style the sidebar

Style the sidebar in Site Styles:

• Change the background color with Header Color in Header.
• Add a border with Header Border in Header.
• Adjust the Header Border Thickness and Header Border Color in Header.
• Hide and style the social icons in Social.
• Choose where elements display with Site Vertical Alignment in Site Wide.

Other sidebars

Some pages have a second sidebar on the right:

• Layout Pages, Album Pages, Events Pages, and Blog Pages display a vertical banner.
• Gallery Pages display the page title and description.

Navigation links

In Supply, the Main Navigation and Secondary Navigation display in the sidebar.

Style them in the Navigation section:

• Sublinks can display for folders, Products Pages, and Index Pages. Choose this with Folder Links, Index Links, and Product Category Links.
• Choose the color of the link for any page you’re actively viewing with Nav Active Color.
• Use the other tweaks to set the colors, fonts, and spacing.

An arrow appears next to any external link added to Supply’s navigation. These arrows can’t be removed.

Site title, logo, and tag line

The site title or logo and tag line display at the top of the sidebar. Style them in the Header section:

• Set the font and colors of the site title and tag line with Site Title and Site Tagline.
• Set the logo size with Logo Size.
• If you have a logo, the site title can display in mobile instead.

Tag lines don't display on mobile.

Page width

Most pages have a fixed width for the content area. This width can't be changed.

• If the page has a banner, it displays to the right of the content area.
• If there’s no banner, the page background color extends to the browser edge.
• Products Pages and Index Pages display at the full width of the browser.
• Layout Pages set as the homepage can display full width. Set this with Full Width Homepage in Homepage.

Vertical banners

Some pages display a vertical banner to the right of the content area. On mobile or narrower browser windows, the banner displays at the top of the page.

• Banners don’t scroll with the rest of the page.
• Banners fill the remaining width of the browser beyond the content area.
• Gallery, Index, and Products Pages don't have banners. 
• For homepages set to full width, if the browser window is taller than the page content, the banner shows in the bottom right-corner.

To create a banner:

• Blog, Album, Events, and Layout Pages - Add a page thumbnail.
• Blog posts and individual events - Add a collection item thumbnail.

Blog Pages

Supply Blog Pages display as a list of vertically-stacked posts. The page thumbnail creates a vertical banner image.

On the landing page:

• Categories display above post titles. Author names and dates display below.
• Source URLs, tags, comments, Shares, and likes display below the post.
• Add or remove a border line between each post with Blog Post Border in.
• To hide the post author for all posts, check Hide Blog Author.
• Excerpts display with a Read More link.
• Post thumbnails don't display.

For posts:

• Navigation for previous and next posts displays below the comments.
• Post thumbnails create vertical banner images. Posts without thumbnails don't have banners.

Gallery Pages

Supply Gallery Pages display page titles and descriptions on the right. Images stack between the navigation sidebar and page titles at a fixed width.

On hover, a + button appears over images with image titles or descriptions. When clicked, the caption appears as an overlay. Click the x to hide it.

Image layout

For images in a gallery:

• Set the space around the images with Gallery Image Margin in Gallery.
• If the product has only one image, use Gallery Item Single Image Fill to choose if the image crops around its focal point to fit its aspect ratio.

Page title and description

The page title and description displays on the right over the background color.

• The position is fixed, so they stay in the same position as you scroll. If the title and description are taller than the browser window, they scroll with the page.
• Choose where the page title and description display with Site Vertical Alignment in Site Wide. Top aligns it at the top. Middle displays it centered.

More help with galleries

• Video captions don't display.
• Clickthrough URLs appear in the image description overlay as a text link to the URL.
• On mobile, the page title and description displays at the top. The page title and description displays at the top. Image captions display below their images.
• Supply doesn't support deeplink URLs or lightbox functionality.
• To create a different layout, use a Layout Page with a Gallery Block.

Index Pages

Supply Index Pages create thumbnail grids that visitors can use to explore different pages.

• Set the thumbnail shape with Index Aspect Ratio in Index. Choose any aspect ratio other than Auto to make all the images the same shape.
• Set the thumbnail size and spacing with Index Column Width and Index Gutter in Index.
• The Index Page has a separate background color. Set this with Index Background Color in Products.

Supported pages

You can add the following pages to an Index:

• Album Pages
• Blog Pages
• Events Pages
• Gallery Pages
• Layout Pages

Page titles and hover options

Thumbnails can display page titles and semi-transparent color overlays.

• Style page titles with Index Title Color and Index List Font Size in Index.

Set the style and hover options with Index List Title Style in Index:

• Overlay - Image dims and title displays on hover.
• Color Overlay - Title displays over a color filter on hover.
• Under - Title displays below the image. Image dims on hover.
• Always Show - Title displays over a color filter. Image brightens slightly on hover.
• For Color Overlay or Always Show, use the Image Item Color to set the filter’s color and transparency.

Indexes on mobile

• The page background color shows as a border around each product item or thumbnail image.
• If Index List Title Style in Index is set to Under, page titles display below thumbnail images. If set to Overlay, Color Overlay, or Always Show, titles are centered within thumbnails.

Products Pages

Supply Products Pages include a customizable background, category navigation, and on-hover effects.

Landing page

The landing page has a separate background color. Set this with Product Background Color in Products.

Items display in a grid.

• Set the layout with Product Aspect Ratio, Product Column Width, and Product Gutter in Products.
• Set the size and color of the product details with Product List and Product Price in Products.
• Set the color of the Sale label with Product Sale Color.
• The Sold Out label always displays as black.
• The text follows the fonts set in Main Content. Titles and prices follow Heading Font, and labels follow Meta Font.

Set the grid’s style and hover behavior with Product List Style in Products:

• Viewbook - Image dims and product name and price display on hover.
• Catalog - Product name and price displays below item images. Image dims on hover.
• Showroom - Product name and price display in the bottom-right of the product image. Image dims on hover.
• Flipcard - Images are dimmed, with the product name and price displaying in the top-left. The image un-dims and product details disappear on hover.
• For all styles, dimmed images become slightly transparent, revealing some of the background color.
• Sold out items are always dimmed.

Category navigation

Product categories can display as sublinks in the sidebar navigation. Clicking a link filters out every product except the ones in that category. The links won't display if the Products Page is in a folder or Index.

Choose to display the page title, category sublinks, or both with Product Category Links in Navigation. Show Both While Inside Collection displays the category sublinks only while on the Products Page.

Product items

For individual items:

• Images uploaded to the product's gallery are stacked.
• Additional information displays as an overlay.
• Item pages follow the background color of the main site (Page Color in Site Wide).

Open an item page to see item-specific tweaks in the Products section.

• Change the space around the images with Product Item Image Margin.
• Hide the Share Button with Hide Product Share Button.
• If the product has only one image, use Product Item Single Image Fill to choose if the image crops around its focal point to fill the center panel.

Products Pages on mobile

On mobile:

• Product names and prices display on the left below each item.
• The shopping cart appears in a bottom mobile bar.
• Categories appear in the mobile navigation menu.

Footer

The site-wide footer displays on all pages except Gallery Pages. Customize the footer with blocks.

Mobile

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

• The navigation sidebar collapses to a ☰ icon in the top-right corner. The menu background matches the Header Color in Header.
• Tag lines don’t display.
• If your site has a logo, you can display the site title in mobile instead. This can be useful if your logo is square or tall. Set this with Use Site Title in Mobile Header in Header.
• Unlike some templates, you can’t disable mobile styles.

Background color

Use Page Color in Site Wide to change the site's background color.

• Change the sidebar's background color with Header Color in Header.
• Index and Products Pages have separate background colors.

Page titles

Page titles and descriptions display on Gallery Pages. Page titles display in Index Pages.

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

Fonts

Choose the fonts for your site in Main Content.