Supply

Supply is a clean, easy-to-navigate theme perfect for merchants with large inventories and several collections. Features include prominent navigation, multiple home page 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.

Get Supply from the Shopify Theme Store

Theme editor

Use the theme editor to customize your theme. The theme editor toolbar is divided into Sections and Theme settings.

You can use sections to modify the content and layout of the different pages on your store. You can use theme settings to customize your store's fonts and colors, and make changes to your social media links and checkout settings.

Sections Theme settings Tips

Sections are customizable blocks of content that determine the layout of different pages on your online store.

• Home sections include features such as a slideshow or a newsletter signup that you can add, re-arrange, or remove. You can have up to 25 sections on your home page.

• Each type of page has its own sections. For example, the product page section determines the layout of each product page on your online store.

• Page sections are always in specific places on your online store. You can customize them, but you can't re-arrange or remove them.

• Each theme includes fixed sections, such as the header and footer, that show on every page of your online store.

You can learn about Supply's unique selection of sections and how to customize them to suit your business.

Tip

To see more videos, visit our YouTube channel.

Supply includes the following static sections:

• Header
• Footer
• Product pages
• Collection pages
• Collections list page
• Article pages

Dynamic sections

You can add, rearrange, and remove dynamic sections to customize the layout of your home page. Each theme has a unique set of dynamic sections to choose from.

Supply includes the following dynamic sections:

• Blog posts
• Collection list
• Featured collection
• Image with text
• Slideshow
• Featured product
• Newsletter
• Map
• Rich text
• Video
• Custom content

Header

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.

To customize the header:

1. Click the Sections tab.

2. Click Header.

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

Logo

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. Don't 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.

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.

Footer

In the footer section, you can edit the content that appears at the bottom of every page in your store. You can add the following features to your footer:

• social media icons
• payment icons
• a horizontal menu
• a newsletter signup
• custom text
• quick links

To customize the footer section:

Desktop

1. From your Shopify admin, go to Online Store > Themes.

iPhone

1. From the Shopify app, tap Store.
2. In the Sales channels section, tap Online Store.
3. Tap Manage themes.

Android

1. From the Shopify app, tap Store.
2. In the Sales channels section, tap Online Store.
3. Tap Manage themes.

1. Next to Supply, click Customize.

2. Click Sections.

3. Click Footer.

4. Show social media icons in your footer by checking Show social media icons. Choose which accounts to link to from the Social media theme settings.

5. Add payment icons, such as Mastercard or PayPal, to your footer by checking Show payment icons.

6. Add a horizontal menu to the bottom of your footer from the Legal menu area. To edit the default menu, click Edit menu. To change to a different menu, click Change, and then select an existing menu or click Create menu.

7. Add up to nine content blocks to your footer in the Content area:

   • Add a content block by clicking Add content. Select the type of block from the following choices:
     • Menu
     • Rich text
     • Newsletter signup
   • Move a content block by clicking the ⁞⁞ icon and dragging the block to a different place.
   • Remove a content block by clicking the block and then clicking Remove content.
   • Customize a content block by clicking the block and editing the settings.

8. Click Save.

Product pages

In the Product section, you can add or remove the following elements:

• Image zoom
• A quantity selector
• Stock information
• The product brand or vendor
• Savings information
• Related products
• A dynamic checkout button
• Social sharing icons
• Customer reviews

To edit the settings for product pages:

1. From the top-bar drop-down menu, select Product pages.

2. Click Sections.

3. Click Product.

4. To let customers zoom in by mousing over the product image, check Enable image zoom.

5. To show a quantity selector, check Show quantity selector.

6. To show your remaining stock when inventory runs low, check Show stock when less than 10 products available. For this message to show, you need to enable inventory tracking for the product.

7. To show a message that indicates when a sold-out product will be back in stock, check Show incoming stock transfer message when sold out. The message that shows is "Will be in stock after (date)". For this message to show, you need to create a transfer for the product.

8. To show the product brand or vendor, check Show product vendor. For a brand or vendor to show, you need to add a vendor to the product.

9. To show the amount that the customer is saving, check Show saved amount. The saved amount is the difference between the regular price and the compare at price of the product. The saved amount is rounded down to the nearest dollar. For example, if the price difference is $25.51, then the saved amount is "$25". For the saved amount to show, you need to set a compare at price for the product.

10. To show the compare at price, check Show compare at price.

11. To show a selection of related products at the bottom of the page, check Show related products. The collection that the product belongs to determines the related products that show. For related products to show, you need to create a collection for the product, or add it to an existing collection. If the product is not a part of a collection, then no related products is shown.

12. To show a dynamic checkout button, check Show dynamic checkout button.

13. To show social sharing icons, check Enable product sharing.

14. To show customer reviews of the product, check Enable product reviews. For reviews to show, you need to install the free Shopify Product Reviews app and receive reviews for your product.

15. To set the size of the variant picker, the Add to cart button, and the dynamic checkout button, select a size from the Variant picker and button size drop-down menu.

16. Click Save.

Collection pages

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.

Note

You must install the free Product Reviews app to enable product reviews.

1. Click Save.

Featured collections

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 is displayed. If you do not have a featured product, then the first product image in the collection is displayed.

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.

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.

Tip

If the images in your slideshow include text, then 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.

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 Select image, and then do one of the following:

   • To select an image you have already uploaded to your Shopify admin, click the Library tab.
   • To select a stock image from Shopify's Burst stock image collection, click the Free images tab. From here you can enter a search term, or browse the image categories.
   • To select an image from your local computer, click the Library tab, and then click the plus button.

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.

Newsletter

You can add a newsletter signup to your home page. This lets you collect customer email addresses for email marketing campaigns. You can learn more about email marketing on the Shopify blog.

To add a newsletter signup to your home page:

Desktop

1. From your Shopify admin, go to Online Store > Themes.

iPhone

1. From the Shopify app, tap Store.
2. In the Sales channels section, tap Online Store.
3. Tap Manage themes.

Android

1. From the Shopify app, tap Store.
2. In the Sales channels section, tap Online Store.
3. Tap Manage themes.

1. Next to Supply, click Customize.

2. Click Sections.

3. Click Add section > Newsletter.

4. Enter a heading for your newsletter signup in the Heading field. The default heading is "Subscribe to our newsletter".

5. Enter a subheading for your newsletter signup in the Subtext field. The default text is "Promotions, new products and sales. Directly to your inbox."

6. Click Save.

Video

You can add a video hosted on YouTube or Vimeo to your home page. Videos can engage customers and generate interest in your business.

To add a video to your home page:

Desktop

1. From your Shopify admin, go to Online Store > Themes.

iPhone

1. From the Shopify app, tap Store.
2. In the Sales channels section, tap Online Store.
3. Tap Manage themes.

Android

1. From the Shopify app, tap Store.
2. In the Sales channels section, tap Online Store.
3. Tap Manage themes.

1. Next to Supply, click Customize.

2. Click Sections.

3. Click Add section > Video.

4. Enter a heading for your video in the Heading field.

5. Enter the share link for your video in the Video link field.

   A YouTube share link looks like this: https://youtu.be/OTJXAUZY9t0. You can learn how to copy the share link for a YouTube video in this YouTube Help article.

   A Vimeo share link looks like this: https://vimeo.com/281332510. You can learn how to copy the share link for a Vimeo video in this Vimeo Help Center article.

6. Click Save.

Custom content

In the Custom content section, you can use HTML code to create custom content for your home page. For example, you can use HTML to format text blocks, create tables, or embed content from a third-party website.

To add custom content to your home page:

Desktop

1. From your Shopify admin, go to Online Store > Themes.

iPhone

1. From the Shopify app, tap Store.
2. In the Sales channels section, tap Online Store.
3. Tap Manage themes.

Android

1. From the Shopify app, tap Store.
2. In the Sales channels section, tap Online Store.
3. Tap Manage themes.

1. Next to Supply, click Customize.

2. Click Sections.

3. Click Add section.

4. In the Advanced layout area, click Custom content > Add.

5. Click Custom content, and enter the HTML code that you want to add to your home page.

6. Click Save.

Theme settings

You can use theme settings to customize the colors and typography on your online store. You can also set up links to your social media accounts, edit your cart settings, and add a favicon.

Supply includes the following theme settings:

• Colors
• Typography
• Favicon
• Cart
• Social media
• Price format
• Checkout

Colors

You can choose the colors for the different parts of your online store.

Customize your color settings

Desktop

1. From your Shopify admin, go to Online Store > Themes.

iPhone

1. From the Shopify app, tap Store.
2. In the Sales channels section, tap Online Store.
3. Tap Manage themes.

Android

1. From the Shopify app, tap Store.
2. In the Sales channels section, tap Online Store.
3. Tap Manage themes.

1. Next to Supply, click Customize.

2. Click Theme settings.

3. Click Colors.

4. For each type of content, click the color swatch to use the color picker. The Recently selected area shows colors that you have recently selected for your theme. The Currently used area shows colors that you are currently using in other parts of your theme.

   To set the color to transparent, click None.

5. Click Save.

Typography

You can set the font style and size for the text on your online store.

Customize your typography settings

Desktop

1. From your Shopify admin, go to Online Store > Themes.

iPhone

1. From the Shopify app, tap Store.
2. In the Sales channels section, tap Online Store.
3. Tap Manage themes.

Android

1. From the Shopify app, tap Store.
2. In the Sales channels section, tap Online Store.
3. Tap Manage themes.

1. Next to Supply, click Customize.

2. Click Theme settings.

3. Click Typography.

4. For each type of text, click Change to use the font picker.

5. Explore fonts by using the search field, or by clicking Load more.

   To see all of the available fonts, see Shopify's font library.

6. Click the name of the font that you want to use.

7. To change the font to a different style, such as bold or italic, click Regular. Next, click the style that you want to use, and then click Select.

8. Click Save.

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 Theme settings tab.

2. Click Favicon.

3. In the Favicon image area, click Select image, and then do one of the following:

   • To select an image you have already uploaded to your Shopify admin, click the Library tab.
   • To select an image from your local computer, click the Library tab, and then click the plus button.

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 Theme 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:

• The Flip cart type is like the Drawer cart type, except that the flip animation appears when the cart is opened and closed:

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

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

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

You can add social sharing buttons for your products and blog posts, and links to your social media accounts.

To customize the social media settings:

Desktop

1. From your Shopify admin, go to Online Store > Themes.

iPhone

1. From the Shopify app, tap Store.
2. In the Sales channels section, tap Online Store.
3. Tap Manage themes.

Android

1. From the Shopify app, tap Store.
2. In the Sales channels section, tap Online Store.
3. Tap Manage themes.

1. Next to Supply, click Customize.

2. Click Theme settings.

3. Click Social media.

4. To upload a social sharing image, in the Social sharing image area, click Select image or Explore free images.

5. To add links to your social media accounts, in the Accounts area, enter the links to your accounts in the fields provided. Enter full links, such as https://instagram.com/shopify, or https://twitter.com/shopify.

   Links to your social media accounts show in the footer of your online store.

6. To add social sharing buttons to your products and blog posts, in the Sharing area, check any or all the checkboxes.

   You can add the following sharing buttons:

   • Share on Facebook
   • Tweet on Twitter
   • Pin on Pinterest (not available for blog post sharing)

7. To change the style of the sharing buttons, from the Button style menu, select a style.

8. Click Save.

Note

To show social sharing buttons on product pages and blog posts, you also need to enable the buttons in the sections for those pages.

Price format

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

To set price format options in Supply:

1. Click the Theme 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:

Note

The superscript option doesn't 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.

Image tips

Best types of product images for Supply

Higher resolution photos look more polished and professional in Supply, so images should be at least 1024 wide by 1024 pixels high. Images are 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 scales down your logo while preserving its proportions. Using the theme editor, 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 using the theme editor. 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 theme editor 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 are centered in your slideshow:

Note

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

Navigation tips

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.

Main Menu best practices

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

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

• Make your navigation links smaller by reducing your Main menu font size in Typography on the Theme 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.

Remove the sidebar

To remove the sidebar from your store, you need to add some code to two of your theme files.

Desktop

1. From your Shopify admin, go to Online Store > Themes.

2. Find the theme you want to edit, and then click Actions > Edit code.

iPhone

1. From the Shopify app, tap Store.

2. In the Sales channels section, tap Online Store.

3. Tap Manage themes.

4. Find the theme you want to edit, and then click Actions > Edit code.

Android

1. From the Shopify app, tap Store.

2. In the Sales channels section, tap Online Store.

3. Tap Manage themes.

4. Find the theme you want to edit, and then click Actions > Edit code.

1. In the Sections directory, click collection-template.liquid.

2. Find has_sidebar in the file. Delete the following lines of code:

   {% if collection.all_tags.size > 0 %}
     {% assign has_sidebar = true %}
   {% endif %}

3. Click Save.

4. In the Sections directory, click collection-list-template.liquid.

5. Find has_sidebar in the file. Delete the following lines of code:

   {% if collection.all_tags.size > 0 %}
     {% assign has_sidebar = true %}
   {% endif %}

6. Click Save.

Product tips

The following tips 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:

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 Replace any current 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 Sections tab, click Collection, and then check the By group option.

Note

If you use single quotes, double quotes or ampersands inside your product tags, then grouped filtering does't 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

Desktop

1. From your Shopify admin, go to Online Store > Themes.

2. Find the theme you want to edit, and then click Actions > Edit code.

iPhone

1. From the Shopify app, tap Store.

2. In the Sales channels section, tap Online Store.

3. Tap Manage themes.

4. Find the theme you want to edit, and then click Actions > Edit code.

Android

1. From the Shopify app, tap Store.

2. In the Sales channels section, tap Online Store.

3. Tap Manage themes.

4. Find the theme you want to edit, and then click Actions > Edit code.

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

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

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

3. 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 is not be executed in the drawer or modal carts. It is be executed only if 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 Theme settings.

2. Click Cart.

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

4. Click Save.