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.
Supply supports these page types:
- Album pages
- Blog pages - List
- Cover pages
- Events pages
- Gallery pages - Stacked
- Index pages - Grid
- Layout pages
- Store pages - Unique
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.
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.
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.
In Supply, the main navigation and secondary navigation display in the sidebar.
Style them with these Navigation tweaks:
- Sublinks can display for folders, 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.
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:
- Set the font and colors of the site title and tagline 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.
Taglines don't display on mobile.
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.
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:
- Blog, album, events, and layout pages - Add a page featured image.
- Blog posts and individual events - Add a collection item featured image.
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.
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.
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.
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.
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.
Supply store pages include a customizable background, category navigation, and on-hover effects.
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.
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 folder 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.
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 under Site wide).
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
- 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.
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.
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 and descriptions display on gallery pages. Page titles display in index pages.
Tip: To use different text for search results, add an SEO title.
Choose the fonts for your site in the Main content section of site styles.
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.
Can I make my gallery wider?
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:
- In the Home menu, click Design, and then click Site styles.
- Scroll down to the Homepage section and uncheck Full width homepage.
- 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.