Using Placeholder Images for Products with the placeholder_svg_tag filter

Using Placeholder Images for Products with the placeholder_svg_tag filter
Placeholder Images - SVG Placeholder Shopify TagPlaceholder Images - placeholder svg tag

When beginning to build a theme or prototype, many developers use some form of placeholder text or image. This is usually because we want and need our websites to feel real, authentic, and similar to the final product. The best way to do that is with real content, but when you don’t have access to real content—since that’s usually the last thing a client gives you—the next best alternative is to use placeholder text and images. Often we turn to solutions like lorem ipsum text or its many variations for text, and a solution like placeholder.com or {placekitten} for images.

While images of kittens 🐈 are pretty amazing, they don’t necessarily convey any information about the purpose of an image within your design. Luckily, Shopify has a built-in solution for your placeholder needs, especially when building Liquid templates and theme styles. This is what’s known as the placeholder_svg_tag filter, which takes a placeholder name and outputs a placeholder SVG illustration.

You might also like: 15 Funny Lorem Ipsum Generators to Shake Up Your Design Mockups.

Why are placeholder images useful?

As was previously mentioned, when developing websites you might not always have real content to use in the building stage. It’s always best to use real content if you have it, but if that’s not possible, an alternative is to use placeholders. In these cases, we still need to build something, and often we already have a good idea of what the image dimensions are that we need to layout in a theme design.

Placeholders can help us better understand and interpret how images and their layout will move, shape, resize, and reflow as the browser or device changes.

They are also helpful, when given a bit of context, to convey meaning about the intended content. For example, a placeholder image that shows a single product versus several products conveys to a merchant what the intended use of this image might be in the future, and what to replace it with.

Using the placeholder_svg_tag filter

It’s really easy to use Shopify’s placeholder SVGs, since including them is a breeze with the placeholder_svg_tag filter.

Simply include the placeholder name, followed by the placeholder_svg_tag filter:

{{ 'product-1' | placeholder_svg_tag }}

The output is simply an inline SVG:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 525.5 525.5">...path content...</svg>

Image options

There are several types of svg placeholder illustrations that you can render with the placeholder_svg_tag filter, including image, collection, lifestyle,and product.

You can see a preview of each placeholder name in the chart below, along with the preview of what they render:

Placeholder Name

Preview

image

Placeholder image - image

collection-1

Placeholder image - Collection 1

collection-2

Placeholder image - Collection 2

collection-3

Placeholder image - Collection 3

collection-4

Placeholder image - Collection 4

collection-5

Placeholder image - Collection 5

collection-6

Placeholder image - Collection 6

lifestyle-1

Placeholder image - Lifestyle 1

lifestyle-2

Placeholder image - Lifestyle 2

product-1

Placeholder image - Product 1

product-2

Placeholder image - Product 2

product-3

Placeholder image - Product 3

product-4

Placeholder image - Product 4

product-5

Placeholder image - Product 5

product-6

Placeholder image - Product 6

 

You might also like: How to Use Math Filters with Liquid.

Adding a custom class

To more easily target with CSS, you can add a custom class or classes to your svg by passing a class parameter to the placeholder_svg_tag filter:

{{ 'product-1' | placeholder_svg_tag: 'my-custom-class' }}

To add more than one class to the SVG, simply add a space between them inside the class parameter:

{{ 'product-1' | placeholder_svg_tag: 'my-custom-class my-custom-class--two' }}

Things to remember about class names: similarly to adding CSS classes to HTML elements, if you use spaces between class names a web browser renders them as separate classes.

  • You should never start a class name with a number or dashes, as per the W3C specification
  • Class names can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen - and the underscore _
  • Best practice is to use lowercase-separated-with-dashes
  • Class names are case sensitive so it’s best to avoid randomly capitalizing letters
  • Use values that describe the nature of the content, rather than values that describe the desired presentation of the content, as per the W3C specification

Placeholder all the things 🖼!

To summarize, using the placeholder_svg_tag filter is as simple as knowing the placeholder name and where you’d like to output that image. Placeholder images help developers and designers test their work and provide context. This is especially helpful when the final content for a website is unavailable—a placeholder image can communicate what type of image is intended to be shown in a particular place, and how it should layout, resize, and flow within the browser.

Start taking advantage of Shopify placeholder SVGs today!

Have you used placeholder images in your websites, designs or prototypes? Let us know in the comments below!

About the Author

Tiffany is a Front End Developer Advocate Lead at Shopify. She specializes in front end development, user experience design, accessibility, and is passionate about inspiring young designers and developers. Previously, she was an Ottawa Chapter Lead for Ladies Learning Code and worked as a Front End Developer for Partnerships at Shopify.

Grow your business with the Shopify Partner Program

Learn more