Shopify images focal points usage example

shopify-focal-points.liquid

  {%- if section.settings.main_image != blank -%}
    {%- assign focal_point = section.settings.main_image.presentation.focal_point -%}
    {%- capture focal_point_css -%}
      {%- if focal_point != blank -%}
        style="object-position:{{ focal_point.x }}% {{ focal_point.y }}%;"
      {%- endif -%}
    {%- endcapture -%}
    <div class="collection-banner--img img-cover">
      <img class="lazyload" data-src="{{ section.settings.main_image | img_url: 'master' }}" alt="Banner" {{ focal_point_css }}>
    </div>
  {%- endif -%}