@studiometa/ui

Appearance

FigureShopify JS ​

Use the FigureShopify component to display responsive images with Shopify CDN image_url API.

Usage ​

Register the component in your JavaScript app and use it in your templates. The component will transform the data-src URL to load an image at the dimension of the <img> DOM element.

A component mounts on its configured name, and the Liquid markup below writes data-component="Figure", so declare that name on a subclass:

js
import { registerComponent } from '@studiometa/js-toolkit';
import { FigureShopify } from '@studiometa/ui';

class Figure extends FigureShopify {
  static config = {
    name: 'Figure',
  };
}

registerComponent(Figure);
liquid
<div class="card">
  <figure data-component="Figure">
    <img
      data-ref="img"
      src="placeholder.png"
      data-src="{{ product | image_url }}"
      width="200"
      height="200"
      alt="">
  </figure>
</div>