We’re in the midst of working on a storefront for UnmatchedStyle here and one of the things is figuring out a good platform for it all. We’re looking hard at Shopify so in that spirit here is a how-to article written by Keir Whitaker on using images in their themes.

Shopify, the hosted ecommerce platform, offers designers an elegant theme based approach to producing flexible storefronts. Whilst there are many tutorials online detailing how themes are constructed I would like to focus on one aspect that often catches me, and others, out — that is using images in Shopify themes.

Surely images can’t be that hard to grasp? To a point I agree but they are still worth investigating – especially when you know Shopify kindly resizes your product images into a number of useful sizes.

As well as product images we have access to theme image assets as well as those added via the theme settings admin panel.

Armed with a little bit of knowledge theme designers can avoid having to rejig layouts as clients start to add products to their stores. Let’s begin by looking at how we work with images that constitute part of a theme.

Theme Images

When creating a Shopify theme you can add any number of images, in any format and at any size to the assets folder within your theme directory. Typically these images can be used for backgrounds, sprites for icons and branding.

Referencing these images in a theme is very straightforward. Let’s assume we have a logo.png in our assets directory here’s how we can output it in any template using Liquid – the template engine created by Shopify and used in themes:

{{ 'logo.png' | asset_url | img_tag: 'Logo' }}

This approach uses two Liquid filters to create a fully formed HTML img element. The first, asset_url, prepends the full path to the assets folder for the current stores theme whilst the second, img_tag, takes this and creates a HTML img element complete with alt attribute. If omitted the alt attribute will be blank. Here’s the end result:

<img src="//cdn.shopify.com/s/files/1/0222/9076/t/10/assets/logo.png?796" alt="Logo">

There will be occasions where you need a little more control over the HTML, here’s an alternative approach:

<img src="{{ 'logo.png' | asset_url }}" data-name="logo" alt="Logo" />

It’s also pretty easy to use these assets in your CSS files. In order to do this simply add .liquid to your themes css file, e.g: screen.css.liquid

You are now able to reference any image in your assets folder in your CSS, here’s an example:

body {
	background: url({{ 'logo.png' | asset_url }}) repeat-x top left;
}

Product Images

Whilst we have control over our theme images we are somewhat at the mercy of store owners when it comes to product images. Thankfully Shopify goes a long way to helping us regain that control.

Each time a product image is added Shopify takes that image and resizes for us into a number of predefined sizes. These are handily “namespaced” for use in our themes.

Here’s the list of sizes and image names:

• 16 x 16 – pico
• 32 x 32 – icon
• 50 x 50 – thumb
• 100 x 100 – small
• 160 x 160 – compact
• 240 x 240 – medium
• 480 x 480 – large
• 600 x600 – grande
• 1024 x 1024 – 1024 x 1024
• 2048 x 2048 – 2048 x 2048
• Largest image – master

Resizing

The values above specify the “maximum” bounds of an image size. All resized images will keep their aspect ratio and will be scaled accordingly. This could mean that a “medium” picture has a width of 240px but only a height of 190px and likewise a height of 240px but only a width of 80px.

The “master” image size will always track the largest size available from the server. Currently this is 2048px x 2048px. If you upload an image bigger than 2048px wide you won’t have access to it’s original form (this is only the case with product images, not theme images as described above).

It’s also worth remembering that the originally uploaded product image will never be scaled up. If you upload a tiny image, it will remain tiny. It will keep the same size as the original size in the ‘large’ and ‘grande’ named sizes. This means that you will never be without an image even if your preferred size doesn’t technically exist.

As a rule of thumb it’s always advisable to ask your clients to upload big images – Shopify then takes care of the rest for you. Finally bear in mind that product images aren’t added to the theme assets folder. They remain with the store unless deleted and will be used in the current or other applied themes.

Real World Examples

The table below outlines how two different images are resized when uploaded to Shopify. Notice how the portriat image isn’t scaled up beyond 500px wide by 1000px high.

Maximum size (w) x (h)	Name	Landscape — 2896(w) x 1944(h)	Portrait — 500(w) x 1000(h)
16 x 16	pico	16 x 11	8 x 16
32 x 32	icon	32 x 21	16 x 32
50 x 50	thumb	50 x 34	25 x 50
100 x 100	small	100 x 67	50 x 100
160 x 160	compact	160 x 107	80 x 160
240 x 240	medium	240 x 161	120 x 240
480 x 480	large	480 x 322	240 x 480
600 x 600	grande	600 x 403	300 x 600
1024 x 1024	1024 x 1024	1024 x 688	500 x 1000
2048 x 2048	2048 x 2048	2048 x 1375	500 x 1000
Largest image	master	2048 x 1375	500 x 1000

Images via Theme Settings

The final piece of the puzzle are images added via a theme setting. Shopify theme settings allow theme developers to expose their own settings to the store owner. These are very similar to key-value pairs, whilst most values will just be a string of data in the case of Shopify themes the value can also be a file upload.

If you would like to learn more about theme settings I strongly recommend reading the Shopify docs to get a full understanding of how flexible and powerful they can be.

Adding in a file upload option to your theme settings is relatively straightforward. All you need to do is add the following code to the settings.html file in your theme’s config folder.

<tr>
<td><label for="logo_image">Custom Logo</label></td>
<td><input type="file" name="logo.png" id="logo_image" data-max-width="940" data-max-height="300" /></td>
</tr>

You’ll notice that the input type is file which results in an upload button appearing in your browser. You’ll also see that I have specified a name attribute which will allow us to reference the image in a theme.

By specifying the name attribute we never need to know the original name of the file – we just need to know what we call in in our settings.html file. In other words the name of the saved file is not determined by the original name of the user’s uploaded file, but rather is equal to the name attribute of the file input tag. In the example above it would be logo.png.

Furthermore, since our name attribute has an image file extension (.png in the example) Shopify will attempt to convert the uploaded file to the appropriate format (PNG) before saving it. If Shopify is unable to convert the file to PNG (such as an SWF file), the user will get an error message in the admin.

You can also specify a maximum height and width for an image upload by using data attributes. Shopify will then maintain the aspect ratio of the uploaded image while constraining it to those maximum dimensions. Unlike product images images added this way will be added to the theme’s asset folder.

Referencing images added via theme settings is amazingly simple, here’s an example:

{{ 'logo.png' | asset_url | img_tag: 'Logo' }}

You might notice that’s exactly the same as the example I used for theme images. As the file resides in your assets folder you don’t need to use the global settings variable. I often find it helps to use the name attribute for image uploads cleverly to avoid naming conflicts. It’s very easy to add a file to your assets folder that overwrites an upload made by the store owner.

One way to do this is prefix the name, I often use ts- to signify a theme setting:

<input type="file" name="ts-logo.png" id="logo_image" data-max-width="940" data-max-height="300" />

Next Steps

Shopify goes a long way to make working with images very easy. Armed with a little knowledge you can really start letting your designs flourish.

I encourage you to have a play around with images before devling into your next Shopify theme. Setting up a sandbox store is very easy, all you have to do is join the free Shopify partner programme and create a “dev” shop.

Once you have a solid understanding of how images are resized you can use this to your advantage — either by employing alternative sizes that can be loaded in via JavaScript (using picture, srcset or one of the many polyfills available) as well as catering for devices that offer high density displays.