Edit this page

Adding images

Adding images to your design

If you want to include images in your layout you will have to use the asset_url filter. If your images are called via a CSS stylesheet then you do not need to use asset_url - except if they are used in a theme settings form. Let's insert an image into our layout...

{{ 'image-name.png' | asset_url | img_tag }}

If you want to add alt text to your image use this format...

{{ "image-name.jpg" | asset_url | img_tag: "alt text goes here" }}

You may be wondering why the URL of the image's look funny. This is because Shopify uses something called a Content Delivery Network or CDN. Shopify host your images in different physical locations accross the world so that it will take the same amount of time to load your site in whatever country you are in.

Image sizes

Every image you upload to your Shopify store is automtically resized into 9 sizes for you to use...

For example if I upload an image that is 700x500 and I insert the "medium" image size into my layout the dimensions of the image will be 240x171

If I upload an image that is 700x500 and I I insert the "medium" image size into my layout the dimensions of the image will be 71x240

If you are generating product images you can use the filter product_img_url to specify the image size. Foe example...

<a href="{{product.url}}"><img src="{{ product.featured_image | product_img_url: 'thumb' }}" /></a>

Here is a more advanced example that generates all the product images through through a for loop statement

{% for image in product.images %}
  {% if forloop.first %}
      <a href="{{ image | product_img_url: 'grande' }}"><img src="{{ image | product_img_url: 'grande' }}"/></a>
  {% else %}
     <a href="{{ image | product_img_url: 'grande' }}"><img  src="{{ image | product_img_url: 'medium' }}"/></a>
  {% endif %}
{% endfor %}

Using images in the theme setting form

If you use a theme settings form and then you must use the asset_url filter for any images you let the user upload. This is to avoid caching issues...

body {background: url( {{ settings.bg_image  | asset_url }} )}