Shopify Liquid Placeholder Images

When working on a Shopify site, prototyping and mocking up a site to show progress can go a great way towards calming the nerves of a new client. In these instances, it's useful to have suitable placeholder images to help fill in space and give a modest sense of your direction.

If you know your client has a good sense of humor then funny cat gif's may be the way to go. But if you're looking to save a bit of time, show a faster product, or be taken a bit more seriously (or all of the above) then you should be utilizing Shopify's built in SVG placeholder images.

These placeholder images are neutral, scale beautifully, and will load quickly because they are handled natively on the Shopify platform. You can choose from a variety of categories and sizes to fit in various places such as a generic image, six different collection images, multiple lifestyle banner images, and six product images to help you flesh out collection pages with fresh not stale imagery.

The placeholder_svg_tag filter

Accessing these images is very easy. Simply echo out the image type, followed by the placeholder_svg_tag filter. Some examples follow:

{{ 'product-1' | placeholder_svg_tag }}

{{ 'lifestyle-2' | placeholder_svg_tag }}

Adding a custom class to your placeholder images can also be handled easily by simply adding a class name parameter as such:

{{ 'lifestyle-2' | placeholder_svg_tag: 'custom-class' }}

More great examples and a list of the various placeholder image types can be found on the official Shopify site.