How To Put Background Site Image Supply Theme Shopify

Read Fourth dimension: 14 mins Languages:

When starting out with a new platform, such every bit Shopify, at that place'southward a lot to acquire. Whilst Liquid, the template language used in Shopify themes, is very readable and like shooting fish in a barrel to get started with, one area of Shopify development which can often cause confusion for new theme developers is images. I believe the master reason for this lies with understanding the "type" of prototype that you lot run into within a Shopify theme. Over the course of this article we'll examine each different type of image and how to use them within a Shopify theme.

If yous are new to Liquid my three part series will requite y'all a solid grounding and will be helpful every bit you lot follow along. If yous are new to Shopify you can experiment with any of these techniques using a free evolution store. In order to create a evolution store sign up to the costless Shopify Partner program.

Five Simple Steps make use of theme images to provide their home page hero image — V Simple Steps brand use of theme images to provide their home page hero image

Image Types

In that location are four types of images in a Shopify theme. You'll piece of work with each of them beyond a theme, and then it'south of import to sympathize the differences betwixt them. Let'due south examine each one in turn:

Theme images: these are stored within a theme'due south assets folder and are specific to that theme. These are usually added to the theme past a theme developer.
Product images: these images are specific to a store and uploaded via the Shopify admin for each production.
Collection images: a unmarried epitome assigned to correspond a collection which is uploaded via the Shopify admin.
Article images: a single image assigned to correspond a web log article which is uploaded via the commodity edit page in the Shopify admin.

It'southward important to notation that product, collection and article images are all linked directly to the store. If you change the store's theme these images will remain in identify and volition piece of work with whatever given theme that references them.

one. Theme Images

Let's begin by looking at theme images. When creating a Shopify theme you can add whatsoever number of images, in any format and at whatever size to the assets folder within your theme directory. Typically these images can be used for backgrounds, sprites, and branding elements.

Referencing these images in a theme is very straightforward. Let'southward presume we have a logo.png in our assets binder; we can output it in any template using the following Liquid syntax:

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

This arroyo uses ii Liquid filters to create a fully formed HTML img element. The get-go, asset_url, prepends the total path to the assets folder for the current store's theme. The 2nd, img_tag, takes this and creates an HTML img element complete with alt attribute. If omitted the alt aspect volition be blank. Here'southward the end result:

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

Greats cleverly showcase their shoes using product images on their stores home page — Greats cleverly showcase their shoes using product images on their stores dwelling folio

Location, Location, Location

You'll discover that the src attribute references the Shopify CDN (Content Delivery Network). Every image that you add, regardless of its type, will be distributed to the CDN. This helps ensure fast delivery of your store'due south images to the customer.

Unlike cocky hosted image files you have no style of knowing the verbal server location for your image files. Luckily, you don't need to worry about this as the Shopify specific asset_url Liquid filter will provide the path for yous when your page is rendered.

Abstracting the full server path away to a filter also means that your themes are fully transferable from ane shop to another. The correct URL gets included depending on the theme and the store beingness viewed.

Adding Classes to the `img` Element

In the case higher up we added the alt aspect via the img_tag filter. Information technology'south too possible to add a further parameter which allows yous to add together classes to the img element. Hither's our lawmaking refactored:

{{ 'logo.png' | asset_url | img_tag: 'Logo', 'cssclass1 cssclass2' }}

This would result in the post-obit output:

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

More Control

In that location will of course be occasions where you need a little more control over your HTML. By omitting the img_tag filter we can build up our markup as we wish.

Hither's an approach which would allow yous to add your own attributes such as id:

<img src="{{ 'logo.png' | asset_url }}" alt="Logo" class="cssclass1 cssclass2" id="logo">

Referencing Images in CSS and JavaScript

It's also pretty easy to utilize these assets in both CSS and JavaScript files. In order to do this append .liquid (e.thousand. styles.css.liquid) to a CSS or JavaScript file in your assets folder and reference the image, in your CSS file, using the same Liquid lawmaking nosotros used in a higher place:

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

Theme images are relatively straightforward. Equally long every bit you understand how to use asset_url you lot can choose whether or non to add together the extra img_tag filter or build up the img element yourself.

Product, Collection and Commodity Images

Whilst we have full control over our theme images we are at the mercy of store owners when it comes to product images. Thankfully Shopify goes a long style to helping the states regain that control. Let's begin past looking at what happens when a merchant uploads an image in the Shopify admin.

Studio Neat product image on their Neat Ice Kit product page — Studio Not bad production image on their Neat Ice Kit product folio

Each time a product, collection, or article prototype is uploaded Shopify takes that image and automatically resizes it into a number of predefined sizes. These images are "namespaced" and then that we can easily reference them in our themes.

Here's the list of sizes with their corresponding image names:

xvi × xvi	pico
32 × 32	icon
50 × 50	pollex
100 × 100	small
160 × 160	compact
240 × 240	medium
480 × 480	large
600 × 600	grande
1024 × 1024	1024x1024
2048 × 2048	2048x2048
Largest image	master

Automatic Resizing

The values in a higher place specify the "maximum" premises of an image size. All resized images volition keep their aspect ratio and will be scaled accordingly.

This could mean that a "medium" picture has a width of 240px but a summit of simply 190px and also a acme of 240px but a width of 80px. It's for this reason virtually theme developers request that their clients upload foursquare images as they will be more predictable.

The "master" paradigm size will always track the largest size available from the server. Currently this is 2048px × 2048px. If you upload an prototype larger than 2048px wide you won't accept admission to its original form.

It's too worth noting that the originally uploaded product prototype will never exist scaled up in size. If you upload a tiny image, it volition remain tiny. You can of course reference the image past using any of the to a higher place image names. However, notation that if y'all asking a size that wasn't possible to create and so you volition exist served the closest available size.

Also blank in mind that if manipulated with CSS (e.g. width: 100%) the image may be scaled up and may get pixelated (depending on its format). When working with clients encourage them to upload high resolution square images where possible.

Finally information technology'due south worth remembering that we don't have access to product images in our theme'south folder. They are stored on the Shopify CDN and remain fastened to the store regardless of the theme that is applied.

2. Displaying Production Images

Unlike theme images product images do not make employ of asset_url. In social club to output a product paradigm we tin make use of the img_url Liquid filter instead. This is due to the fact that product images are related to the store and not part of the theme'southward assets.

img_url returns the URL of an image and accepts an image size as a parameter. Information technology can be used on the following Liquid objects:

production
variant
line detail
collection

Using the img_url filter is as follows:

{{ product | img_url: 'minor' }} {{ variant | img_url: 'small' }} {{ line_item | img_url: 'small' }} {{ collection | img_url: 'small' }}

Each of these volition return the fully qualified URL to the image stored on the Shopify CDN.

To demonstrate let'due south take a await at some example Liquid code from a typical product.liquid template. Equally this particular template has access to the product variable all of these examples will work. However, please annotation that they won't work as expected in other templates.

In this first example the value of epitome will represent each image in the collection and have a different value through each iteration of our Liquid loop. This variable can exist named however you meet fit; I am using image as it contextually it makes sense.

{% for image in product.images %} <img src="{{ paradigm | img_url: 'grande' }}"> {% endfor %}

Once you have been working with themes for sometime yous might detect other filters being used in relation to production images. Here are some alternatives that could be used in our example above, each of which would have the same output:

<img src="{{ image.src | img_url: 'grande' }}"> <img src="{{ image | product_img_url: 'grande' }}">

It'southward entirely up to yous which yous cull to apply. If yous prefer ane method over another you tin e'er exit a comment using {% comment %}…{% endcomment %} explaining your decision. This is especially useful when collaborating on themes.

Displaying product variant images

In addition to product images information technology's likewise possible to brandish images relating to the products variants. A variant can be explained equally a variation of the product. Let's say nosotros have a t-shirt with a detail impress on it. This t-shirt may come in green, bluish and cerise. Whilst the print stays the aforementioned the colour of the t-shirt itself is different. It's still the same product, but nosotros take chosen to enable the customer to pick from certain options. Often these will be size and colour.

Variants can also have their own price and inventory level. Information technology's possible to associate a particular image to each variant–in addition to the main product images. If your theme uses variant images you lot can display them in the following style in the product.liquid template:

{% for variant in product.variants %} {% if variant.paradigm %} <img src="{{ variant | img_url: 'small' }}"> {% endif %} {% endfor %}

`alt` Aspect

If y'all wish to add the alt attribute to your output you lot tin can do so as follows:

{% for image in production.images %} <img src="{{ image | img_url: 'grande' }}" alt="{{ image.alt }}"> {% endfor %}

This volition output the alt text entered in the Shopify admin, or blank if null was entered. Alternatively, you could exercise the following if yous choose to apply the img_tag filter:

{{ paradigm | img_url: 'grande' | img_tag: image.alt }}

Featured Images

In our above case we used a Liquid loop to access each of the images associated with a product in turn. If the product had ane image nosotros'd output one image, if it had ten associated with it the loop would output ten images.

In Shopify the first image listed in the admin is also known as the "featured image". Thankfully outputting the "featured image" is prissy and straightforward and doesn't crave a loop. Here's an case that would piece of work in the product.liquid template:

<img src="{{ product.featured_image | product_img_url: 'grande' }}" alt="{{ product.featured_image.alt }}">

Every bit always there are alternative means you can achieve this, including:

<img src="{{ production | img_url: 'grande' }}"> <img src="{{ production.images.first | img_url: 'grande' }}"> <img src="{{ product.images[0] | img_url: 'grande' }}">

You lot can as well extend the syntax to include the alt attribute in the second and 3rd examples:

<img src="{{ product.images.first | img_url: 'grande' }}" alt="{{ product.images.beginning.alt }}"> <img src="{{ product.images[0] | img_url: 'grande' }}" alt="{{ product.images[0].alt }}" >

3. Collection Images

I oftentimes describe a collection in Shopify as a logical grouping of products. For instance it could be t-shirts, jeans, and dresses for an clothes store. A production tin can sit in zero, one, or many collections, allowing for easy categorisation and discovery.

Helm Boots make use of collection images to guide customers into different areas of their store — Helm Boots make apply of drove images to guide customers into different areas of their shop

Often, merchants volition wish to include a page on their store detailing all of their available collections. The template that makes this possible in Shopify is listing-collections.liquid. Here's an example of how you can loop over every drove and output the prototype associated with it from within that template:

{% for collection in collections %} {{ collection.image | img_url: 'compact' | img_tag: alt: drove.championship }} {% endfor %}

You could extend this example further to ensure that you catered for the situation where a collection prototype hadn't been added:

{% for collection in collections %} {% if collection.image %} {{ collection.image.src | img_url: 'medium'| img_tag: collection.title }} {% else %} {{ 'collection-image-default.png' | asset_url | img_tag }} {% endif %} {% endfor %}

In this example we are using a theme image in identify of the collection prototype. This volition only be rendered if there is non an associated collection epitome. In order for this to piece of work as intended you'll need to ensure in that location is an epitome titled collection-prototype-default.png within your theme's assets folder.

4. Article Images

Commodity images function in much the same way as product and collection images. Here'southward an example:

{% if article.epitome %} {{ article | img_url: 'medium' | img_tag: commodity.championship }} {% endif %}

The Shopify Partner Blog uses article images to provide hero images for each post

If the article has an associated paradigm and so it volition be displayed and given the alt attribute of the article's title. At that place are a few means collection and article images tin come in useful:

To create a grid of images in a list folio
To use as background images which yous can overlay text

Images Uploaded via "Customise Theme"

The terminal piece of the puzzle involves images uploaded via the "Customise Theme" option.

Every theme has a config folder. In it you'll notice a file chosen settings_schema.json. This file helps us generate an admin interface that allows merchants to add information such as text, boolean values (truthful/fake), select fonts, upload images and much more. We are able to ascertain these interface elements using JSON.

To enable an prototype upload y'all need to add together a new element to the settings_schema.json file in the post-obit format:

{ "type": "paradigm", "id": "logo.png", "label": "Text", "max-width": 480, "max-height": 200, "info": "Text" }

Here's an example based on adding a logo for the store:

{ "type": "image", "id": "shop_logo.png", "label": "Shop logo", "max-width": 480, "max-meridian": 200, }

Images uploaded through the "Customize Theme" folio are added to the theme'south assets folder. Every bit such I didn't include them as a split up image blazon at the beginning of the article.

The image file is saved with a proper name and format which matches the id attribute regardless of the file's original name or format. For example paradigm.jpg file would be saved every bit shop_logo.png. 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 a .png file, the user will receive an error message in the admin.

You'll discover that the input type is paradigm which results in an upload button appearing in the browser. Y'all can likewise specify a maximum acme and width for an epitome upload past using data attributes. Shopify will then maintain the aspect ratio of the uploaded image while constraining it to those maximum dimensions.

Referencing images added via "Customise Theme" is done in the same way as all other theme images:

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

Name Spacing Customise Theme Uploads

One affair y'all might wish to consider is using the id attribute to "namespace" your theme setting uploads. This fashion they are easy to spot in the assets folder as they will exist grouped together. It also helps accidentally overwriting files that y'all add into your theme.

I often utilize the ct- prefix as follows:

{ "type": "image", "id": "ct-shop_logo.png", "label": "Shop logo", "max-width": 480, "max-height": 200, }

Cropped Square Images

In the eye of 2015 Jason Bowman noticed that the Shopify checkout was displaying cropped foursquare images. You tin can read near his discovery on his Freak Design weblog.

Jason's investigations led him to find that all the checkout images were appended with _cropped. Here's an example:

product-cropping-examination-001_1024x1024.png

when cropped becomes:

product-cropping-test-001_1024x1024_cropped.png

The cropping works for all sizes except Master. In order to utilise cropped images nosotros add together _cropped to our img_tag filter. Here's an example for a product featured image:

{{ product.featured_image | product_img_url: "medium_cropped" }}

At the time of writing this is undocumented then there's always the possibility it may modify, but I wanted to include it.

Final Thoughts

Nosotros've covered a lot of ground in this commodity merely hopefully it's shown you how flexible Shopify is when information technology comes to working with images in a theme.

Images are an integral function of any ecommerce store. Agreement how images are managed and manipulated in a Shopify theme is an important part of learning Liquid and the Shopify platform.

Hopefully you'll agree that the tools within the Shopify platform and Liquid allow you lot a lot of flexibility when it comes to working with images in your themes.

Did you observe this mail useful?

Keir Whitaker

Keir Whitaker is the Uk based Shopify Designer Advocate and and co-host of the web manufacture focused podcast The Back to Forepart Evidence. He writes and tweets nigh ecommerce, the spider web manufacture, podcasting, remote working and travel.