Static Box API guide for developers

This guide explains how to use the Skio Static Build-a-Box feature with a custom frontend flow via API, rather than using Skio's default Build-a-Box interface.

For documentation on the standard Static Build-a-Box setup, see: Static Build-a-Box setup guide.

Fetching Static Build-a-Box data from the API

Endpoint: https://api.skio.com/storefront-http/get-classic-box-v2

Send a POST request with a JSON body like the example below:

{
  "productVariantPlatformId": "7194276266047",
  "sellingPlanPlatformId": "878510112"
}

The sellingPlanPlatformId parameter is optional and can be undefined.

Example function for fetching Static Build a Box data

const fetchClassicBoxV2Information = async(boxParentProductId, sellingPlanId) => {
  return new Promise((resolve, reject) => {
    fetch('https://api.skio.com/storefront-http/get-classic-box-v2',
      {
        method: 'POST',
        body: JSON.stringify(
          {
            'productVariantPlatformId': boxParentProductId,
            'sellingPlanPlatformId': sellingPlanId
          }
        )
      }).then(
        (response) => response.json()
      ).then(
        (response) => {
          if(!response.ok) throw new Error('Failed to get box');
          const { ClassicBoxV2 } = response;
          resolve(ClassicBoxV2);
        }
      ).catch((error) => {
        console.error(error);
        reject(error);
      })
  });
}

Data structure of the endpoint response

{
  platformId: string;
  size: number;
  title: string;
  price: number;
  sellingPlan?: string;
  currencyCode: string;
  imageSrc: string;
  selectableProductVariants: SelectableProductVariantDisplay[];
}

SelectableProductVariantDisplay = {
  platformId: string;
  quantity: number;
  productTitle: string;
  productVariantTitle: string;
  imageSrc: string;
  price: number;
};

Building your custom flow and passing customer selections through checkout

As the third-party developer, you'll need to implement the user experience for selecting box items. Once the customer has made their selections, call the Shopify cart API to add the items with custom properties for each child item.

Example cart payload

{
  "_pvgid://shopify/ProductVariant/44658179670306": 2,
  "_pvgid://shopify/ProductVariant/44658179703074": 1,
  "_pvgid://shopify/ProductVariant/44658179735842": 2
}

This structure passes the customer's box selections through checkout with the proper quantities for each variant.