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.

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.

To learn more about the unique theme settings available for Supply, including some great examples for how to use them, click the Settings button on this page. To access tips and tricks for making your store look amazing, click the Tips button.

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

Tip

If the Supply settings in the Customize theme page of your Shopify admin don't match the settings in this article, then you might need to update your theme.

Presets

Supply comes with two presets:

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

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. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

  2. In the Supply section, click Customize theme.

  3. Click Colors.

  4. 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. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

  2. In the Supply section, click Customize theme.

  3. Click Typography.

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

Base styles

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

To set the base style:

  • Select a font from the Base Family drop-down menu.
  • Select a font size from the Base Font Size drop-down menu.

Heading styles

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

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.

Supply includes some unique settings for the header of your store:

Supply header

You can upload a logo to display in your header, add a favicon to your store, and display a message to your customers.

To access the Header options for Supply:

  1. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

  2. In the Supply section, click Customize theme.

  3. Click Header.

With Supply, you can have a logo or text with your store's name in the 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.

By defining a value in the custom logo width field, you can change the width of your logo image. The maximum value in the field is the original width of the logo image. Increasing the value beyond this can cause distortion and loss of quality.

Favicon

You can add a favicon to your store. The recommended favicon size for Supply is 16 x 16px.

Message

Supply allows you to place a message in your header up to 55 characters in length. This message appears above the search bar:

Header message

Supply lets you add a navigational 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.

To add footer information to your Supply store:

  1. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

  2. In the Supply section, click Customize theme.

  3. Click Footer.

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

Contact information

If you want your store's contact information to display at the bottom of the page, then check Show footer contact info. In the Footer contact title field, enter the title of the contact information, for example "Get in Touch". In the Footer contact text field, enter the contact information, for example your phone number or email address.

Supply footer contact

Tip

The Footer contact text field recognizes HTML, which allows you to create links or change the style of the text.

If you check Show footer contact info and then leave the title and text content blank, then fallback text will be appear in the footer:

Supply footer contact blank

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

Newsletter

The Newsletter setting allows you to show a newsletter sign-up form in your store's footer text. By default, Supply's newsletter section is compatible with MailChimp, and requires a form action URL from your MailChimp account to function.

You can display links to legal information in your store's footer text. Legal information can include your terms of service, your privacy policy, and your return policy.

Check Show legal links, and then select a menu from the Legal link list drop-down menu.

Home page

The Home page section lets you specify the order in which content sections appear in your store's home page. Supply lets you display and reorder the following four content sections:

To specify how content sections are displayed in your home page:

  1. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

  2. In the Supply section, click Customize theme.

  3. Click Home page.

  4. Select the sections that you want to display from the drop-down menus, in the order that you want them displayed on your home page.

Note

If you do not want to display all four content section types, then select -None- from one of the drop-down menus. Additionally, it is not recommended that you select the same content section type from two lists, because that content section will be displayed twice in your home page.

Home page - slideshow

The Home page - 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.

Note

If the images in your slideshow include text, then it is recommended that you set a slower transition speed to give your customers enough time to read each slide.

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. You can also provide alt text for each image, which displays if the image fails to load. Alt text is also used for search engine optimization (SEO) and by screen readers.

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 upload images for your home page slideshow:

  1. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

  2. In the Supply section, click Customize theme.

  3. Click Home page - slideshow.

  4. From the Transition time drop-down menu, select the frequency, in seconds, that you want the images to rotate.

  5. To add slide images, for each slide number (slide 1 to slide 6) check the Enable checkbox, and then click Choose file to upload an image.

  6. To add a link URL, enter the URL address in the Link URL field.

    Note

    If you are linking to a page in your online store, you don't need to include the root URL. For example, if you want to link to your collections page, you can type "/collections/all" instead of "https://mystorename.com/collections/all".

  7. Enter the image's alt text in the Alt text field.

The Home page - featured content section lets you select a page in your store to feature on your home page. By default, nothing is selected. If you haven't set up pages for your store yet, then there is a "Welcome" page in your Shopify admin that you can use as your featured content. You can also can create or assign another page to this section.

Pages can contain any combination of text, images, or videos. You can select any page available in your Shopify admin, regardless of whether you've set the page to "visible" or "hidden".

To select a page to feature on your home page:

  1. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

  2. In the Supply section, click Customize theme.

  3. Click Home page - featured content.

  4. Select a page from the Choose page drop-down menu.

Use the Home page - featured collections section to select up to 6 product collections to feature on your home page. You can specify which collections to feature, or you can automatically display collections.

If you choose to automatically display collections, then Shopify will display the first 6 collections in your Shopify admin, in alphabetical order. If you have less than 6 collections, then Shopify will display all collections randomly.

When you 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. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

  2. In the Supply section, click Customize theme.

  3. Click Home page - featured collections.

  4. If you want to display random collections on your home page, then click Automatically.

  5. If you want to select which collections to display, then click Manually, and choose the collections you want to feature on your home page using the drop-down menus.

  6. If you selected Manually, then choose each collection you want to feature on your home page from the drop-down menus.

Home page - 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. Displaying collection rows on your home page is a great way to feature new arrivals or collections that are on sale.

Note

Although you can display a maximum of 20 products on your home page, it is not recommended because it could overwhelm your customers and result in slower loading times.

  1. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

  2. In the Supply section, click Customize theme.

  3. Click Home page - collection rows.

  4. Select the Enable check box for each collection you want to feature, and then use the drop-down menus to make your selections.

Product page

The Product page section of Supply's Customize Theme page lets you set display options for your product pages. With Supply, you can make the following customizations:

  • 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

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:

Supply zoom pan

Note

For image zooming to work with Supply, product images must be larger than 480 X 480px.

  1. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

  2. In the Supply section, click Customize theme.

  3. Click Product page.

  4. Check the Enable image zoom check box.

Show quantity selector

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

  1. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

  2. In the Supply section, click Customize theme.

  3. Click Product page.

  4. Check the Show quantity selector check box.

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.

  1. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

  2. In the Supply section, click Customize theme.

  3. Click Product page.

  4. Check the Show remaining quantity message check box.

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
  1. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

  2. In the Supply section, click Customize theme.

  3. Click Product page.

  4. Check the Show product vendor check box.

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. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

  2. In the Supply section, click Customize theme.

  3. Click Product page.

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

  5. To show a comparison price, check the Show compare at price check box.

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

Enable product reviews

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

Supply star review
  1. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

  2. In the Supply section, click Customize theme.

  3. Click Product page.

  4. Check the Enable product reviews check box.

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

You can also specify the product image size:

  1. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

  2. In the Supply section, click Customize theme.

  3. Click Collection page.

  4. From the Product image size drop-down menu, select either Small or Medium.

    Note

    Small images are 160px wide, and Medium images are 180px wide.

  5. Select whether to sort collections in the collections page sidebar by product tag or by filter group.

Cart page

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

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 4 different cart styles:

  • With the Drawer cart style, 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 style is like the Drawer cart style, except that the flip animation appears when the cart is opened and closed:
Supply cart flip
  • The Modal cart 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 is a separate 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.

To set cart page options:

  1. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

  2. In the Supply section, click Customize theme.

  3. Click Cart page.

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. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

  2. In the Supply section, click Customize theme.

  3. 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:

  • Check Enable product sharing to create social media sharing buttons on product pages.

  • Check Enable blog post sharing to create social media sharing buttons on blog posts.

  • Check Show number of shares to display the number of times a specific product or blog post in your store has been shared to Facebook or Twitter, or pinned on Pinterest. This option is not applicable to Fancy or Google Plus.

  • From the Button style drop-down menu, 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.

  • Check Add to Fancy to enable the Fancy sharing button for products or blog posts.

  • Check +1 on Google Plus to enable the Google Plus 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. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

  2. In the Supply section, click Customize theme.

  3. Click Price format.

  4. Check the Show dollar sign check box to display a currency symbol beside product prices. The symbol for your store's selected currency will be displayed.

  5. 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 on customizing your store's checkout page.

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 use the Image Zoom function, which you can enable from your Customize Theme page in the Product page section:

Supply enable zoom

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

Supply reduce height of 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.

If you still see too much white space at the top and bottom of your header, then you can reduce that white space by half by editing your theme's stylesheet. Click here for instructions. Copy and paste the provided CSS at the bottom of your stylesheet.

Make the slideshow smaller

Use landscape-sized 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

It is important that that all slides share 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 Navigation Font Size under Typography on your Customize Theme page.
  • 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.

If you still want a lot of links in your Main Menu, then click here to learn how to disable the "More" drop-down menu.

Note

Disabling the "More" behavior is not supported by Shopify.

Remove the sidebar

To remove the sidebar, you will need to delete some code in two of your theme files.

  1. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

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

  3. On the left side, under Templates, click the collection.liquid link to open your default collection template in the online code editor.

  4. Delete these 3 lines of code:

   {% if collection.all_tags.size > 0 %}
     {% assign has_sidebar = true %}
   {% endif %}
  1. Save your work.

  2. Make the same edit to your collection.list.liquid template file.

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 of 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. Enable Filter by groups on your Customize Theme page, on the Collection page.

    Supply theme setting for grouped filtering

Caution

If you use single quotes, double quotes or ampersands inside your product tags, then grouped filtering will not work as expected.

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. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

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

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

  4. At the bottom of the file, add this: ```css .sale-tag sup { display: inline; top: 0; font-size: 100%;

    &:before { content: '.'; } } ```

  5. Save your work.

Cart tips

The following tips help improve your store's cart function when using Supply.

Advanced JavaScript breaks the cart

In Supply, the JavaScript you add to cart.liquid will not be executed in the drawer or modal carts. It will be executed only when you visit your store at the URL 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

On your Customize Theme page, in the Cart page section, set the Cart type setting to Page:

Supply disable ajax

Want to discuss this page?

Visit the Shopify Community

Ready to start selling online with Shopify?

Try it free