Automatically add Default Images to Shopify Products

Shopify is a great eCommerce platform due to its ease of use and fairly customizable, yet simple language. There are, of course, limitations to Liquid, just like any other language, but it overcomes those with its fairly low learning curve. One of the best ways to get a feel for a new language is to dive right in, with a simple project. And that's exactly what we're going to take a look at here.

Getting Started

Get a feel for the structure of your store, and get familiar with the folders that store your page logic, images, and custom scripts. We will be working with three folders in this tutorial, the Assets, Templates and Snippets folders. Using the Assets folder to store images directly associated with the layout and structure of your store is best-practice because it helps to organize your site and allows for clearer readability in the future. When working with theme files in Shopify, it is best to add images and files directly to the Assets folder instead of Settings => General. That folder should be reserved for Blog posts or specific product images you would like to embed, like product manuals. Another benefit of using the Assets folder is that we can access the file using Liquid, without the need for the full address of the file, ensuring flexibility. Let's get started.

Step 1

Get your coming soon image ready, and name it something simple, yet descriptive. For the sake of this tutorial, we will be using the image below with the name coming-soon.png. Depending on your theme, you may need to make sure the image is big enough to display properly and square to avoid having to add custom CSS. Here is our image.
Now that we have the image prepared, we will add it to our Assets folder. Just select the folder in the file tree on the left and click Add a new asset. Your file tree may look different, but the main folders will still be there.
Ensure that the image will properly show up, by the selecting it in the tree and previewing it on the right. If everything looks good, we can move on to the next step and write some code.

Step 2

In this step, we will be working with your product template file. In our case, this file is located in the Snippets folder with the name snippet-product-item.liquid. For the most part, it should be the same for you, but some themes can have a different structure and may name the file something different but the logic is the same. We are looking for the code that adds the product image to the product page. In our case, the tag is wrapped in an <a> tag, so we will simply add our code inside the <a> tag, just above the existing .

Assuming you named your new image file coming-soon.png, the code we will be adding inside the <a> tag should look like this:

Now that we have our code added, we need to move the existing tag inside, right after the {% else %} statement and before the closing {% endif %}. The final result should look something like this:

Save the file and preview in your browser. Navigate to a collection with an item missing an image, and you should see your new default, while the rest of your products look as they did before. If everything works, we can move on to Step 3 and update the code in our product template.

Step 3

This time we will be editing the products.liquid file in your Templates folder. Navigate to the file in your file tree, or simply use the search box. This step can vary depending on your theme and how you want the product page to work. Since we are adding a static default image to the product page, we do not want our users to click on the image to view a larger version. We will take the same exact code we used above and add it to the template file. Scroll until you see the <a> and <img> tags get called to display your images and paste our code directly above the <a> tag. Here is what it looks like in our file:

As you can see, we simply wrapped the existing image code in our own Liquid {% if %} statement. Now just save and preview. Products without images added should now display your static default image, and products with existing images should function exactly as before.

Review

Let's go over what exactly our code did in the steps above. The way Shopify is structured, specific template have access to specific template objects, in our case, we are using the product object and accessing its properties using dot notation. In the first line, we wrote {% if product.images.size == 0 %} we are constructing a liquid if statement and passing it a condition to check for. Our condition is fairly simple, we are calling the image size property on the product object and checking to see if equals zero. What this does is more or less check if the image exists. If there is no image, images.size will be zero. To further expand on this, product.images returns an array containing image links. By adding .size to the end, we are checking the length of the array. If it's zero, we know the array is empty and there are no images to display, so we show our default. This is the same as running array.length in JavaScript. If the condition we created returns true, then our custom code runs, if the condition returns false then whatever we added between the {% else %} and {% endif %} runs, in our case the original image code.

In most cases, when you are adding custom code to your Shopify theme, you want to organize it in a snippet however, since our code is fairly simple we just add it directly to the template.


Need Help?

No problem. All this can be difficult to accomplish, especially while you're busy with day to day business. That's where Dozen Pixels comes in. We can take care of all your marketing needs. From managing your Social Media presence to creating an effective advertising campaign, we are here to help. Our services range from web design to marketing and consulting. Not sure where to begin? Get in touch and we can discuss your goals and business needs.

Let's Chat.

Each client is unique, and so prices and solutions vary. No cookie cutter work here, so get in touch with us tell us a bit about your goals and needs, and we will layout a custom plan for you. No commitment, no hassle.