Shopify

The Shopify connector reads your store's public catalogue through Shopify's Storefront API, without a token: lists of products with titles, images, prices and variant IDs, one product by its handle, and collections. Use it to let people browse your products in your app.

Checkout, payments, customer accounts and order management are not implemented. A product appears only when it is published and available to your storefront, and your store's access rules still apply. Your app asks Shopify directly; Appsanic does not pass the requests on.

Shopify store address

Required. Your store's original address ending in .myshopify.com, such as your-shop.myshopify.com, even if customers use another domain. Enter just the address, in lower case, without https:// or a page path. In Shopify it is under Settings, Domains.

No API key is needed, and the connector has no field for one: private Storefront and Admin tokens are not used. A custom domain is refused.

1. In Shopify, publish the products and collections you want to show and make them available to your storefront.
2. Choose Connect in the rail, then Connect Shopify.
3. Under Test details, enter the Shopify store address. Add another store under Live details if you have one.
4. Choose Check connection, then Connect.

The check asks Shopify for one product through Appsanic's server and shows Connection verified when the reply is a valid product list. It does not test every operation, or whether the browser preview can reach your store. The steps every connector shares are in Connectors.

Lists include pageInfo: hasNextPage says whether there is more, and passing its endCursor as after loads the next page.

• Each product has id, title, handle, description, featuredImage (url, altText, width, height), priceRange.minVariantPrice (amount, currencyCode) and variants.
• Each variant has id, title, availableForSale and price (amount, currencyCode).
• Each collection has id, title, handle, description and image (url, altText).

Import getConnector from @appsanic/connectors with your connection's id, shown under How to use Shopify in the connection's settings. The reply is Shopify's GraphQL envelope as an unknown value: read data.products.nodes, data.product (which can be null) or data.collections.nodes. It is not a fetch response or a REST array, so do not call .json() on it. There is no availability to check.

import { getConnector } from "@appsanic/connectors";

// Use the id of your own connection, shown under How to use Shopify.
const shop = getConnector("shopify-0b7e4f19");

type Row = Record<string, unknown>;
const isRow = (value: unknown): value is Row =>
  typeof value === "object" && value !== null && !Array.isArray(value);

export async function loadProducts(after?: string) {
  const params: Record<string, string | number> = { limit: 20 };
  if (after) params.after = after;
  const result = await shop.request("products", params);
  const products = isRow(result) && isRow(result.data) ? result.data.products : null;
  if (!isRow(products) || !Array.isArray(products.nodes) || !isRow(products.pageInfo)) {
    throw new Error("Shopify sent an unexpected catalogue.");
  }
  const items = products.nodes.filter(isRow).flatMap((node) =>
    typeof node.title === "string" && typeof node.handle === "string"
      ? [{ title: node.title, handle: node.handle }]
      : [],
  );
  const { hasNextPage, endCursor } = products.pageInfo;
  const next = hasNextPage === true && typeof endCursor === "string" ? endCursor : null;
  return { items, next };
}

Pass an item's handle to product for a detail screen. If Shopify reports errors in its reply, the request throws and asks you to check storefront access and published products.

On a paid plan, Build with Sanic AI in the connection's settings starts a Sanic AI draft that names this connection, so you can ask for a product list or a collection screen. See With Sanic AI.

Catalogue requests work in the browser preview, in Expo Go and in a native build, with the details your app uses (Test or Live). The connection check runs on Appsanic's server, so it cannot show whether the browser preview can reach your store: open the screen in the preview, then on a phone through Expo Go.

• Test does not create a Shopify sandbox. Use a development store, or a store you are happy to read while testing.
• A request that takes more than 15 seconds fails, and a reply larger than 4 MB is refused.
• Nothing here takes payment or places an order: people cannot buy from your app through this connector.