Shopify Placeholder SVGs. Outputs every Shopify placeholder_svg_tag available.

placeholder-svgs.liquid

 {% comment %}
  Shopify Placeholder SVGs

  Outputs every Shopify placeholder_svg_tag available. A simple reference to use during theme development.
  https://shopify.dev/docs/api/liquid/filters/placeholder_svg_tag
{% endcomment %}
{%- liquid
  assign outline_illustrations = 'product-1,product-2,product-3,product-4,product-5,product-6,collection-1,collection-2,collection-3,collection-4,collection-5,collection-6,lifestyle-1,lifestyle-2,image'
  assign color_illustrations = 'product-apparel-1,product-apparel-2,product-apparel-3,product-apparel-4,collection-apparel-1,collection-apparel-2,collection-apparel-3,collection-apparel-4,hero-apparel-1,hero-apparel-2,hero-apparel-3,blog-apparel-1,blog-apparel-2,blog-apparel-3,detailed-apparel-1'

  assign outline_illustrations_array = outline_illustrations | split: ','
  assign color_illustrations_array = color_illustrations | split: ','
-%}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Selekkt/skelet@next/css/skelet.css">

<style>
  .placeholder-svg {
    max-width: 100%;
    height: auto;
  }
</style>

<div>
  <h2>Outline Illustrations</h2>
  <x-grid>
    {% for illustration in outline_illustrations_array %}
      <x-cell>
        {{ illustration | placeholder_svg_tag: 'placeholder-svg' -}}
        <br>
        <pre>{{ illustration }}</pre>
      </x-cell>
    {% endfor %}
  </x-grid>

  <h2>Color Illustrations</h2>
  <x-grid>
    {% for illustration in color_illustrations_array %}
      <x-cell>
        {{ illustration | placeholder_svg_tag: 'placeholder-svg' -}}
        <br>
        <pre>{{ illustration }}</pre>
      </x-cell>
    {% endfor %}
  </x-grid>
</div>

{% schema %}
{
  "name": "Placeholder SVGs",
  "settings": []
}
{% endschema %}