Supply template

The style and features of the Supply template.

Last updated December 21, 2024

Supply is a business template made with creative designers in mind. Its sidebar navigation, customizable store 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 and the section they appear under in the Site Styles panel are bold.

Supported pages

Supply supports these page types:

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.

supply-sidebar.png

Header elements

The sidebar has these header elements:

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 the Header color tweak under Header.
  • Add a border with the Header border tweak under Header.
  • Adjust the Header border thickness and Header border color tweaks under Header.
  • Hide and style the social icons with the Social tweaks.
  • Choose where elements display with the Site vertical alignment tweak under Site wide.

Other sidebars

Some pages have a second sidebar on the right:

In Supply, the main navigation and secondary navigation display in the sidebar.

Style them with these Navigation tweaks:

  • Sublinks can display for dropdowns, store 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.

supply-nav.png

Site title, logo, and tagline

The site title or logo and tagline display at the top of the sidebar. Style them with these Header tweaks:

Taglines 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.
  • Store 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 the Full width homepage tweak under 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 store 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:

supply-banner.png

Blog pages

Supply blog pages display as a list of vertically-stacked posts. The page featured image creates a vertical banner image.

On the landing page:

  • Author names and dates display above each post. To hide authors, check the Hide blog author tweak under Blog.
  • Categories display above the title. Source URLs, tags, comments, shares, and likes display below the post.
  • Add or remove a border line between each post with the Blog post border tweak under Blog.
  • Excerpts are text-only and display with a "Read more" link.
  • The full content of individual posts displays under the title for posts without excerpts.

On individual posts:

  • Author names and dates display above each post. To hide authors, check Hide blog author in Blog.
  • Categories display above the title. Source URLs, tags, comments, shares, likes, and navigation for previous and next posts display below the post.
  • Post featured images create vertical banner images to the right of the post content. Posts without featured images don't have banners.
blog-page-supply.png

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.

layout-gallery-supply.png

Image layout

For images in a gallery:

  • Set the space around the images with the Gallery image margin tweak under 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 the Site vertical alignment tweak under 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 under Index. Choose any aspect ratio other than Auto to make all the images the same shape.
  • Set the thumbnail size and spacing with the Index column width and Index gutter tweaks under Index.
  • The index page has a separate background color. Set this with Index background color under Products.
supply-index-page.png

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 the Index title color and Index list font size tweaks under Index.

Set the style and hover options with Index list title style under 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 you set the Index list title style tweak under Index to Under, page titles display below thumbnail images. If set to Overlay, Color overlay, or Always show, titles are centered within thumbnails.

Store pages

Supply store pages include a customizable background, category navigation, and on-hover effects.

supply-products-page.png

Landing page

The landing page has a separate background color. Set this with the Product background color tweak under Products.

Items display in a grid.

  • Set the layout with the Product aspect ratio, Product column width, and Product gutter tweaks under Products.
  • Set the size and color of the product details with Product list and Product price under 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 the Main content section of site styles. Titles and prices follow Heading font, and labels follow Meta font.

Set the grid’s style and hover behavior with the Product list style tweak under 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 store page is in a dropdown or Index.

Choose to display the page title, category sublinks, or both with the Product category links tweak under Navigation. Show both while inside collection displays the category sublinks only while on the Store Page.

Product items

For individual items:

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

  • 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.

Store 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.

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 the Header section of site styles.
  • Taglines 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 the Use site title in mobile header tweak under Header.
  • Unlike some templates, you can’t disable mobile styles.
mobile-supply.png

Background color

Use the Page color tweak under Site wide to change the site's background color.

  • Change the sidebar's background color with Header color under Header.
  • Index and store 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 the Main content section of site styles.

Troubleshooting Supply

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.

No. The Supply gallery page has a unique, vertically-stacked design. You can decrease the size of the images by increasing the spacing around them. However, you can’t adjust the width of the gallery image column.

To create a gallery with a different style, add a layout page and then use a gallery block.

I'm seeing a gray overlay on my product images

This happens for images with transparent backgrounds in Store Pages with the Viewbook, Showroom, and Flipcard layouts.

If you don't like the way it looks, either add product images with non-transparent backgrounds, or choose Product list style: catalog in the Products section of style styles.

My homepage is wider than other pages

In Supply, you can set a layout page homepage to display at full width. If you don't like the way this looks:

  1. In the Home menu, click Website, click Design, and then click Site styles.
  2. Scroll down to the Homepage section and uncheck Full width homepage.
  3. Click Save.

Where did my sidebar go?

Supply features a navigation sidebar on all pages. Due to responsive design, when your browser window is narrow, the sidebar content moves to the top of the page as a navigation mobile bar.

Widen the browser window and the sidebar will reappear.

supply-troubleshoots1.png
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.