Los desarrolladores de WooCommerce que amplían sus tiendas con JavaScript personalizado (jQuery, vanilla JS, React) usaban las acciones AJAX de WooCommerce, la API REST y los hooks de WordPress. En Shopify, el desarrollo equivalente del lado del cliente utiliza la Storefront API: una API GraphQL pública para consultas de productos, gestión del carrito y operaciones con clientes. Esta guía introduce la Storefront API para desarrolladores familiarizados con el enfoque de WooCommerce.

APIs frontend de WooCommerce vs Shopify

Caso de uso	WooCommerce	Shopify
Consultar productos en el cliente	WC REST API v3 o WP_Query vía AJAX	Storefront API: productQuery, products
Gestión del carrito	WC AJAX add-to-cart + wc_add_to_cart_params	Storefront API: cartCreate, cartLinesAdd, cartLinesUpdate
Inicio de sesión del cliente	Autenticación WP	Storefront API: customerAccessTokenCreate
Datos de cuenta del cliente	WP user meta, WC customer API	Storefront API: customer query
Buscar productos	WP_Query search o SearchWP	Storefront API: predictiveSearch, search
Actualizaciones dinámicas de secciones	WordPress AJAX + renderizado parcial PHP	Shopify Section Rendering API
Lectura de metafields	WP postmeta vía AJAX	Storefront API: product.metafields

Fundamentos de la Storefront API

Autenticación

La Storefront API utiliza un Storefront Access Token público (no la clave de la Admin API). Créalo en Admin → Apps → Develop apps → crear una app personalizada → habilitar acceso a la Storefront API:

// Endpoint de la Storefront API
const SHOPIFY_DOMAIN = 'yourstore.myshopify.com';
const STOREFRONT_TOKEN = 'your_storefront_access_token';

const endpoint = 'https://' + SHOPIFY_DOMAIN + '/api/2024-01/graphql.json';

async function storefrontQuery(query, variables = {}) {
  const response = await fetch(endpoint, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-Shopify-Storefront-Access-Token': STOREFRONT_TOKEN,
    },
    body: JSON.stringify({ query, variables }),
  });
  return response.json();
}

Consultas de productos

Obtener producto por handle

const PRODUCT_QUERY = `
  query getProduct($handle: String!) {
    product(handle: $handle) {
      id
      title
      description
      priceRange {
        minVariantPrice { amount currencyCode }
        maxVariantPrice { amount currencyCode }
      }
      variants(first: 100) {
        edges {
          node {
            id
            title
            price { amount currencyCode }
            availableForSale
            selectedOptions { name value }
            sku
          }
        }
      }
      images(first: 10) {
        edges {
          node { url altText width height }
        }
      }
    }
  }
`;

const result = await storefrontQuery(PRODUCT_QUERY, { handle: 'my-product' });

Obtener metafields del producto

const PRODUCT_METAFIELDS_QUERY = `
  query getProductWithMetafields($handle: String!) {
    product(handle: $handle) {
      title
      metafield(namespace: "product_info", key: "material") {
        value
        type
      }
      metafields(identifiers: [
        { namespace: "product_info", key: "material" },
        { namespace: "product_info", key: "weight_g" }
      ]) {
        namespace
        key
        value
        type
      }
    }
  }
`;

Nota: los metafields deben configurarse como "accesibles desde la tienda" en Admin → Configuración → Datos personalizados para que sean legibles vía Storefront API.

Gestión del carrito (reemplaza el carrito AJAX de WooCommerce)

Crear un carrito

const CREATE_CART = `
  mutation cartCreate($input: CartInput!) {
    cartCreate(input: $input) {
      cart {
        id
        checkoutUrl
        lines(first: 10) {
          edges {
            node {
              id
              quantity
              merchandise {
                ... on ProductVariant {
                  id title price { amount }
                }
              }
            }
          }
        }
        cost {
          totalAmount { amount currencyCode }
        }
      }
      userErrors { field message }
    }
  }
`;

const result = await storefrontQuery(CREATE_CART, {
  input: {
    lines: [{ quantity: 1, merchandiseId: 'gid://shopify/ProductVariant/12345' }],
    buyerIdentity: { email: 'customer@example.com' }
  }
});

const cartId = result.data.cartCreate.cart.id;
// Guardar cartId en localStorage para persistencia del carrito

Añadir al carrito (equivalente a wc_add_to_cart de WooCommerce)

const ADD_TO_CART = `
  mutation cartLinesAdd($cartId: ID!, $lines: [CartLineInput!]!) {
    cartLinesAdd(cartId: $cartId, lines: $lines) {
      cart {
        id
        lines(first: 20) {
          edges {
            node {
              id quantity
              merchandise {
                ... on ProductVariant { id title }
              }
            }
          }
        }
        cost { totalAmount { amount currencyCode } }
      }
      userErrors { field message }
    }
  }
`;

await storefrontQuery(ADD_TO_CART, {
  cartId: 'gid://shopify/Cart/abc123',
  lines: [{ quantity: 2, merchandiseId: 'gid://shopify/ProductVariant/67890' }]
});

Autenticación de clientes

WooCommerce usaba cookies de WordPress para las sesiones de clientes. La Shopify Storefront API usa tokens de acceso:

// Inicio de sesión (obtener token de acceso del cliente)
const CUSTOMER_LOGIN = `
  mutation customerAccessTokenCreate($input: CustomerAccessTokenCreateInput!) {
    customerAccessTokenCreate(input: $input) {
      customerAccessToken {
        accessToken
        expiresAt
      }
      customerUserErrors { code field message }
    }
  }
`;

const loginResult = await storefrontQuery(CUSTOMER_LOGIN, {
  input: { email: 'customer@example.com', password: 'password' }
});

const accessToken = loginResult.data.customerAccessTokenCreate.customerAccessToken.accessToken;

// Obtener datos del cliente con token de acceso
const CUSTOMER_QUERY = `
  query getCustomer($customerAccessToken: String!) {
    customer(customerAccessToken: $customerAccessToken) {
      id
      firstName lastName email
      orders(first: 5) {
        edges {
          node {
            id orderNumber totalPriceV2 { amount currencyCode }
            processedAt
          }
        }
      }
    }
  }
`;

Búsqueda predictiva (equivalente a la búsqueda en vivo de WooCommerce)

const PREDICTIVE_SEARCH = `
  query predictiveSearch($query: String!) {
    predictiveSearch(query: $query) {
      products {
        id title handle
        featuredImage { url altText }
        priceRange { minVariantPrice { amount currencyCode } }
      }
      collections { id title handle }
      pages { id title handle }
    }
  }
`;

// Manejador de entrada de búsqueda con debounce
async function handleSearchInput(query) {
  if (query.length < 3) return;
  const results = await storefrontQuery(PREDICTIVE_SEARCH, { query });
  renderSearchResults(results.data.predictiveSearch.products);
}

Section Rendering API (equivalente al renderizado parcial AJAX de WooCommerce)

La Section Rendering API de Shopify renderiza secciones del tema en el servidor y devuelve HTML — el equivalente en Shopify de los renderizados parciales AJAX de WordPress:

// Renderizar sección del drawer del carrito vía Section Rendering API
async function refreshCartDrawer() {
  const response = await fetch('/cart?sections=cart-drawer');
  const data = await response.json();
  document.getElementById('cart-drawer').innerHTML = data['cart-drawer'];
}

// Renderizar formulario de producto tras cambio de variante
async function renderProductForm(productHandle, variantId) {
  const response = await fetch(
    `/products/${productHandle}?variant=${variantId}§ions=product-form`
  );
  const data = await response.json();
  document.getElementById('product-form').innerHTML = data['product-form'];
}

Diferencias clave respecto a AJAX de WooCommerce

Sin nonces requeridos: La Storefront API de Shopify y la Section Rendering API no requieren nonces de seguridad de WordPress
GraphQL en lugar de REST: La Storefront API es GraphQL — solicita exactamente los campos que necesitas. Sin over-fetching.
El token de acceso de la tienda es público: A diferencia de la Admin API, el token de la Storefront es seguro para exponer en JavaScript del lado del cliente
Sin sesión en el servidor: El carrito se identifica por su ID (almacenado en localStorage/cookie). No se necesita sesión WooCommerce en el servidor.
El checkout es gestionado por Shopify: La cart.checkoutUrl redirige al checkout alojado por Shopify — no hay página de checkout PHP personalizada
Sin WP_Query: No se pueden consultar productos con condiciones WHERE arbitrarias en el cliente. Usa colecciones y búsqueda para el descubrimiento de productos.

Lista de verificación para desarrolladores

Crear un token de acceso a la Storefront API: Admin → Apps → Develop apps → permisos de la Storefront API
Habilitar acceso a la tienda para todos los metafields necesarios en JS del lado del cliente
Portar las consultas de productos AJAX de WooCommerce a consultas GraphQL de la Storefront API
Reemplazar WC AJAX add-to-cart con mutaciones cartLinesAdd de la Storefront API
Almacenar el ID del carrito en localStorage; persistir entre navegaciones de página
Reemplazar la búsqueda en vivo de WooCommerce con predictiveSearch de la Storefront API
Reemplazar los renderizados parciales AJAX con llamadas a la Section Rendering API
Reemplazar la autenticación de clientes WP con customerAccessTokenCreate de la Storefront API
Probar todas las funciones de carrito y producto del lado del cliente de extremo a extremo en la tienda de desarrollo de Shopify

La Section Rendering API es una de las herramientas de desarrollador más infrautilizadas de Shopify. Elimina casi todos los casos en que los desarrolladores de WooCommerce recurrían por defecto a AJAX + renderizados parciales PHP — en lugar de escribir un endpoint PHP personalizado para devolver HTML del carrito, llama a /cart?sections=cart-drawer y obtén el HTML completo renderizado de la sección real del tema. Este enfoque mantiene el renderizado del carrito coherente con el tema, gestiona los casos extremos (descuentos, tarjetas regalo, estimaciones de envío) automáticamente y no requiere código PHP equivalente personalizado.

Shopify Storefront API para desarrolladores de WooCommerce (2026)