Create the best images for your Shopify gallery

Create the best images for your Shopify gallery

Shopify is an e-commerce platform that offers designers an elegant theme based approach to producing flexible online stores. While there are many guides or tutorials online detailing how themes are constructed, in this article, we will focus on one aspect that often catches me, and other users, out — that is using images in Shopify themes.

Shopify resizes your product images into a number of useful sizes, so you can just focus on what’s important – just avoid having to rejig layouts as you add products to your stores. Let’s begin by looking at how we should work with images that constitute part of a theme.

Theme Images

When creating a Shopify theme, you can add product images as much as you like, in any format and at any size to the assets folder (within your theme directory).You can use these images for backgrounds, sprites, icons, and branding. Referencing Shopify images in a theme is pretty straightforward.

Ok, let’s assume we have a brandlogo.png in your assets directory here’s how we can output it in any template using Liquid Basics – a template engine created by Shopify and used in themes:

{{ ‘brandlogo.png’ | asset_url | img_tag: ‘Logo’ }}

This method uses two Liquid filters to create an HTML img element. The first, asset_url, prepends the path to your assets folder for the current theme while the second, img_tag, takes this and creates an HTML img element complete with an alt attribute. If you omit the alt attribute, it will be blank. Here’s the end result:

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

There will be times, where you need a bit of HTML coding, here’s an alternative approach:

<img src=”{{ ‘brandlogo.png’ | asset_url }}” data-name=”logo” alt=”Logo” />

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

You can now reference any image in your assets folder in your CSS, here’s a good example:

body {

background: url({{ ‘brandlogo.png’ | asset_url }}) repeat-x top right;

Product Images

Just so you know, we also have full control over your Shopify theme images, and each time a product image is added to your store, Shopify takes that image and resizes for you into a number of predefined sizes.

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 sizes above will keep their aspect ratio and will be scaled accordingly. The “master” image size will always have the largest size available from the server. Currently it’s at 2048px x 2048px. If you upload an image bigger than 2048px, you won’t have access to its original form.

Please bear in mind that the originally uploaded product image will never be scaled up. So, if you upload a small image, it will remain small. It will keep the same size as the original size in the ‘grande’ or ‘large’ named sizes. This could mean that you will never be without a product image even if your preferred size does not technically exist.

It’s a good practice to always ask your clients to upload big images – so Shopify can then take care of the rest for you. Finally, product images aren’t added to the theme assets folder. They will remain with the store unless you deleted them and will be used in the current or other applied themes.

This table below will show you how two different product images are resized when uploaded to your Shopify store.

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

Shopify images are added via a theme setting. Shopify theme settings  allow developers to expose their own settings to respective store owners. These are very similar to “key-value” pairs, while 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 setting up theme settings, I strongly recommend reading the documentation to fully understand how flexible and powerful they can be.

Adding in a file upload option to your Shopify theme settings is pretty straightforward. You just have to add the following code to the settings.html file in your Shopify theme’s config folder.

<tr>

<td><label for=”logo_image”>Custom Logo</label></td>

<td><input type=”file” name=”brandlogo.png” id=”brand_logo_image” data-max-width=”640″ data-max-height=”300″ /></td>

</tr>

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

By specifying the name attribute, you never need to know the original name of the file – you just need to know what to call in, in your settings.html file. To put it simply, the name of the saved file is not determined by the original name of your uploaded file, but rather is equal to the name attribute of the file input tag. In this example, it would be brandlogo.png.

Moreover, since the name attribute has an image file extension (.png in the given example above) 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 , you will get an error message in the admin.

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

Referencing images added via Shopify theme settings is simple, here’s how:

{{ ‘brandlogo.png’ | asset_url | img_tag: ‘Brand Logo’ }}

As you can see, it’s exactly the same as the example I used for the theme images. As the file sits in your assets folder you do not have to use the global settings variable. I find it helpful to use the name attribute for image uploads to avoid naming conflicts.

It’s also easy to add a file to your assets folder that overwrites an upload made by you or any store owner.

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

<input type=”file” name=”ts-brandlogo.png” id=”logo_image” data-max-width=”640″ data-max-height=”300″ />

Shopiy goes a long way to making “handling product images” as easy as 1,2,3. Armed with a little “know-how” knowledge, you can really start letting your store designs flourish. Take note: Having a solid understanding of how images are resized is indeed an advantage!

 

No Comments

Post a Comment