Custom Image Sizes

The most common question I receive is, “How do I make my product images the same size as the Vogue demo site?” Fortunately, your shop can look just like this with a little creativity.

For these modifications to work correctly, you must be using Vogue downloaded from this site. When using Vogue applied from your Shopify admin, you will experience issues with the product page.

Before we get into the tutorial, it’s important to understand how Shopify handles product images. After an image is uploaded through the shop admin, Shopify stores it on a separate image server, which can then be accessed using Liquid within the theme templates. A few default sizes are available using a Liquid Filter for product images.

After some begging and pleading (not really), Tobi recently added original as a variant of the product_img_url filter. This variant is what makes custom image sizes possible, but does require a slight work-around. So, let’s do it already…

Product Images
We’ll need to create an image to act as your custom image that will display on index.liquid and collection.liquid. We’ll also create a custom AND full size image to display on product.liquid.

Using Photoshop or another photo editing tool, open your product image and…

1. Resize/Crop to 175×130 pixels, then save as title-feature.jpg.
2. Re-open original and resize/crop to 356×265 pixels, then save as title-product.jpg
3. Re-open original and resize/crop to 480×360 pixels, then save as title.jpg.

After these images have been created, upload them to your product images. Make sure title-feature.jpg is in the first position and title-product.jpg is in the second position. Any product in the third position or greater should be sized like title.jpg and the quantity is unlimited. Do this for all of your products.

Edit the Templates
Now that you have uploaded the appropriate product images, we need to edit a bit of code in the theme templates. First, open index.liquid and locate…

<img src="{{ product.images.first | product_img_url: 'small' }}" 
alt="{{ product.title }}" />

and change to…

<img src="{{ product.images.first | product_img_url: 'original' }}" 
alt="{{ product.title }}" />

Save, then open collection.liquid and make the same changes as above. Next, open product.liquid and locate…

{% for image in product.images %}{% if forloop.first %}
<div id="product-image">
    <a href="{{ image | product_img_url: 'original' }}" rel="lightbox[images]" 
    title="{{ product.title }}"><img src="{{ image | product_img_url: 'medium' }}" 
    alt="{{ product.title }}" /></a>
</div>

and replace with…

{% for image in product.images offset: 1 %}{% if forloop.first %}
<div id="product-image">
    <a href="{{ image | product_img_url: 'original' }}" rel="lightbox[images]" 
    title="{{ product.title }}"><img src="{{ image | product_img_url: 'original' }}" 
    alt="{{ product.title }}" /></a>
</div>

Complete
Go to your homepage and it should now look like this Vogue demo site. All done!