marquee images is looks unnatural

[neomirae]

hi 

I made an marquee images using liquid, but it looks unnaturally broken.

using this

<style>
  .section-{{ section.id }}.custom-marquee-images {
    display: flex;
    align-items: center;
    width: 100vw;
    max-width: 100%;
    height:200px;
    padding-top: {{section.settings.marquee_padding}}px;
    padding-bottom: {{section.settings.marquee_padding}}px;
    overflow-x: hidden;
    background:{{section.settings.colorBackground}};
  }
  .section-{{ section.id }}.custom-marquee-images .track-images {
    display: flex;
    align-items: center;
    white-space: nowrap;
    will-change: transform;
    animation: marquee 13s linear infinite;
  }
  .section-{{ section.id }}.custom-marquee-images img {
    margin-left: 40px;
    width: calc({{section.settings.image_width}}px + 70px);;
  }
  @keyframes marquee {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-20%);
    }
  }
</style>
  <div class="section-{{ section.id }} custom-marquee-images" role="region" {{ block.shopify_attributes }}>
      <div class="track-images">
        {%- for block in section.blocks -%}
          <img src="{{ block.settings.image | image_url: width: 533 }}" width="150" height="100%" />
        {%- endfor -%}
        {%- for block in section.blocks -%}
          <img src="{{ block.settings.image | image_url: width: 533 }}" width="150" height="100%" />
        {%- endfor -%}
        {%- for block in section.blocks -%}
          <img src="{{ block.settings.image | image_url: width: 533 }}" width="150" height="100%" />
        {%- endfor -%}
        {%- for block in section.blocks -%}
          <img src="{{ block.settings.image | image_url: width: 533 }}" width="150" height="100%" />
        {%- endfor -%}
        {%- for block in section.blocks -%}
          <img src="{{ block.settings.image | image_url: width: 533 }}" width="150" height="100%" />
        {%- endfor -%}
        {%- for block in section.blocks -%}
          <img src="{{ block.settings.image | image_url: width: 533 }}" width="150" height="100%" />
        {%- endfor -%}
      </div>
  </div>

{% schema %}
{
  "name": "Marquee Images",
  "settings": [
    {
      "type": "color",
      "id": "colorBackground",
      "label": "Background color",
      "default": "#06ffbc"
    },
    {
      "type": "range",
      "id": "marquee_height",
      "min": 24,
      "max": 200,
      "step": 2,
      "default": 100,
      "label": "Marquee height"
    },
    {
      "type": "range",
      "id": "marquee_padding",
      "min": 0,
      "max": 100,
      "step": 2,
      "default": 0,
      "label": "Marquee padding"
    },
    {
      "type": "range",
      "id": "image_width",
      "min": 10,
      "max": 200,
      "step": 2,
      "default": 100,
      "label": "Image size"
    }
  ],
  "blocks": [
    {
      "type": "image_picker",
      "name": "Logo",
      "limit": 20,
      "settings": [
         {
          "type": "image_picker",
          "id": "image",
          "label": "Image"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Marquee Images"
    }
  ]
}
{% endschema %}

and this is my site

https://ygd2mxvlxwkfoigr-61370761471.shopifypreview.com

Thank you in advance for your help 🙂

[devmont-digital · Accepted solution]

Hello @neomirae,
 

To view natural images in a marquee, follow the steps below:

• Navigate to the online store.

• Go to themes -> Edit Code -> Add a new section and select the file format as liquid.

• Name the file "scrolling-banner" and click "Done."

• Remove all dummy code and replace it with the following:

<script src="{{ 'scrolling-banner.js' | asset_url }}" defer></script>
{{ 'countdown-timer.css' | asset_url | stylesheet_tag: preload: true }}

<scrolling-banner id="section-id-{{ section.id }}" class="block" data-cc-animate>
  {% style %}
    #section-id-{{ section.id }} {
      --vertical-padding: {{ section.settings.vertical_padding }}px;
    }
  {% endstyle %}

 <style>
   .marquee-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  direction: ltr;
}
  .marquee-container img {
    max-width: 100%;
    height: auto;
    object-fit: cover;
}

.marquee {
  --scale: 0.7;
  display: flex;
  position: relative;
  flex-direction: row;
  flex-wrap: nowrap;
  width: -webkit-max-content;
  width: max-content;
  margin: 0;
  padding-top: calc(var(--vertical-padding) * var(--scale));
  padding-bottom: calc(var(--vertical-padding) * var(--scale));
  white-space: nowrap;
  direction: ltr;
}

.marquee-content {
  display: flex;
  align-items: center;
  width: -webkit-max-content;
  width: max-content;
  padding-right: 0.2em;
}
@media (prefers-reduced-motion: reduce) {
  .marquee-content {
    display: block;
    width: auto;
    animation: none;
    text-align: center;
    white-space: normal;
  }
  .marquee-content[aria-hidden=true] {
    display: none;
  }
}
[dir=rtl] .marquee-content {
  direction: rtl;
}

.js .marquee:not(.marquee--animate) {
  opacity: 0;
}

.marquee--animate .marquee-content {
  animation: marquee var(--duration) linear infinite;
}

.marquee:hover .marquee-content--contains-link {
  animation-play-state: paused;
}

.marquee--right .marquee-content {
  animation-direction: reverse;
}

@supports (-webkit-text-stroke: 0.01em currentColor) {
  .marquee-text--stencil,
.marquee-stencil-this {
    -webkit-text-stroke: 0.01em currentColor;
    -webkit-text-fill-color: transparent;
  }
}
@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
.marquee-item {
  padding-right: calc(var(--space) * var(--scale));
}
/* .marquee-item a:not(.btn) {
  color: inherit;
} */

.marquee-item_h1 {
  margin: 0;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  text-transform: inherit;
}

.marquee-text {
  color: var(--color, inherit);
  font-size: max(var(--text-size) * var(--scale), calc(var(--font-body-scale)* 62.5%));
  font-family: "Nexa-Bold" !important;
      line-height: 0;
}

.marquee-icon .icon {
  display: block;
  width: calc(var(--width) * var(--scale));
  height: calc(var(--width) * var(--scale));
  color: var(--color);
}

.marquee-image .placeholder-image,
.marquee-image .theme-img {
  display: block;
  width: calc(var(--width) * var(--scale));
}

.marquee-button .btn--custom,
.marquee-button .btn--custom:hover {
  border: 0;
  background: var(--btn-col-bg);
  color: var(--btn-col-text);
}

   .button.button--custom:hover:after{
     box-shadow:unset;
  --border-offset:unset;
   }
   .button.button--custom:after{
     box-shadow:unset;
   }
@media (min-width: 768px) {
  .marquee {
    --scale: 0.85;
  }
}
@media (min-width: 1000px) {
  .marquee {
    --scale: 1;
  }
}
   </style>

  {%- unless section.settings.full_width -%}<div class="container container--not-mobile page-width">{%- endunless -%}

  <div class="marquee-container {% if section.settings.section_color_scheme != 'default' %} color-{{ section.settings.section_color_scheme }} gradient {% endif %}">
    <div class="marquee marquee--{{ section.settings.direction }}"
        style="--duration: {{ 42 | minus: section.settings.speed }}s; --space: {{ section.settings.space }}px; --text-size: {{ section.settings.text_size }}px" role="marquee">
      {%- capture scrolling_content -%}
        {%- for block in section.blocks -%}
          {%- if block.type == 'text' %}
            {%- liquid
              assign text = block.settings.text
              if block.settings.stencil_all_text == false and block.settings.stencil_text != blank
                assign words = block.settings.stencil_text | split: ","
                for word in words
                  assign trimmed_word = word | strip
                  assign replacement_text = "{" | append: trimmed_word | append: "}"
                  assign text = text | replace: trimmed_word, replacement_text
                endfor

                assign text = text | replace: "{", "<span class='marquee-stencil-this'>"
                assign text = text | replace: "}", "</span>"
              endif

              if block.settings.link
                assign contains_link = true
              endif
            -%}

            <span class="marquee-item marquee-text{% if block.settings.stencil_all_text %} marquee-text--stencil{% endif %}" style="{% unless block.settings.color contains ',0)' %}--color: {{ block.settings.color }}{% endunless %}" {{ block.shopify_attributes }}>
              {%- if block.settings.use_h1 -%}
                <h1 class="marquee-item_h1">
              {%- endif -%}
              {%- if block.settings.link -%}
                <a href="{{ block.settings.link }}">
              {%- endif -%}
              {{- text -}}
              {%- if block.settings.link -%}
                </a>
              {%- endif -%}
              {%- if block.settings.use_h1 -%}
                </h1>
              {%- endif -%}
            </span>

          {%- elsif block.type == 'icon' %}
            <span class="marquee-item marquee-icon" style="--width: {{ block.settings.icon_width }}px; {% unless block.settings.color contains ',0)' %}--color: {{ block.settings.color }}{% endunless %}" {{ block.shopify_attributes }}>
              {%- render 'icon', icon: block.settings.icon -%}
            </span>

          {%- elsif block.type == 'image' %}
            <span class="marquee-item marquee-image" style="--width: {{ block.settings.image_width }}px" {{ block.shopify_attributes }}>
              {%- if block.settings.link -%}
                {%- assign contains_link = true -%}
                <a href="{{ block.settings.link }}">
              {%- endif -%}

              {%- if block.settings.image != blank -%}
                {%- liquid
                  assign image_sizes = block.settings.image_width | append: 'px'
                  assign image_widths = block.settings.image_width | times: 2 | prepend: ', ' | prepend: block.settings.image_width
                -%}
                {%- render 'image' with block.settings.image, sizes: image_sizes, widths: image_widths -%}
              {%- else -%}
                <span class="placeholder-image">
                  {{- 'logo' | placeholder_svg_tag: 'placeholder-svg' -}}
                </span>
              {%- endif -%}

              {%- if block.settings.link -%}
                </a>
              {%- endif -%}
            </span>

          {%- elsif block.type == 'button' %}
            {%- liquid
              if block.settings.link
                assign contains_link = true
              endif
            -%}
            <span class="marquee-item marquee-button" style="{% if block.settings.button_style == 'custom' %}--btn-col-bg: {{ block.settings.color_bg }}; --btn-col-text: {{ block.settings.color_text }}{% endif %}" {{ block.shopify_attributes }}>
              <a href="{{ block.settings.link | default: '#' }}" class="button {% if block.settings.button_style == 'secondary' %}button--secondary {% elsif block.settings.button_style == 'primary' %}button--primary {% elsif block.settings.button_style == 'custom' %}button--custom {% endif %}" style="{% if block.settings.button_style == 'custom' %} background-color: {{ block.settings.color_bg }}; color: {{ block.settings.color_text }}; border:1px solid {{ block.settings.color_bg }};{% endif %}"><span class="btn__text">{{ block.settings.text }}</span></a>
            </span>

          {%- elsif block.type == 'countdown' -%}
            <div class="marquee-item marquee-countdown align-center block-id-{{ block.id }} countdown-font-{{ section.settings.font }} countdown-divider-{{ block.settings.divider_type }}" {{ block.shopify_attributes }}>
              <style>
                .block-id-{{ block.id }} .countdown {
                  --countdown-desktop-size: {{ block.settings.number_size }}px;
                  {% unless block.settings.color contains ',0)' %}
                    --heading-color: {{ block.settings.color.rgb }};
                    --link-color: {{ block.settings.color.rgb }};
                    color: {{ block.settings.color }};
                  {% endunless %}
                }
              </style>
              <script src="{{ 'countdown-timer.js' | asset_url }}" defer></script>
              {% render 'countdown-timer',
                end_date: block.settings.end_date,
                end_time: block.settings.end_time,
                end_text: block.settings.end_text,
                end_midnight: true,
                hide_on_end: block.settings.hide_on_end,
                show_labels: block.settings.show_timer_labels
              %}
            </div>

          {%- endif -%}
        {%- endfor -%}
      {%- endcapture -%}

      {%- for i in (1..15) -%}
        <span class="marquee-content{% if contains_link %} marquee-content--contains-link{% endif %}"{% unless forloop.first %} aria-hidden="true"{% endunless %}>
          {%- if forloop.first -%}
            {{ scrolling_content }}
          {%- else -%}
            {{ scrolling_content | replace: '<a ', '<a tabindex="-1" ' | replace: '<h1 class="marquee-item_h1">' , '<span>' | replace: '</h1>', '</span>' }}
          {%- endif -%}
        </span>
      {%- endfor -%}
    </div>
  </div>

  {%- unless section.settings.full_width -%}</div>{%- endunless -%}
</scrolling-banner>

{% schema %}
{
  "name": "Scrolling banner",
  "class": "section-scrolling-banner",
  "disabled_on": {
    "groups": [
      "aside"
    ]
  },
  "settings": [
    {
      "id": "full_width",
      "type": "checkbox",
      "label": "Full page width",
      "default": true
    },
    {
      "type": "color_scheme",
      "id": "section_color_scheme",
      "label": "Color scheme",
      "default": "background-1"
    },
    {
      "type": "range",
      "id": "text_size",
      "min": 12,
      "max": 200,
      "step": 2,
      "unit": "px",
      "label": "Text size",
      "default": 12
    },
    {
      "type": "range",
      "id": "vertical_padding",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "label": "Vertical padding",
      "default": 10
    },
    {
      "type": "range",
      "id": "speed",
      "min": 0.5,
      "max": 40,
      "step": 0.5,
      "unit": "x",
      "label": "Speed",
      "default": 35
    },
    {
      "type": "select",
      "id": "direction",
      "label": "Direction",
      "options": [
        {
          "label": "Left to right",
          "value": "right"
        },
        {
          "label": "Right to left",
          "value": "left"
        }
      ],
      "default": "left"
    },
    {
      "type": "range",
      "id": "space",
      "min": 0,
      "max": 140,
      "step": 5,
      "unit": "px",
      "label": "Space between items",
      "default": 50
    }
  ],
  "blocks": [
    {
      "type": "text",
      "name": "Text",
      "limit": 20,
      "settings": [
        {
          "type": "text",
          "id": "text",
          "label": "Text",
          "default": "Your scrolling text here"
        },
        {
          "type": "color",
          "id": "color",
          "label": "Color",
          "default": "rgba(0,0,0,0)"
        },
        {
          "type": "url",
          "id": "link",
          "label": "Link"
        },
        {
          "type": "checkbox",
          "id": "use_h1",
          "label": "Set as primary page heading",
          "info": "Use <h1> tag. One per page recommended. [Read more](https://cleancanvas.co.uk/support/symmetry/section-h1-setting)",
          "default": false
        },
        {
          "type": "header",
          "content": "Stencil text"
        },
        {
          "type": "paragraph",
          "content": "Some or all of your text can appear as a stencil outline. May not work in all browsers."
        },
        {
          "type": "checkbox",
          "id": "stencil_all_text",
          "label": "Stencil all text",
          "default": false
        }
      ]
    },
    {
      "type": "icon",
      "name": "Icon",
      "limit": 20,
      "settings": [
        {
          "type": "select",
          "id": "icon",
          "label": "Icon",
          "default": "star",
          "options": [
            {
              "value": "circle",
              "label": "circle"
            },
            {
              "value": "award",
              "label": "Award"
            },
            {
              "value": "box",
              "label": "Box"
            },
            {
              "value": "briefcase",
              "label": "Briefcase"
            },
            {
              "value": "calendar",
              "label": "Calendar"
            },
            {
              "value": "chat_bubble",
              "label": "Chat bubble"
            },
            {
              "value": "check_mark",
              "label": "Check mark"
            },
            {
              "value": "check_mark_in_circle",
              "label": "Check mark in circle"
            },
            {
              "value": "clock",
              "label": "Clock"
            },
            {
              "value": "credit_card",
              "label": "Credit card"
            },
            {
              "value": "dollar_sign",
              "label": "Dollar sign"
            },
            {
              "value": "dryer",
              "label": "Dryer"
            },
            {
              "value": "eye",
              "label": "Eye"
            },
            {
              "value": "feather",
              "label": "Feather"
            },
            {
              "value": "gift",
              "label": "Gift"
            },
            {
              "value": "heart",
              "label": "Heart"
            },
            {
              "value": "iron",
              "label": "Iron"
            },
            {
              "value": "leaf",
              "label": "Leaf"
            },
            {
              "value": "leather",
              "label": "Leather"
            },
            {
              "value": "lock",
              "label": "Lock"
            },
            {
              "value": "map_pin",
              "label": "Map pin"
            },
            {
              "value": "pants",
              "label": "Pants"
            },
            {
              "value": "percent",
              "label": "Percent"
            },
            {
              "value": "plane",
              "label": "Plane"
            },
            {
              "value": "price_tag",
              "label": "Price tag"
            },
            {
              "value": "question_mark",
              "label": "Question mark"
            },
            {
              "value": "return",
              "label": "Return"
            },
            {
              "value": "ruler",
              "label": "Ruler"
            },
            {
              "value": "scissors",
              "label": "Scissors"
            },
            {
              "value": "shirt",
              "label": "Shirt"
            },
            {
              "value": "shoe",
              "label": "Shoe"
            },
            {
              "value": "silhouette",
              "label": "Silhouette"
            },
            {
              "value": "star",
              "label": "Star"
            },
            {
              "value": "truck",
              "label": "Truck"
            },
            {
              "value": "washing",
              "label": "Washing"
            }
          ]
        },
        {
          "type": "range",
          "id": "icon_width",
          "min": 10,
          "max": 200,
          "step": 5,
          "label": "Icon width",
          "unit": "px",
          "default": 50
        },
        {
          "type": "color",
          "id": "color",
          "label": "Color",
          "default": "rgba(0,0,0,0)"
        }
      ]
    },
    {
      "type": "image",
      "name": "Image",
      "limit": 20,
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "Image"
        },
        {
          "type": "range",
          "id": "image_width",
          "min": 10,
          "max": 400,
          "step": 5,
          "label": "Image width",
          "unit": "px",
          "default": 100
        },
        {
          "type": "url",
          "id": "link",
          "label": "Link"
        }
      ]
    },
    {
      "type": "button",
      "name": "Button",
      "limit": 20,
      "settings": [
        {
          "type": "text",
          "id": "text",
          "label": "Text",
          "default": "Read more"
        },
        {
          "type": "url",
          "id": "link",
          "label": "Link"
        },
        {
          "type": "select",
          "id": "button_style",
          "label": "Button style",
          "default": "primary",
          "options": [
            {
              "label": "Primary",
              "value": "primary"
            },
            {
              "label": "Secondary",
              "value": "secondary"
            },
            {
              "label": "Custom",
              "value": "custom"
            }
          ]
        },
        {
          "type": "color",
          "id": "color_bg",
          "label": "Custom background color",
          "default": "#fff"
        },
        {
          "type": "color",
          "id": "color_text",
          "label": "Custom text color",
          "default": "#333"
        }
      ]
    },
    {
      "type": "countdown",
      "name": "Countdown timer",
      "settings": [
        {
          "type": "text",
          "id": "end_date",
          "label": "End date",
          "info": "Required. Format: YYYY-MM-DD."
        },
        {
          "type": "text",
          "id": "end_time",
          "label": "End time (optional)",
          "info": "Format: 17:00 (24 hour clock). Uses the store's timezone."
        },
        {
          "type": "richtext",
          "id": "end_text",
          "label": "End text",
          "info": "This shows when the date and time elapses."
        },
        {
          "type": "checkbox",
          "id": "hide_on_end",
          "label": "Hide the timer when the date and time elapses",
          "default": false
        },
        {
          "type": "color",
          "id": "color",
          "label": "Color",
          "default": "rgba(0,0,0,0)"
        },
        {
          "type": "range",
          "id": "number_size",
          "min": 20,
          "max": 120,
          "step": 2,
          "unit": "px",
          "label": "Number size",
          "default": 40
        },
        {
          "type": "select",
          "id": "divider_type",
          "label": "Divider type",
          "default": "colon",
          "options": [
            {
              "value": "colon",
              "label": "Colon"
            },
            {
              "value": "dot",
              "label": "Dot"
            },
            {
              "value": "line",
              "label": "Line"
            },
            {
              "value": "none",
              "label": "None"
            }
          ]
        },
        {
          "type": "checkbox",
          "id": "show_timer_labels",
          "label": "Show labels",
          "default": true
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Scrolling banner",
      "settings": {
      },
      "blocks": [
        {
          "type": "text"
        }
      ]
    }
  ]
}
{% endschema %}

• Add a new asset file, create a blank file with the extension .js, name it "scrolling-banner," and click "Done." Paste the JavaScript code into this file.

if (!customElements.get('scrolling-banner')) {
  class ScrollingBanner extends HTMLElement {
    constructor() {
      super();
      this.initLazyScript();
    }

    initLazyScript() {
      // Transforms can confuse lazy loading in browsers, so we coordinate loading here
      // Load all countdown timers
      customElements.whenDefined('countdown-timer').then(() => {
        this.querySelectorAll('countdown-timer').forEach((el) => el.init());
      });

      // Load all images
      this.querySelectorAll('img[loading="lazy"]').forEach((el) => {
        el.loading = 'eager';
      });

      // After fonts have loaded
      document.fonts.ready.then(() => this.querySelector('.marquee').classList.add('marquee--animate'));
    }
  }

  window.customElements.define('scrolling-banner', ScrollingBanner);
}

• Create a new snippet file, name it after the image file, and click "Done." Paste the relevant code for the images.

{%- comment -%}
  Parameters:
  - image {Object} - Image object.
  - sizes {String} - Content for the 'sizes' attribute (optional, default is 100vw).
  - widths {String} - Comma separated list of image widths for the 'srcset' attribute (optional).
  - class {String} - Class name(s) for the 'class' attribute (optional).
  - loading {String} - eager/lazy/manual (optional, default is lazy)
  - fetchpriority {String} - low/high/nil, passed on to image_tag (optional, default is nil)
  - size_cols_desktop {Number} - width on desktop is 'page container width / this number'
  - size_cols_mobile {Number} - width on mobile is 'screen width / this number'
  - custom_aspect_ratio {Number} - aspect ratio to force on image (optional)
  - custom_crop {String} - top/bottom/left/right/contain (optional, default is cover with focal point).
  - as_mobile_source {Boolean} - Will output <source> instead of <img> for use in <picture> (optional, default is false)

  Usage:
  {% render 'image',
    image: image,
    sizes: '100vw',
    widths: '480, 640, 960, 1280',
    class: 'img-fit'
  %}
{%- endcomment -%}

{%- liquid
  if size_cols_desktop != blank
    assign page_max_width = settings.max_page_width
    assign sizes_mid_val = 100 | divided_by: size_cols_desktop | round | append: 'vw'
    assign sizes_wide_val = page_max_width | divided_by: size_cols_desktop | append: 'px'

    if size_cols_mobile
      assign sizes_mobile = 100 | divided_by: size_cols_mobile | round | append: 'vw'
    else
      assign sizes_mobile = '100vw'
    endif

    assign sizes = '(min-width: ' | append: page_max_width | append: 'px) ' | append: sizes_wide_val | append: ', (min-width: 768px) ' | append: sizes_mid_val | append: ', ' | append: sizes_mobile
  endif

  assign sizes = sizes | default: '100vw'

  if widths == blank
    assign widths = '340, 480, 740, 980, 1200, 1400, 1600, 1920, 2560, 3200, 4000, ' | append: image.width
  endif

  if class == blank
    assign class = 'theme-img'
  else
    assign class = class | append: ' theme-img'
  endif

  if loading == 'manual'
    assign manual_load = true
    assign loading = 'lazy'
  else
    assign loading = loading | default: nil

    if loading == nil
      if section.index > 2 or section.location != 'header' or section.location != 'template'
        assign loading = 'lazy'
      endif
    endif
  endif

  if custom_aspect_ratio and custom_aspect_ratio != '' and custom_aspect_ratio != image.aspect_ratio and custom_crop != 'contain'
    assign custom_aspect_ratio = custom_aspect_ratio | plus: 0

    if custom_crop
      if custom_crop contains 'left'
        assign fp_x = 0
      elsif custom_crop contains 'right'
        assign fp_x = 1
      else
        assign fp_x = 0.5
      endif
      if custom_crop contains 'top'
        assign fp_y = 0
      elsif custom_crop contains 'bottom'
        assign fp_y = 1
      else
        assign fp_y = 0.5
      endif
    else
      assign fp_x = image.presentation.focal_point.x | default: 50 | divided_by: 100.0
      assign fp_y = image.presentation.focal_point.y | default: 50 | divided_by: 100.0
    endif

    assign crop = 'region'
    if custom_aspect_ratio > image.aspect_ratio
      assign crop_left = 0
      assign crop_width = image.width
      assign crop_height = crop_width | divided_by: custom_aspect_ratio
      assign crop_top = image.height | minus: crop_height | times: fp_y
    else
      assign crop_top = 0
      assign crop_height = image.height
      assign crop_width = crop_height | times: custom_aspect_ratio
      assign crop_left = image.width | minus: crop_width | times: fp_x
    endif
  endif

  if fetchpriority == blank
    assign fetchpriority = nil
  endif

  assign image_html = image | image_url: width: image.width, crop: crop, crop_left: crop_left, crop_top: crop_top, crop_width: crop_width, crop_height: crop_height | image_tag: sizes: sizes, widths: widths, class: class, loading: loading, fetchpriority: fetchpriority
-%}
{%- if as_mobile_source -%}
  {{- image_html | replace: '<img ', '<source media="(max-width: 767.98px)" ' | replace: ' src=', ' og-src=' -}}
{%- else -%}
  {%- if custom_aspect_ratio and custom_crop == 'contain' -%}<div class="ar-contain" style="--aspect-ratio: {{ custom_aspect_ratio }}">{% endif %}
  {%- if manual_load -%}
    {{- image_html | replace: ' srcset=', ' data-manual-srcset=' | replace: ' src=', ' data-manual-src=' -}}
    <noscript>{{ image_html }}</noscript>
  {%- else -%}
    {{- image_html -}}
  {%- endif -%}
  {%- if custom_aspect_ratio and custom_crop == 'contain' -%}</div>{% endif %}
{%- endif -%}

• Lastly, create another new snippet file, name it after the icon file, and click "Done." Paste the corresponding code for the icons.

{%- if icon != blank -%}
  <svg class="icon icon--{{ size | default: 'medium' }} icon--type-{{ icon }}" stroke-width="1" aria-hidden="true" focusable="false" role="presentation" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 13">
    {%- case icon -%}
      
    {%- when 'circle' -%}
      <circle stroke="currentColor" fill="currentColor" cx="8.1081667" cy="5.6658235" r="4.3742652"/> 
    {%- when 'award' -%}
     
      <circle stroke="currentColor" fill="none" cx="8.1081667" cy="5.6658235" r="4.3742652"/>
      <polyline stroke="currentColor" fill="none" points="8.21 13.89 7 23 12 20 17 23 15.79 13.88" transform="matrix(0.624895,0,0,0.624895,0.60942571,0.66666362)" />
    {%- when 'box' -%}
      <path fill="currentColor" d="M14.41 3.37L8.27 1.41a1 1 0 00-.61 0L1.52 3.37a1 1 0 00-.7.95v7.86c0 .41.25.78.63.93l6.14 2.46c.24.1.5.1.75 0l6.14-2.46a1 1 0 00.62-.93V4.32a1 1 0 00-.69-.95zM7.96 2.36l6.05 1.93-2.7.9L5.35 3.2l2.63-.84zm-.46 12.1l-5.68-2.28V5.3L7.5 7.2v7.26zM8 6.3L1.96 4.28l2.58-.82 5.99 2L8 6.3zm6.1 5.89l-5.6 2.24V7.19l5.6-1.87v6.87z"/>
    {%- when 'briefcase' -%}
      <rect stroke="currentColor" fill="none" x="1.2850168" y="4.4139466" width="13.393794" height="9.3756561" rx="1.3393794" ry="1.3393794"/>
      <path stroke="currentColor" fill="none" d="M 10.660673,13.789602 V 3.0745679 A 1.3393794,1.3393794 0 0 0 9.3212931,1.7351885 H 6.6425343 A 1.3393794,1.3393794 0 0 0 5.3031549,3.0745679 V 13.789602" />
    {%- when 'calendar' -%}
      <rect stroke="currentColor" fill="none" x="1.9032375" y="2.5116053" width="12.166035" height="12.166035" rx="1.3517816" ry="1.3517816"/>
      <line stroke="currentColor" fill="none" x1="10.689817" y1="1.159824" x2="10.689817" y2="3.8633871"/>
      <line stroke="currentColor" fill="none" x1="5.2826915" y1="1.159824" x2="5.2826915" y2="3.8633871"/>
      <line stroke="currentColor" fill="none" x1="1.9032375" y1="6.5669503" x2="14.069271" y2="6.5669503"/>
    {%- when 'chat_bubble' -%}
      <path fill="currentColor" d="M11.3 13.02a6 6 0 111.72-1.72L14 14l-2.7-.98zm2.82-1.62a7 7 0 10-2.72 2.72l2.26.82a1 1 0 001.28-1.28l-.82-2.26z"/>
      <path fill="currentColor" d="M4.9 9.16c.52 0 .86-.36.86-.85 0-.5-.34-.85-.87-.85-.52 0-.86.36-.86.85 0 .5.34.85.86.85zM7.88 9.16c.53 0 .87-.36.87-.85 0-.5-.34-.85-.87-.85-.52 0-.87.36-.87.85 0 .5.35.85.87.85zM10.87 9.16c.52 0 .87-.36.87-.85 0-.5-.35-.85-.87-.85s-.87.36-.87.85c0 .5.35.85.87.85z"/>
    {%- when 'check_mark' -%}
      <path fill="currentColor" fill-rule="evenodd" d="M14.441 3.733a.5.5 0 010 .707l-7.94 7.94a.5.5 0 01-.707 0L2.52 9.105a.5.5 0 11.707-.707l2.922 2.922 7.586-7.587a.5.5 0 01.707 0z" clip-rule="evenodd"/>
    {%- when 'check_mark_in_circle' -%}
      <circle stroke="currentColor" fill="none" cx="8" cy="8" r="6.6666665"/>
      <path stroke="currentColor" fill="none" transform="translate(5.0003335,6.0003335)" d="m 6,0 -4,4 L 0,2.1818182" />
    {%- when 'clock' -%}
      <circle stroke="currentColor" fill="none" cx="8" cy="8" r="6.7097588" />
      <polyline stroke="currentColor" fill="none" points="12 6 12 12 16 14" transform="matrix(0.67097581,0,0,0.67097581,-0.01963672,-0.01963672)" />
    {%- when 'credit_card' -%}
      <rect stroke="currentColor" fill="none" x="0.92560589" y="2.7769852" width="14.231262" height="10.350009" rx="1.2937511" ry="1.2937511" />
      <line stroke="currentColor" fill="none" x1="0.92560589" y1="6.6582384" x2="15.156868" y2="6.6582384" />
    {%- when 'dollar_sign' -%}
      <line stroke="currentColor" fill="none" x1="8.0021544" y1="1.1659812" x2="8.0021544" y2="15.017867"/>
      <path stroke="currentColor" fill="none" d="M 11.15031,3.6845048 H 6.4280755 a 2.2037096,2.2037096 0 0 0 0,4.4074192 h 3.1481559 a 2.2037095,2.2037095 0 0 1 0,4.407417 H 4.224366"/>
    {%- when 'dryer' -%}
      <path fill="currentColor" d="M2 3a1 1 0 011-1h10a1 1 0 011 1v10a1 1 0 01-1 1H3a1 1 0 01-1-1V3zm1 0v10h10V3H3z" fill-rule="evenodd"/>
      <path fill="currentColor" d="M5.88 10.08a3 3 0 104.24-4.24 3 3 0 00-4.24 4.24zm-.7.7a4 4 0 105.65-5.65 4 4 0 00-5.66 5.66z" fill-rule="evenodd"/>
    {%- when 'eye' -%}
      <path fill="currentColor" d="M8 10a2 2 0 100-4 2 2 0 000 4zm0 1a3 3 0 100-6 3 3 0 000 6z" fill-rule="evenodd"/>
      <path fill="currentColor" d="M15.79 8.62L15 8l.79-.62a1 1 0 010 1.24zM1 8l-.79.62.02.02a5.56 5.56 0 00.15.18 15.16 15.16 0 002.05 1.96C3.77 11.84 5.73 13 8 13c2.26 0 4.23-1.16 5.57-2.22a15.17 15.17 0 002.2-2.14l.01-.02L15 8l.79-.62-.02-.02a6.17 6.17 0 00-.6-.67c-.37-.4-.92-.94-1.6-1.47C12.23 4.16 10.27 3 8 3 5.73 3 3.77 4.16 2.43 5.22a15.16 15.16 0 00-2.2 2.14l-.01.02L1 8zm0 0l-.79.62a1 1 0 010-1.24L1 8zm0 0s3.13-4 7-4 7 4 7 4-3.13 4-7 4-7-4-7-4z" fill-rule="evenodd"/>
    {%- when 'feather' -%}
      <path stroke="currentColor" fill="none" d="M 13.552143,8.1268613 A 4.0021845,4.0021845 0 0 0 7.8921991,2.466918 L 3.3922446,6.9668733 v 5.6666097 h 5.6666095 z" />
      <line stroke="currentColor" fill="none" x1="10.725504" y1="5.3002229" x2="1.3922646" y2="14.633464" />
      <line stroke="currentColor" fill="none" x1="11.725495" y1="9.9668436" x2="6.0588846" y2="9.9668436" />
    {%- when 'gift' -%}
      <path stroke="currentColor" fill="none" d="m 13.537655,7.996877 v 6.700339 H 2.6040452 V 7.996877" />
      <rect stroke="currentColor" fill="none" x="1.3929645" y="4.6346269" width="13.3332" height="3.3333001"/>
      <path stroke="currentColor" fill="none" d="M 8.0595646,14.634526 V 4.6346269" />
      <path stroke="currentColor" fill="none" d="m 8.0595647,4.6346267 h -2.99997 a 1.66665,1.66665 0 0 1 0,-3.3333 c 2.33331,0 2.99997,3.3333 2.99997,3.3333 z" />
      <path stroke="currentColor" fill="none" d="m 8.0595647,4.6346267 h 2.9999703 a 1.66665,1.66665 0 0 0 0,-3.3333 c -2.3333103,0 -2.9999703,3.3333 -2.9999703,3.3333 z"/>
    {%- when 'heart' -%}
      <path fill="currentColor" d="M8.86 4.38a2.78 2.78 0 013.72-.3c1.4 1.2 1.2 3.11.19 4.13L7.98 13.1c-.05.06-.1.06-.19 0L3.01 8.2a2.8 2.8 0 01.19-4.1c1.06-.9 2.7-.76 3.74.28l.96.98.96-.98zm-.96-.45l.24-.25a3.78 3.78 0 015.07-.38l.01.01v.01a3.82 3.82 0 01.26 5.59l-4.79 4.9a1.12 1.12 0 01-1.45.12l-.1-.06L2.3 8.91a3.8 3.8 0 01.26-5.57 3.79 3.79 0 015.1.33l.01.01.24.25z" fill-rule="evenodd"/>
    {%- when 'iron' -%}
      <path fill="currentColor" d="M16.02 7V2a.5.5 0 00-.5-.5h-9a.5.5 0 000 1h8.5V6h-4.68C6.49 6 4.1 7.66 2.7 9.37a9.7 9.7 0 00-1.76 3.3l-.02.07v.03l.97.23s.1-.4.36-1c.75-1.7 2.87-5 8.08-5h4.68v6H1.9l-.98-.23A1 1 0 001.9 14h13.12a1 1 0 001-1V7z"/>
      <path fill="currentColor" d="M7.26 12.06c.33 0 .57-.25.57-.57 0-.32-.24-.57-.57-.57s-.57.25-.57.57c0 .32.25.57.57.57zM9.59 12.06c.32 0 .57-.25.57-.57 0-.32-.25-.57-.57-.57s-.58.25-.58.57c0 .32.25.57.58.57zM11.9 12.06c.33 0 .58-.25.58-.57 0-.32-.25-.57-.57-.57s-.58.25-.58.57c0 .32.25.57.58.57z"/>
    {%- when 'leaf' -%}
      <path fill="currentColor" d="M14.63.98a1 1 0 00-.78-.3h-.03l-.07.01-.25.03a41.89 41.89 0 00-3.87.52c-1.1.2-2.31.48-3.38.83a7.15 7.15 0 00-2.74 1.48 6.04 6.04 0 00-.36 8.15L1.53 13.3a.5.5 0 00.71.7l1.61-1.6a6.04 6.04 0 008.2-.31 7.15 7.15 0 001.48-2.74c.36-1.07.63-2.27.83-3.39a46.92 46.92 0 00.53-3.86l.02-.26.01-.07v-.02a1 1 0 00-.29-.78zm-1.72.8l.17-.02-4.89 4.9v-4.1c1.76-.41 3.61-.66 4.72-.78zM8.45 7.81h4.5c-.21.8-.45 1.56-.74 2.2H6.24l2.21-2.2zM7.7 2.68v4.46L5.5 9.35V3.43c.64-.3 1.4-.54 2.2-.75zM4.22 4.26c.2-.2.47-.4.78-.57v6.15L3.86 11a5.04 5.04 0 01.36-6.73zm.34 7.44l1.19-1.18h6.22c-.2.35-.4.65-.62.87a5.04 5.04 0 01-6.8.31zm8.5-4.4h-4.1l4.9-4.9-.03.3a41.1 41.1 0 01-.76 4.6z"/>
    {%- when 'leather' -%}
      <path fill="currentColor" d="M5.34 1.79A1 1 0 016.32 1h3.01a1 1 0 01.98.79 2.05 2.05 0 002.9 1.4 1 1 0 011.39.6l.37 1.23a1 1 0 01-.77 1.27 2.84 2.84 0 00-.25 5.52 1 1 0 01.69 1.25l-.42 1.35a1 1 0 01-1.6.47 2.66 2.66 0 00-3.89.51 1 1 0 01-1.64 0 2.66 2.66 0 00-3.8-.6 1 1 0 01-1.55-.49l-.5-1.6a1 1 0 01.61-1.24 2.72 2.72 0 00-.17-5.16 1 1 0 01-.67-1.25l.35-1.13a1 1 0 011.29-.65 2.05 2.05 0 002.7-1.48zm-2.77 2.5A3.05 3.05 0 006.32 2h3.01a3.04 3.04 0 004.31 2.09l.38 1.22a3.83 3.83 0 00-.34 7.46l-.41 1.35a3.64 3.64 0 00-5.36.7 3.69 3.69 0 00-4.33-1.31c-.31.12-.61.29-.89.5l-.5-1.61a3.7 3.7 0 001.35-6.12 3.7 3.7 0 00-1.57-.94l.35-1.12.25.07z" fill-rule="evenodd"/>
    {%- when 'lock' -%}
      <path fill="currentColor" d="M7.48 10.57v1.83a.5.5 0 001 0v-1.81a1.1 1.1 0 10-1-.02z"/>
      <path fill="currentColor" d="M13.15 5.66h-2.08V3.79a3.7 3.7 0 00-.8-2.3C9.76.88 8.98.5 8 .5c-.98 0-1.76.37-2.29 1a3.7 3.7 0 00-.79 2.3v1.86H2.83a.5.5 0 00-.5.5V15c0 .28.23.5.5.5h10.32a.5.5 0 00.5-.5V6.16a.5.5 0 00-.5-.5zM5.9 3.92v-.08-.02c.03-.7.22-1.28.56-1.68.32-.39.81-.64 1.52-.64s1.2.26 1.52.64c.34.4.54.98.56 1.68v1.84H5.91V3.92zm6.74 10.58H3.33V6.66h9.32v7.84z"/>
    {%- when 'map_pin' -%}
      <path fill="currentColor" d="M6.72 14.63L7.5 14l.78.63-.78.96-.78-.96zm1.41-1.44L7.5 14s-.25-.3-.63-.81C5.63 11.54 3 7.8 3 5.79 3 3.14 5.01 1 7.5 1S12 3.14 12 5.79c0 2.02-2.63 5.75-3.87 7.4zm.15 1.44L7.5 14l-.78.63-.01-.02-.04-.05a26.53 26.53 0 01-.67-.87c-.43-.58-1.01-1.37-1.59-2.26A24.32 24.32 0 012.8 8.62 7.07 7.07 0 012 5.79C2 2.65 4.4 0 7.5 0S13 2.65 13 5.79c0 .9-.36 1.9-.8 2.83-.45.95-1.04 1.93-1.61 2.81a43.67 43.67 0 01-2.26 3.13l-.04.05v.01h-.01z" fill-rule="evenodd"/>
      <path fill="currentColor" d="M7.5 7a1.5 1.5 0 100-3 1.5 1.5 0 000 3zm0 1a2.5 2.5 0 100-5 2.5 2.5 0 000 5z" fill-rule="evenodd"/>
    {%- when 'pants' -%}
      <path fill="currentColor" d="M12.46 3.34V2.5a1 1 0 00-1-1h-6.8a1 1 0 00-1 1v1.19L2 13.19a1 1 0 00.82 1.15l2.96.51a1 1 0 001.15-.81L8.1 7.4l1.14 6.58a1 1 0 001.15.81l2.96-.5a1 1 0 00.82-1.16l-1.7-9.8zm-7.8-.84h6.8v.91h-6.8V2.5zm5.55 11.32L8.77 5.5H7.4l-1.44 8.37L3 13.35 4.64 3.9h6.9l1.63 9.4-2.96.52z"/>
    {%- when 'percent' -%}
      <line stroke="currentColor" fill="none" x1="13.020876" y1="2.8146417" x2="2.5896065" y2="13.245912" />
      <circle stroke="currentColor" fill="none" cx="3.7072423" cy="3.9322774" r="1.8627264" />
      <circle stroke="currentColor" fill="none" cx="11.903238" cy="12.128274" r="1.8627264" />
    {%- when 'plane' -%}
      <path fill="currentColor" d="M5.88738 14.9593C5.44143 15.1465 4.9254 14.9877 4.66182 14.5822L3.36629 12.589L1.3731 11.2935C0.967576 11.0299 0.808816 10.5139 0.996049 10.0679C1.18328 9.62198 1.66284 9.37394 2.13498 9.47885L4.01747 9.89713C4.57953 9.09401 5.46955 8.03498 6.5333 6.8911L2.53832 4.29445C2.1328 4.03086 1.97404 3.51483 2.16127 3.06888C2.3485 2.62293 2.82806 2.37489 3.30021 2.4798L9.55731 3.8701C10.5497 2.94933 11.4643 2.17251 12.1944 1.62904C12.6006 1.32664 12.9836 1.07087 13.3088 0.906474C13.4649 0.827523 13.6642 0.740203 13.878 0.698316C14.0386 0.66686 14.5479 0.594299 14.953 0.99939C15.358 1.40443 15.2855 1.91362 15.2541 2.07423C15.2122 2.28805 15.1249 2.48731 15.0459 2.64344C14.8816 2.96855 14.6259 3.35151 14.3236 3.75767C13.7802 4.48763 13.0036 5.40199 12.0831 6.39418L13.4738 12.6534C13.5787 13.1256 13.3307 13.6051 12.8848 13.7924C12.4388 13.9796 11.9228 13.8208 11.6592 13.4153L9.06153 9.4188C7.91838 10.4819 6.86005 11.3714 6.05721 11.9335L6.47646 13.8203C6.58137 14.2925 6.33333 14.772 5.88738 14.9593ZM5.73077 10.9371C6.46992 10.3921 7.43989 9.56739 8.50814 8.5674C8.74908 8.34186 8.99501 8.10741 9.24443 7.86524L12.4976 12.8703L10.9923 6.09567C12.0817 4.9445 12.9801 3.89496 13.5609 3.10728C13.6874 2.93571 13.7988 2.77657 13.8939 2.6315C14.2158 2.14038 14.35 1.81063 14.2459 1.7065C14.1417 1.60236 13.812 1.73659 13.3209 2.05846C13.1758 2.15353 13.0166 2.26498 12.8451 2.39149C12.0572 2.97245 11.0073 3.87109 9.85583 4.96082L3.0833 3.456L8.08685 6.7082C7.84468 6.95762 7.61023 7.20356 7.38469 7.44449C6.38483 8.51263 5.56017 9.48249 5.0153 10.2216C4.84261 10.4558 4.69801 10.6669 4.58486 10.8506C4.56277 10.8864 4.54188 10.9213 4.52221 10.955C4.50833 10.9788 4.49505 11.0021 4.4824 11.0248L1.91808 10.455L4.08913 11.8662L5.50027 14.0372L4.92958 11.4688C4.9519 11.4564 4.97474 11.4433 4.9981 11.4297C5.03103 11.4105 5.06498 11.3901 5.09992 11.3686C5.28402 11.2553 5.49572 11.1103 5.73077 10.9371Z"/>
    {%- when 'price_tag' -%}
      <path fill="currentColor" d="M7.59 1.34a1 1 0 01.7-.29h5.66a1 1 0 011 1v5.66a1 1 0 01-.3.7L7.6 15.5a1 1 0 01-1.42 0L.52 9.83a1 1 0 010-1.42l7.07-7.07zm6.36 6.37l-7.07 7.07-5.66-5.66L8.3 2.05h5.66v5.66z" fill-rule="evenodd"/>
      <path fill="currentColor" d="M9.7 6.3a1 1 0 101.42-1.42 1 1 0 00-1.41 1.41zM9 7a2 2 0 102.83-2.83A2 2 0 009 7z" fill-rule="evenodd"/>
    {%- when 'question_mark' -%}
      <path fill="currentColor" d="M8 14A6 6 0 108 2a6 6 0 000 12zm0 1A7 7 0 108 1a7 7 0 000 14z" fill-rule="evenodd"/>
      <path fill="currentColor" d="M7.64 9.6a.3.3 0 01-.3-.3v-.1c0-.4.07-.75.26-1.07.19-.31.47-.58.85-.87.34-.25.55-.46.67-.66s.17-.4.17-.65v-.01c0-.73-.54-1.25-1.28-1.25-.7 0-1.25.5-1.32 1.31a.3.3 0 01-.3.28H6a.3.3 0 01-.3-.36c.1-1.24 1-2.22 2.32-2.22a2.2 2.2 0 012.28 2.22v.01c0 .42-.1.8-.3 1.14-.2.34-.5.64-.9.93-.34.25-.52.44-.63.6-.1.17-.14.35-.14.64v.06a.3.3 0 01-.3.3h-.39zm.94 1.98c0 .39-.28.72-.69.72-.4 0-.69-.33-.69-.72a.7.7 0 01.7-.71c.4 0 .68.33.68.71z" fill-rule="evenodd"/>
    {%- when 'return' -%}
      <path fill="currentColor" d="M9 .5a.5.5 0 000 1h1a4.5 4.5 0 110 9H2.2l3.15-3.15a.5.5 0 10-.7-.7l-4 4a.5.5 0 000 .7l4 4a.5.5 0 00.7-.7L2.21 11.5H10a5.5 5.5 0 100-11H9z"/>
    {%- when 'ruler' -%}
      <path fill="currentColor" d="M14.93 4.11L12.1 1.28a1 1 0 00-1.41 0L6.8 5.17.78 11.18a1 1 0 000 1.42l2.82 2.82a1 1 0 001.42 0l9.9-9.9a1 1 0 000-1.4zm-10.6 10.6L1.48 11.9l1.41-1.41 1.06 1.06a.5.5 0 00.71-.71L3.61 9.77l1.42-1.42 1.05 1.06a.5.5 0 00.71-.7L5.73 7.65l1.42-1.42L8.2 7.3c.2.2.5.2.7 0s.2-.5 0-.7L7.85 5.53 9.27 4.1l1.06 1.06a.5.5 0 00.71-.7L9.98 3.4 11.39 2l2.83 2.83-9.9 9.9z"/>
    {%- when 'scissors' -%}
      <circle stroke="currentColor" fill="none" cx="4.1678491" cy="4.4444847" r="1.99998" />
      <circle stroke="currentColor" fill="none" cx="4.1678491" cy="12.444405" r="1.99998" />
      <line stroke="currentColor" fill="none" x1="13.501089" y1="3.1111643" x2="5.5811677" y2="11.031086" />
      <line stroke="currentColor" fill="none" x1="9.8144588" y1="10.09776" x2="13.501089" y2="13.777725" />
      <line stroke="currentColor" fill="none" x1="5.5811677" y1="5.8578033" x2="8.1678085" y2="8.4444447" />
    {%- when 'shirt' -%}
      <path fill="currentColor" d="M15.27 5.1l-3.3-3.3a1 1 0 00-.7-.3h-1.2a1 1 0 00-.74.32l-.04.04c-.7.7-1.86.7-2.56 0l-.05-.04a1 1 0 00-.73-.32H4.76a1 1 0 00-.72.3L.74 5.1a1 1 0 000 1.4L2.4 8.16a1 1 0 001.36.05v5.29a1 1 0 001 1h6.5a1 1 0 001-1V8.22a1 1 0 001.35-.06l1.66-1.65a1 1 0 000-1.42zM12.9 7.45L11.26 5.8v7.69h-6.5V5.8L3.11 7.46 1.45 5.8l3.3-3.3.01.01V2.5h1.19l.07.07a2.81 2.81 0 003.98 0l.06-.07h1.2l3.3 3.3-1.66 1.66z"/>
    {%- when 'shoe' -%}
      <path fill="currentColor" d="M15.5 4.54a1 1 0 00-.88-.99l-4.33-.54a1 1 0 00-1.11.85v.02A5.75 5.75 0 018.6 5.5a3.3 3.3 0 01-2.4 1.85c-1.22.2-2.19.41-2.95.67-.75.26-1.38.59-1.85 1.07-.48.5-.7 1.1-.8 1.7C.5 11.36.5 12 .5 12.67a1 1 0 001 1h13a1 1 0 001-1V4.54zm-9.13 3.8C9.63 7.78 10.18 4 10.18 4l4.33.54V11H1.58c.23-1.44 1.16-2.06 4.8-2.67zM1.5 12.66v-.04l.01-.96.02-.17H14.5v1.17h-13z"/>
    {%- when 'silhouette' -%}
      <path fill="currentColor" d="M8 1.5a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM5.5 5a2.5 2.5 0 115 0 2.5 2.5 0 01-5 0zM8 9.5c-1.87 0-3.52.17-4.7.98-1.21.85-1.8 2.3-1.8 4.52v.5h13V15c0-2.22-.59-3.67-1.8-4.52-1.18-.81-2.83-.98-4.7-.98zm4.12 1.8c.77.54 1.29 1.46 1.37 3.2H2.5c.08-1.74.6-2.66 1.37-3.2.89-.61 2.24-.8 4.12-.8s3.23.19 4.12.8z"/>
    {%- when 'star' -%}
      <path fill="currentColor" d="M8 1c.21 0 .4.13.47.33l1.62 4.54 4.92.1a.5.5 0 01.29.9l-3.92 2.9 1.42 4.58a.5.5 0 01-.75.56L8 12.17 3.95 14.9a.5.5 0 01-.75-.56l1.42-4.58L.7 6.87a.5.5 0 01.29-.9l4.92-.1 1.62-4.54A.5.5 0 018 1zm0 2L6.74 6.52a.5.5 0 01-.46.33l-3.8.08L5.5 9.17a.5.5 0 01.18.55l-1.1 3.56 3.14-2.13a.5.5 0 01.56 0l3.15 2.13-1.1-3.56a.5.5 0 01.17-.55l3.02-2.23-3.8-.08a.5.5 0 01-.46-.33L8 2.99z"/>
    {%- when 'truck' -%}
      <path fill="currentColor" d="M15.64 6.92L9.5 5.12V4a.5.5 0 00-.5-.5H1a.5.5 0 00-.5.5v8.5c0 .28.22.5.5.5h1.27a2.1 2.1 0 004.06 0h3.94a2.1 2.1 0 004.06 0h1.17a.5.5 0 00.5-.5V7.4a.5.5 0 00-.36-.48zM4.3 13.6a1.1 1.1 0 110-2.2 1.1 1.1 0 010 2.2zM6.33 12a2.1 2.1 0 00-4.06 0H1.5V4.5h7V12H6.33zm5.97 1.6a1.1 1.1 0 110-2.2 1.1 1.1 0 010 2.2zM15 12h-.67a2.1 2.1 0 00-4.06 0H9.5V6.17l5.5 1.6V12z"/>
    {%- when 'washing' -%}
      <path fill="currentColor" d="M15.12 4.51a.5.5 0 00-.6.37l-.43 1.72-.04.02-.03.01-.03.02-.03.02-.03.01-.03.02-.03.02-.03.01-.02.01-.03.02-.03.01-.03.01-.02.01-.03.01-.03.01-.02.01-.03.01-.02.01-.02.01h-.03l-.02.01h-.02l-.03.01h-.02l-.02.01h-.02l-.03.01H13.07l-.02-.01h-.02L13 6.86h-.03l-.02-.02h-.02l-.03-.01-.02-.01-.03-.01-.02-.01-.03-.01-.03-.01-.02-.02h-.03l-.03-.02-.03-.02-.03-.01-.02-.02-.03-.01-.03-.02-.03-.01-.03-.02-.03-.02h-.02l-.03-.02-.03-.02-.03-.01-.03-.02-.1-.06-.1-.06-.03-.02-.04-.02-.03-.02-.04-.02-.03-.03-.04-.02-.03-.02-.04-.02-.04-.02-.03-.02-.04-.02-.04-.02-.03-.01-.04-.02-.04-.02-.04-.02-.04-.01-.04-.02-.04-.02-.04-.01-.04-.02-.04-.01-.04-.02-.04-.01-.05-.01-.04-.01-.04-.01-.05-.01-.04-.01-.04-.01h-.05l-.04-.01-.05-.01h-.14l-.04-.01h-.18l-.04.01h-.05l-.04.01-.05.01-.04.01-.05.01-.04.01-.04.01-.05.01-.04.02L10 6l-.04.02-.04.01-.04.02-.05.01-.04.02-.04.02-.04.01-.03.02-.04.02-.04.02-.04.02-.04.02-.03.02-.04.02-.04.02-.03.02-.04.02-.03.02-.04.02-.03.02-.04.02-.23.14-.03.02-.04.02-.03.02-.03.02-.03.01-.03.02-.03.02-.03.01-.03.02-.03.01-.03.02-.02.01-.03.02-.03.01-.03.01-.02.01-.03.01-.03.01-.02.01-.03.01-.02.01-.03.01h-.02l-.03.01-.02.01h-.02l-.02.01h-.05l-.02.01h-.3l-.02-.01H7.8l-.02-.01-.03-.01h-.02l-.02-.02h-.03l-.02-.01-.03-.01-.02-.01-.03-.01-.03-.01-.02-.02H7.5l-.03-.02-.03-.02-.03-.01-.03-.02-.03-.01-.02-.02-.03-.01-.03-.02-.04-.02-.03-.02-.03-.01-.03-.02-.03-.02-.03-.02-.2-.12-.04-.02-.03-.02-.04-.02-.03-.02-.04-.02-.03-.02-.04-.02-.04-.02-.03-.02-.04-.02-.04-.02-.03-.02-.04-.02-.04-.02-.04-.01-.04-.02-.04-.02-.04-.02-.04-.01-.04-.02-.04-.01L6.05 6H6l-.05-.02-.04-.01-.04-.01-.05-.01-.04-.01-.04-.01H5.7l-.04-.01-.05-.01h-.13l-.05-.01h-.18l-.04.01h-.05l-.04.01-.05.01-.04.01h-.05l-.04.02-.04.01-.05.01-.04.02-.04.01-.04.01-.04.02-.04.01-.04.02-.04.02-.04.02-.04.01-.04.02-.04.02-.04.02-.04.02-.04.02-.03.02-.04.02-.04.02-.03.02-.04.02-.03.02-.04.02-.03.02-.04.02-.03.02-.2.12-.03.02-.04.02-.03.02-.03.02-.03.01-.03.02-.03.02-.03.01-.03.02-.03.01-.03.02-.02.01-.03.01-.03.02-.03.01-.02.01-.03.01-.03.01-.02.01-.03.01-.02.01-.03.01H3.1l-.03.01-.02.01h-.02L3 6.88h-.05l-.02.01h-.3l-.03-.01h-.02l-.02-.01-.03-.01h-.02l-.02-.02h-.03l-.02-.01-.03-.01-.03-.01-.02-.01-.03-.01-.02-.02h-.03l-.03-.02-.03-.02-.03-.01-.03-.01-.03-.02-.02-.02-.03-.01-.03-.02-.03-.02-.04-.01-.03-.02-.03-.02-.01-.01-.42-1.68a.5.5 0 00-.97.24l2 8a.5.5 0 00.48.38h10a.5.5 0 00.48-.38l2-8a.5.5 0 00-.36-.6zm-2.51 7.99H3.39L2.22 7.8l.04.02.04.01.04.01.05.01.04.01.04.01h.05l.04.01.05.01h.13l.05.01h.18L3 7.88h.05l.04-.01h.05l.04-.02h.04l.05-.02.04-.01.05-.01.04-.01.04-.02.04-.01.04-.02.04-.01.05-.02.04-.02.04-.01.03-.02.04-.02.04-.02.04-.02.04-.02.04-.02.03-.02.04-.02.04-.02.03-.02.04-.02.03-.02.04-.02.03-.02.04-.02.23-.14.03-.02.04-.02.03-.01.03-.02.03-.02.03-.02.03-.02.03-.01.03-.02.03-.01.03-.02.02-.01.03-.01.03-.02.03-.01.02-.01.03-.01.03-.01.02-.01.03-.01.02-.01.03-.01h.02l.02-.01h.03l.02-.01.03-.01h.04l.02-.01h.3l.03.01h.02l.02.01h.03l.02.02h.02l.03.01.03.01.02.01.03.01.02.01.03.01.03.02h.02l.03.02.03.01.03.02.03.01.03.02.03.01.03.02.03.02.03.02.03.01.03.02.03.02.03.02.04.02.2.12.03.02.03.02.04.02.03.02.04.02.03.02.04.02.03.02.04.02.04.02.04.02.03.02.04.02.04.01.04.02.04.02.04.02.04.01.04.02.04.02.04.01.04.01.04.02.05.01.04.01.04.01.04.01.05.01.04.01h.05l.04.01h.05l.04.01h.09l.05.01h.18l.04-.01h.05l.04-.01.05-.01h.04l.04-.02h.05l.04-.02.04-.01.05-.01.04-.02.04-.01.04-.02.04-.01.04-.02.04-.02.04-.01.04-.02.04-.02.04-.02.04-.02.04-.02.04-.02.03-.02.04-.01.04-.02.03-.03.04-.02.03-.02.04-.02.03-.02.04-.02.03-.02.04-.02.13-.08.03-.02.03-.02.04-.01.03-.02.03-.02.03-.02.03-.02.03-.01.03-.02.03-.02.03-.01.03-.02.03-.01.02-.01.03-.02h.03l.02-.02.03-.01.02-.01.03-.01.02-.01.03-.01h.02l.03-.02h.05l.02-.01h.03l.02-.01h.02l.02-.01h.3l.02.01h.03l.02.01h.02l.03.02h.02l.02.01.03.01.02.01.03.01.03.01.02.01.03.01.03.02.02.01.03.01.03.02.03.01.03.02.03.01.02.02.03.02.03.01.04.02.03.02h.01l.03.02.03.02.03.02.1.06.04.02.06.04.04.02.03.02.04.02.03.02.04.02.03.02.04.02.03.02.04.02.04.02.03.02.04.02.04.02.04.02.04.02.03.01.04.02.04.02.05.01.04.02.04.01.04.02.04.01.04.01.05.02h.04l.04.02h.04l.05.01.04.01h.09l.05.01h.09l.05.01h.18l.04-.01h.05l.04-.01h.05l.04-.02h.04l.05-.01.04-.02h.02l-1.17 4.67z"/>
    {%- endcase -%}
  </svg>
{%- endif -%}
​

[neomirae]

Thank you for your reply!!

I tried everything you showed me
But only the image is not visible..

How can I solve the problem?

[neomirae]

I named the snippet (for images) 'image.liguid' and it works!
Thank you so much for your help!😄