Tips for Supply

This article outlines some helpful hints and best practices that can help you to set up Supply for your online store.

Image tips

Product images

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 enable image zoom on your product pages.

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

Make the slideshow smaller

To make the slideshow take up less vertical space on your home page, you should use landscape images, which are images that are wider than they are tall. You should upload images with a width of 1000px 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.

Header tips

If your header is too tall, then you can shorten it by adjusting your logo. If your logo is too big, then you can reduce its size by adjusting its maximum width. Your logo might also contain invisible or white pixels that add to the white space above and below it. You can use image editing software such as Photoshop to trim those pixels from your logo image. After your logo has been trimmed, upload it again. Trimming the white space in your logo image can significantly reduce the height of your header.

  1. Click Header.
  2. Enter the a new width in the Custom logo width (in pixels) field. 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. Reducing the width of your logo also reduces its height, because your logo is scaled down while preserving its proportions.
  3. Click Save.

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 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. The font size of these links is controlled by the Main menu font size in your typography settings.
  • 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.

You should avoid adding links to every collection from the main menu. Instead, try listing 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.

  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 select Replace any current products that have the same handle when uploading the file to prevent duplicate products from being created.

  5. Enable filtering by group on your collection pages:

    1. From your Shopify admin, go to Online Store > Themes.
    2. Next to Supply, click Customize.
    3. From the drop-down menu at the top of the page or Templates menu, select Collection pages.
    4. Click the Collection section.
    5. Under Sidebar product filters, select By group.
    6. Click Save.

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. On the left side, under Assets, open timber.scss.liquid.

  2. At the bottom of the file, add the following code:

     .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 executed in the drawer or modal carts. It is executed only if you append /cart to your store's URL. For example, http://your.store.url/cart.

If you want to add any of the following features to your cart page, then you need to set your cart type to Page:

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

Steps:

  1. Click Theme settings.
  2. Click Cart.
  3. From the Cart type drop-down list, select Page.
  4. Click Save.

Ready to start selling with Shopify?

Try it free