Shopify object types

SALVO-TS includes up-to-date types for common Shopify Liquid and AJAX API objects, so you don't need to define these every time you're dealing with Shopify data.

For general information on working with types see working with typescript.

Work in progress

The Shopify Types are a WIP - if you encounter Shopify Liquid or AJAX API objects which are missing fields or have correct types, please report them so we can improve the typings.

Liquid types

Liquid types are namespaced under Shopify.Liquid., i.e. Shopify.Liquid.Product or Shopify.Liquid.LinkedListItem.

Only items which are "JSON-able" (either natively via the |json filter, or via the {! json !} macro) are supported. For the full list of available types just start typing Shopify.Liquid. and refer to your editor's intellisense/autocomplete, or view the full typings file here.

By using these types, you'll get accurate intellisense/autocomplete for objects coming from Liquid:

Descriptions and links from the Shopify Liquid docs are also available - depending on your editor setup, you may need to hover over a property to expand them:

caution

Liquid types are generated automatically from the Liquid docs and may have issues. If you notice issues, please report them.

Example usages:

ts
const product: Shopify.Liquid.Product = ...;
@Prop() product!: Shopify.Liquid.Product;
function offerProduct(product: Shopify.Liquid.Product) {
    window.alert(`Try our new ${product.title}!`);
}

ts
const product: Shopify.Liquid.Product = ...;
@Prop() product!: Shopify.Liquid.Product;
function offerProduct(product: Shopify.Liquid.Product) {
    window.alert(`Try our new ${product.title}!`);
}

Details: Example type interface - Image

ts
/**
 * (via |json) An image object returns information about an image. Image objects are usually attributes of other objects, such as product, variant, collection, and article.
 * The image object has the following attributes:
 * @see https://shopify.dev/api/liquid/objects/image
 */
export interface Image {
    /**
     * (via |json) Returns the alt tag of the image, set in the Products page of the Admin.
     * @see https://shopify.dev/api/liquid/objects/image#image-alt
     */
    alt: string|null;
    /**
     * (via |json) Returns the height of the image in pixels.
     * @see https://shopify.dev/api/liquid/objects/image#image-height
     */
    height: number;
    /**
     * (via |json) Returns the ID of the image.
     * @see https://shopify.dev/api/liquid/objects/image#image-id
     */
    id: number;
    /**
     * (via |json) Returns the position of the image in the product object's media array.
     * @see https://shopify.dev/api/liquid/objects/image#image-position
     */
    position: number;
    /**
     * (via |json) Returns the id of the image's product.
     * @see https://shopify.dev/api/liquid/objects/image#image-product_id
     */
    product_id: number;
    /**
     * (via |json) Returns the relative path of the product image. This is the same as outputting {{ image }}.
     * To return the URL of the image on Shopify's Content Delivery Network (CDN), use the appropriate URL filter.
     * To see a full list of available image sizes, see image size parameters.
     * Shown below is an example of loading a product image using the image_url filter.
     * @see https://shopify.dev/api/liquid/objects/image#image-src
     */
    src: string;
    /**
     * (via |json) Returns the width of the image in pixels.
     * @see https://shopify.dev/api/liquid/objects/image#image-width
     */
    width: number;
    /**
     * (via |json)
     */
    variant_ids: number[];
    /**
     * (via |json)
     */
    created_at: string;
    /**
     * (via |json)
     */
    updated_at: string;
}

ts
/**
 * (via |json) An image object returns information about an image. Image objects are usually attributes of other objects, such as product, variant, collection, and article.
 * The image object has the following attributes:
 * @see https://shopify.dev/api/liquid/objects/image
 */
export interface Image {
    /**
     * (via |json) Returns the alt tag of the image, set in the Products page of the Admin.
     * @see https://shopify.dev/api/liquid/objects/image#image-alt
     */
    alt: string|null;
    /**
     * (via |json) Returns the height of the image in pixels.
     * @see https://shopify.dev/api/liquid/objects/image#image-height
     */
    height: number;
    /**
     * (via |json) Returns the ID of the image.
     * @see https://shopify.dev/api/liquid/objects/image#image-id
     */
    id: number;
    /**
     * (via |json) Returns the position of the image in the product object's media array.
     * @see https://shopify.dev/api/liquid/objects/image#image-position
     */
    position: number;
    /**
     * (via |json) Returns the id of the image's product.
     * @see https://shopify.dev/api/liquid/objects/image#image-product_id
     */
    product_id: number;
    /**
     * (via |json) Returns the relative path of the product image. This is the same as outputting {{ image }}.
     * To return the URL of the image on Shopify's Content Delivery Network (CDN), use the appropriate URL filter.
     * To see a full list of available image sizes, see image size parameters.
     * Shown below is an example of loading a product image using the image_url filter.
     * @see https://shopify.dev/api/liquid/objects/image#image-src
     */
    src: string;
    /**
     * (via |json) Returns the width of the image in pixels.
     * @see https://shopify.dev/api/liquid/objects/image#image-width
     */
    width: number;
    /**
     * (via |json)
     */
    variant_ids: number[];
    /**
     * (via |json)
     */
    created_at: string;
    /**
     * (via |json)
     */
    updated_at: string;
}

AJAX API types

// TODO