Supply

Supply is a clean, easy-to-navigate theme perfect for merchants with large inventories and several collections. Features include prominent navigation, multiple homepage collections, sidebar filtering, and easy integration with the Product Reviews app.

Sample Supply theme image

Supply is ideal if you have the following:

  • More than 50 products
  • More than 5 collections
  • Large menus.

If you have a smaller product offering, but you like Supply's navigation, filtering, and layout, then try Minimal.

If you like Supply's ability to handle large inventories, and want a bigger focus on large-scale imagery, then try Venture.

You can edit Supply's settings from the Customize theme page of your Shopify admin.

Common sections

Every theme includes two sections that appear on every page:

  • the Header section, which is displayed at the top of the page, and typically includes your logo and navigation menus
  • the Footer section, which is displayed at the bottom of the page, and typically includes "Search", "About Us", and "Follow Us" social media links.

You can edit the header and footer sections from any page in the theme editor. Unlike other section types, the Customize theme page displays the header and footer sections regardless of which store page you are viewing in the theme editor.

Supply includes several unique settings for header and footer content.

Supply includes some unique settings for the header of your store. You can choose a menu to display in your header, upload a logo, and display a message to your customers:

Supply header

To customize the header:

  1. Click the Sections tab.

  2. Click Header.

  3. Select a menu to display from the Menu list.

With Supply, you can have a logo in your store's header. If you are using a custom logo, then the best format is a .pngfile with a transparent background.

Supply looks best with a logo that is 400px wide. You can change the width of your image by using the Custom logo width field. It is not recommended that you increase the value beyond the original width of the logo image. If you do, then you can cause distortion and loss of image quality.

Message

With Supply, you can enter a message in your store's header that is up to 55 characters in length. This message appears above the search bar:

Header message

For example, you can enter a greeting message, advertise a sale or new collection, or let your customers know about shipping delays.

To add a header message:

  1. In the Message area, enter your header message.

  2. Optionally, bold or italicize some of the text.

  3. Click Save.

Supply lets you add a navigation menu and contact information to the footer section of your store. You can also display a form to sign up for your store's newsletter, and link to your terms of service or privacy policy:

Supply footer showing newsletter signup, menu, and contact us section

To add footer information to your Supply store:

  1. In the Supply section, click Customize theme.

  2. Click Footer.

  3. Check Show social media icons to provide links to your social media accounts, including Twitter, Facebook, Pinterest, and Instagram.

  4. From the Legal menu drop-down list, select a menu to display in your footer. For example, your footer menu could include links your store's shipping and return policies.

The Footer menu option lets you show another menu in your store's footer. You can choose from the menus configured in the navigation settings.

To add a menu to your store's footer:

  1. In the Content area, click Quick links.

  2. In the Heading field, enter the header you want to appear above the menu. For example, you could enter a menu title such as "Collections" or "About us". You can also leave the heading as "Quick links".

  3. Click Save.

Get in touch

You can provide contact information in your store's footer, such as your address, email address, and phone number:

Sample of contact information in the store's footer

To add contact information:

  1. In the Content area, click Get in touch.

  2. In the Heading field, enter a title for you contact information. By default, the title is "Get in Touch".

  3. In the Text field, enter the contact information, for example your phone number or email address.

  4. From the Container width list, select how wide you want the contact information to be. By default, the contact information takes up 50% of the footer width.

  5. Click Save.

Newsletter

The Newsletter setting allows you to show a newsletter sign-up form in your store's footer text. When someone enters their email address, they are automatically added as a customer in your Shopify admin.

To customize the newsletter sign-up form:

  1. In the Content area, click Newsletter.

  2. In the Heading field, enter a title for your newsletter form. By default, the title is "Newsletter".

  3. From the Container width list, select how wide you want the newsletter form to be. By default, the newsletter form takes up 33% of the footer width.

  4. Click Save.

Slideshow

The Slideshow section lets you upload images to use for your slideshow. You can choose whether the images in the slide show rotate automatically, and you can set the frequency, in seconds, at which the images rotate.

With Supply you can select up to 6 slide images for your home page. You can add a URL link to each slide that your customers can click to open a page in your store.

Each slide image should be 1000px wide by 500px tall. If you use slideshow images with different heights, then the images can appear to jump or be disjointed between slide transitions.

To customize your slideshow:

  1. Click the Sections tab.

  2. Click Slideshow.

  3. In the Settings area, check Auto-rotate slides if you want slide images to automatically rotate.

  4. From the Transition time drop-down list, select a rotation frequency, in seconds.

To add an image slide:

  1. In the Content area, click Image.

  2. In the Image area, click Upload image to select an image from your local computer, or click the select from library link to select an image that you have already uploaded to your Shopify admin.

  3. If you want to add a link to the slide, do one of the following:

    • If you want to link the text on your slide to a page in your store, then click in the Link URL field and select a page.
    • If you want to link the text on your slide to a website, then paste the website's URL in the Slide link field.
  4. Click Save.

Use the Featured collections section to select up to 6 product collections to feature on your home page. When a customer clicks on a featured collection in your home page, the collection's featured product will display. If you do not have a featured product, then the first product image in the collection will display.

To display featured collections on your home page:

  1. Click the Sections tab.

  2. Click Featured collections.

  3. In the Content area, click Collection.

  4. From the Collection drop-down list, select a collection to display.

  5. Continue adding collections until you have selected all the collections you want to display.

  6. Click Save.

Collection rows

You can feature products from your collections on your home page:

Supply collection row

You can choose to feature up to 4 collections, and up to 4 rows of 5 products per collection. You can display collection rows on your home page to feature new arrivals or collections that are on sale.

  1. Click the Sections tab.

  2. Click Collection rows.

  3. From the Collection drop-down list, select the collections with the products you want to display in a row.

  4. Select how many product images to display from the Number of products in row drop-down list.

  5. Check Show saved amount to show how much the customer is saving when the product is on sale.

  6. Check Show compare at price to show the original price when the product is on sale.

  7. Click Save.

Product page

With Supply, you can set set the following options on your product pages:

  • let customers zoom in on product images
  • display a quantity selector
  • display the remaining quantity of a product, which appears when there are less than 10 items in stock
  • display the amount the customer is saving, and a "compare at" price
  • show related products
  • set up the Product Reviews app

To customize the product page:

  1. In the theme editor preview of your store, open a product page.

  2. Click the Sections tab.

  3. Click Product.

Enable image zoom

Supply includes an option to zoom in on product images, which is useful when your product has details that are best viewed when the image is enlarged.

Zooming in on an image in Supply works differently than it does in other themes. While other themes display an image pop-up or lightbox, with Supply the image is enlarged within the image frame. To view image details, the customer can use the cursor to pan around the image:

To enable image zooming:

  • Check Enable image zoom.

Show quantity selector

You can let your customers add multiple quantities of a product at a time to their shopping cart.

To show a quantity selector drop-down list:

  • Check Show quantity selector.

Show remaining quantity message

With Supply, you can let your customers know when the product they are viewing has less than 10 items in stock:

Supply remaining quantity

Note

You need to enable inventory tracking for a remaining quantity message to display.

To show how many products are left in stock:

  • Check Show remaining quantity message.

Show incoming stock transfer message when sold out

You can display a message indicating when a sold-out item will be back in stock. The message will appear when you have created a transfer for the product. The transfer message is "Will be in stock after (date)".

Message on product page stating

To let your customers know when a sold-out item will be back in stock:

  • Check Show incoming stock transfer message when sold out.

Show product vendor

You can display the vendor name below a product image, which is useful if you stock items from different vendors or brands:

Supply product vendor

To show the vendor name below a product image:

  • Check Show product vendor.

Show saved amounts and Show compare at price

If your product prices are marked down, either from their regular price or in comparison to other stores, then you can show your customers how much money they are saving. You can display a "compare at" price, and you can show how much, in dollars, they are saving:

Supply compare price

Note

The saved amount and compare at price will only display for products with a Compare at price specified.

  1. To show the amount, in dollars, that they are saving, check Show saved amount.

  2. To show a comparison price, check Show compare at price.

Note

The saved amount is rounded down to the nearest dollar. For example, if the price difference is $25.51, then the saved amount will be "$25" and not "$26".

You can recommend related products on each product page. When this option is selected, the product page will display a list of other products in the collection.

Product page with recommended product images at the bottom

To show other products in the collection:

  • Check Show related products.

Enable product sharing

If you want customers to share your products to their social media accounts, you can display social media icons on the product page.

Product page with Facebook, Twitter, and Pinterest buttons

To allow customers to share products to their social media accounts:

  • Check Enable product sharing.

Enable product reviews

If you have installed the Product Reviews app on your store, then you can choose to have product reviews displayed on your product page:

Supply star review

To display product reviews:

  1. If you have not installed the Product Reviews app, click the Product Reviews link to install it.

  2. Check Enable product reviews.

  3. To select a color for rating stars, click the Star color palette:

Supply star color

Collection page

With Supply, you can specify how collections are sorted in the collections page sidebar menu. You can choose to sort by product tags or by filter groups.

  1. In the theme editor preview of your store, open a collection page.

  2. Click the Sections tab.

  3. Click Collection.

  4. From the Products per row drop-down list, choose how many products to display in each row.

  5. From the Rows per page drop-down list, choose how many rows to display.

  6. Under Sidebar product filters, select whether to sort collections by product tag or by filter group.

  7. To show a comparison price when a product in the collection is marked down from its original price, or to compare with competitor prices, check Show compare at price.

  8. To show how much money customers are saving when a product is marked down, check Show saved amount.

  9. To allow product reviews on your collection pages, check Enable product reviews.

  1. Click Save.

Colors

Supply comes with several color options to provide finer control over which color is applied to various sections in your online store, including header and footer text, links, background color, and borders.

To set the color options for Supply:

  1. Click the General settings tab.

  2. Click Colors.

  3. Click the colored square for the element you want to change, and then select a color from the palette.

Selecting the checkered square sets the color to transparent:

Color picker transparent

Typography

You can choose the font that is used throughout your store, including the font used in header text, body text, navigation links, and buttons.

To set the font styles in Supply:

  1. Click the General settings tab.

  2. Click Typography.

You can apply fonts to three types of content: base content, header content, and navigation and buttons.

Base styles

Base styles sets the font for the majority of text in your site, except for in-line buttons, product prices, and headings.

To set base styles:

  • In the Base styles area, do any of the following:
    • Select a font from the Font drop-down list.
    • Select a font size from the Font size drop-down list.

Heading styles

Heading styles sets the font for titles and headings, including section headings, page titles, and product names and prices on the product page.

To set heading styles:

  1. In the Heading styles area, select a font from the Font drop-down list.

  2. Check Capitalize headings to automatically capitalize all headings used in the store.

This sets the font for the navigation bar and any buttons in the store, including the search bar, Add to cart button, and featured collection buttons on the home page.

To set navigation and button styles:

  1. In the Navigation and button styles area, select a font from the Main menu and button font drop-down list.

  2. Select a font size from the Main menu font size drop-down list.

  3. To capitalize main menu text, check Capitalize main menu items.

  4. Select a font size for button text from the Button font size drop-down list.

  5. To capitalize button text, check Capitalize buttons.

Favicon

With Supply, you can add a favicon to your store. A favicon (favorites icon) is a small icon that represents your website and provides a shortcut to it wherever the icon appears, for example:

  • your web browser tab
  • your web browser's history
  • icons on your desktop
  • next to your online store name when it is bookmarked.

Using a favicon helps brand your store and provides a polished look to your website. The recommended favicon size for Supply is 16 x 16px.

To add a favicon:

  1. Click the General settings tab.

  2. Click Favicon.

  3. In the Favicon image area, click Upload image to select an image from your local computer, or click the select from library link to select an image that you have already uploaded to your Shopify admin.

  4. Click Save.

Cart

With Supply, you can customize the cart page to include order notes, and select from four cart page styles.

To access the cart settings:

  1. Click the General settings tab.

  2. Click Cart.

Enable order notes

With Supply, you can provide a field on the cart page for customers to leave order notes, which can be used for gift messages, special requests, and delivery instructions.

Cart type

Supply offers four cart types:

  • With the Drawer cart type, the cart slides down from the top of the page. When the cart is closed, the cart text appears to fold up:
Supply cart drawer
  • The Flip cart type is like the Drawer cart type, except that the flip animation appears when the cart is opened and closed:
Supply cart flip
  • The Modal cart type is a pop-up window that appears on top of the page content. The pop-up window can be dismissed by clicking the X or by clicking outside of the pop-up window.
Supply cart modal
  • The Page cart type is a page in your online store. Customers access the cart page by clicking the cart link in the header, or by adding an item to the cart.
Supply cart page

Note

If you enable any of the other cart types, then you can still access the cart page by appending /cart to your store's URL.

Social media

Supply includes several options for integrating your store with social media, including Facebook, Twitter, and Pinterest.

To enable social media settings for Supply:

  1. Click the General settings tab.

  2. Click Social media.

Accounts

You can display links to your social media accounts in the footer of your site:

Supply social media buttons

Enter the URLs of your social media sites in the fields provided.

Sharing

You can also allow your customers to share content from your online store to their social media accounts. In the Sharing section, select the check box for each type of social media sharing you want to allow:

  • From the Button style drop-down list, choose the style for social media buttons in your store.

  • Check Share on Facebook to enable the Facebook sharing button for products or blog posts.

  • Check Tweet on Twitter to enable the Twitter sharing button for products or blog posts.

  • Check Pin on Pinterest to enable the Pinterest sharing button for products or blog posts.

Button style

Supply lets you choose one of three styles for social media buttons:

  • Normal displays thumbnail-size buttons with rounded edges:
Social media buttons normal
  • Large displays a larger version of the Normal button style:
Social media buttons large
  • Clean uses a simpler button design with just the social network logo against a white background and a thin border:
Social media buttons clean

Price format

With Supply, you can choose how product prices will appear in your store.

To set price format options in Supply:

  1. Click the General settings tab.

  2. Click Price format.

  3. If you sell in a currency that uses cents, then check the Show cents as superscript to show the price in superscript:

Supply superscript

Note

The superscript option will not work if your store uses a currency that does not use cents or partial units, if you use a currency switcher to show multiple currencies, or if the name of your currency has a period in its abbreviation (for example, RS.).

Checkout

This section lets you customize your store's checkout. Click here for more information about your store's checkout page.

Theme style

Supply comes with two theme styles:

  • Dark is a black and grey preset with automatically selected featured collections and a single collection row.

  • Blue is a blue and white preset with automatically selected feature collections and a single collection row.

To select a theme style:

  1. Click the General settings tab.

  2. Click Change theme style.

  3. Click the theme style you want to use.

  4. Click Change style.

Image tips

Best types of product images for Supply

Higher resolution photos will look more polished and professional in Supply, so images should be at least 1024 wide by 1024 pixels high. Images will be automatically scaled down when necessary.

Higher resolution photos are particularly important if you check Enable image zoom, which you can enable by opening a product page in the theme editor preview, and then clicking Product in the Sections tab.

The optimal width to height ratio for your product photos is a square.

Make the header smaller

There are a few ways that you can shorten the top section of your page.

If your logo is too big, then you can reduce its size by adjusting its maximum width in your theme settings. Reducing the width of your logo also reduces its height, because Shopify will scale down your logo while preserving its proportions. On your Customize Theme page, in the Header section, adjust the Custom logo width value. The default pixel value is 305. Use a smaller pixel value to reduce the size of your logo, and as a result reduce the height of your header.

Your logo might also contain invisible or white pixels that add to the white space above and below it. You can use a program such as Photoshop to trim those pixels from your logo image. After your logo has been trimmed, upload it again on your Customize Theme page. Trimming the white space in your logo image can significantly reduce the height of your header.

Make the slideshow smaller

Use landscape images, which are images that are wider than they are tall.

Although the Customize Theme page suggests that you upload images that are 1000px wide by 500px high, you can use smaller images. A width of 1000px is recommended so that your slides don't have any white space on the left and right on larger displays. Images that have a smaller width will be centered in your slideshow:

Supply small slides

Note

All slides should be the same width and height. Otherwise, your home page content will move around as the slideshow rotates from one slide to the next.

The following tips can help you improve your store's navigation when using Supply.

Add a drop-down menu

To add drop-down menus to your Main Menu, you need to create menus on your Navigation page.

If there are too many items in your Main Menu to fit on one line, then the last links don't fit will be added to a "More" drop-down menu.

Supply more drop down

This behavior isn't controlled strictly by the number of links in your Main Menu, although keeping that number down to five or six will help. To include more links, you can:

  • Make your navigation links smaller by reducing your Main menu font size in Typography on the General settings tab.
  • Use fewer characters for each link. For example, you can change 'Frequently Asked Questions' to 'FAQ', 'Contact Us' to 'Contact', 'Catalog' to 'Shop', and all occurrences of 'and' to '&'.

Having too many items in your navigation can make your site hard to use. With too many menu items, your customers could scan past important items. Try limiting your navigation to five or six items. Use drop-down menus if you want to give access to more than six pages.

A common mistake is adding links to every collection from the Main Menu. Instead, try listing the collections in a drop-down menu under a 'Shop' or 'Catalog' link. You could also break down the collections into groups, giving each group a drop-down menu. Or you can use product tags to create subcategories of products.

Product tips

The following tips will help you showcase your products using Supply.

Use advanced group filtering

If you have a lot of products, then you can enable subgroups to help your customers sort your products:

Supply advanced filtering
  1. Define your groups. In the image above, the groups are Brand, Focal Length, and Resolution.

  2. Export all your products into a .csv file.

  3. Prepend all existing tags with the name of the group you want them to be in, with the format Group_Tag Name. For this example, some of the tags would be Brand_Canon, Focal Length_18 - 55mm, and Resolution_12 MP. The left side of the underscore is the group name, and the right side is the tag for the product. Spaces can be included on either side of the underscore.

  4. Save your .csv. file and import the products back into your store. Make sure you check Overwrite existing products that have the same handle when uploading the file to prevent duplicate products from being created.

  5. Open a collection page in the theme editor preview. On the General settings tab, click Collection, and then enable the By group option.

Reorder filter groups and tags

Groups are ordered alphabetically, and so are the tags listed inside the groups. A Shopify expert can help you customize the order.

Pricing tips

The following tips help you set up pricing when using Supply.

Disable rounding of sale amounts

  1. Find the theme you want to edit, click Actions, and then click Edit HTML/CSS.

  2. On the left side, under Assets, click the timber.scss.liquid link to open your theme stylesheet in the online code editor.

  3. At the bottom of the file, add this:

     .sale-tag sup {
       display: inline;
       top: 0;
       font-size: 100%;
    
       &:before {
        content: '.';
       }
     }
    
  4. Click Save.

Cart tips

The following tip ensures your store's cart works properly when you have added JavaScript to Supply.

Change the cart type so that advanced JavaScript works

In Supply, any JavaScript you add to cart.liquid will not be executed in the drawer or modal carts. It will be executed only you append /cart to your store's URL. For example, http://your.store.url/cart.

You need to set your cart type to "page" if you want to add any of the following features to your cart page:

  • a shipping rates calculator
  • multiple currencies
  • gift-wrapping
  • cart attributes validation
  • a date picker
  • an 'I agree with terms' checkbox.

To change your cart type to "page":

  1. Click General settings.

  2. Click Cart.

  3. From the Cart type drop-down list, select Page.

  4. Click Save.

Want to discuss this page?

Visit the Shopify Community

Ready to start selling online with Shopify?

Try it free