Shopify

Unpic can transform images with Shopify using the shopify provider. It can be used with Unpic framework components, or you can use the base unpic libary to generate image URLs directly.

You can import the shopify provider from the unpic package using a subpath import:

import { transform } from 'unpic/providers/shopify';

If using an Unpic component, you can optionally pass custom operations and options to the component using an object with a shopify key. This is lets you use extra features supported by Shopify, or set custom configuration options.

This example uses @unpic/astro, but the same applies to any Unpic component:

---
import { Image } from '@unpic/astro';
---
<Image
  src="image.jpg"
  width={800}
  height={600}
  options={{
      "shopify": {
      // shopify options here
      }
  }}
  operations={{
      "shopify": {
      // shopify operations here
      }
  }}
/>

In supported frameworks you can also import the base component and pass the transformer to it directly. This lets you create a custom component that doesn’t need to include and other transformer code.

---
import { Image } from '@unpic/astro/base';
import { transform } from 'unpic/providers/shopify';
---
<Image
  src="image.jpg"
  width={800}
  height={600}
  transformer={transformer}
/>

Types

The shopify provider supports the following arguments:

Options

The shopify provider does not support any extra configuration options.

Operations

crop

Type: "center" | "top" | "left" | "right" | "bottom"

Crop option, such as top, bottom, or center.

pad_color

Type: string

Background color for padding.

format

Type: ImageFormat

width

Type: string | number

height

Type: string | number

quality

Type: string | number

This page is auto-generated from the shopify provider types. See anything wrong or missing? Suggest a change on GitHub.