Ir al contenido principal
El editor de Fabrixa Studio: un personalizador de productos de marca blanca integrado en una tienda online
Desarrolladores · Fabrixa Studio

Sus clientes diseñan sus productos — bajo su marca.

Fabrixa Studio es un marca blanca el configurador que incrusta en la página de su producto como un iframe. Sus clientes crean o suben sus propios diseños y los ven en tiempo real sobre el producto; el editor lleva su imagen de marca, no la nuestra, por lo que nunca ven Fabrixa. Cuando hayan terminado, realizas el pedido basándose en la personalización guardada; no hay que subir ni almacenar ningún archivo de diseño.

Marca blanca · Shopify, WooCommerce y soluciones personalizadas · Vista previa en directo · Pedido por referencia

Fabrixa Studio · Demostración en directo

Prueba el editor aquí mismo.

Este es precisamente el editor que tendrías que integrar: ábralo, añade el diseño y crea un producto real de nuestro catálogo. No hay que instalar nada ni crear una cuenta.

Es el mismo editor que utilizan sus clientes para diseñar a través de los módulos de Shopify y WooCommerce o de API. Esta página es una demostración en tiempo real: el proceso de pedido se realiza en la plataforma una vez que registrarse.

Ver el editor

Su imagen de marca. El diseño de su cliente. Un único lienzo.

Studio integrado en un escaparate: una biblioteca de diseño, herramientas de texto, formas, imágenes y capas, y una vista previa en tiempo real de la repetición del diseño en el producto. Funciona con marca blanca, por lo que sus clientes ven su tienda, nunca Fabrixa.

yourshop.com/personalizar
El editor Fabrixa Studio integrado en una tienda online: biblioteca de diseños, herramientas de texto, formas, imágenes y capas, y una vista previa en tiempo real de la repetición del estampado en una funda nórdica, con marca blanca bajo la marca del comerciante.El editor Fabrixa Studio integrado en una tienda online: biblioteca de diseños, herramientas de texto, formas, imágenes y capas, y una vista previa en tiempo real de la repetición del estampado en una funda nórdica, con marca blanca bajo la marca del comerciante.
A qué se dedica Studio

Un configurador de marca blanca, integrado en su proceso de pago.

Studio permite a sus clientes personalizar productos en tiempo real —crear un diseño o subir uno propio— y verlo aplicado al producto antes de comprarlo, todo ello con su imagen de marca.

01
Marca blanca, bajo su marca

El editor lleva su imagen de marca, no la nuestra: sus clientes personalizan y ven una vista previa de los productos en tiempo real sin ver nunca Fabrixa.

02
Crear o subir diseños

Crean un diseño en Studio o suben su propio material gráfico y, a continuación, lo colocan en el producto en el editor.

03
Visualización del producto en tiempo real

Studio muestra el diseño aplicado al producto real, de modo que los clientes pueden ver lo que recibirán antes de añadirlo al carrito.

04
Ahorro por artículo del carrito

Cada personalización se almacena asociada a un cart_item_key que usted proporciona: un valor único por cada línea del carrito por su parte.

05
Vista previa de la imagen bajo demanda

Obtener una imagen de vista previa renderizada de cualquier cart_item_key para mostrarlo en el carrito, en el resumen del pedido o en cualquier otra parte de su tienda.

06
Sin gestión de archivos

Usted nunca tiene que tocar los archivos de diseño. Indique el cart_item_key en el pedido y Fabrixa adjunta automáticamente el diseño guardado.

Paso 1 — Incrustar

Un iframe en la página de su producto.

¿Vende en Shopify o WooCommerce? Studio está integrado en esos módulos de tienda: solo tiene que activarlo, sin necesidad de programar. Para tiendas y plataformas personalizadas, incorpórelo usted mismo: Studio se aloja en studio.fabrixa.com y se añadió con un iframe. Introduzca tres valores en la URL; el resto se gestiona desde el editor, que se muestra con marca blanca bajo su imagen de marca.

  • application_key — su clave de aplicación, limita la integración a su canal de ventas
  • sku — la variante de producto SKU, extraída de la integración API
  • cart_item_key — un valor único que generas por cada línea del carrito; Studio guarda la personalización asociada a ella
página-del-producto.html
<!-- Embed Fabrixa Studio on your product page -->
<iframe id="fabrixa-studio"
  src="https://studio.fabrixa.com?application_key=APPLICATION_KEY&sku=COF099191&cart_item_key=CART_ITEM_KEY"
  name="FabrixaStudio"
  scrolling="no" frameborder="1"
  width="100%" height="100%" allowfullscreen>
</iframe>
Paso 2 — Escuchar

Studio responde mediante postMessage.

Studio envía dos mensajes a la ventana principal. customizationFinished se activa cuando el cliente hace clic Añadir al carrito; closeButtonClicked se dispara cuando hacen clic Atrás. Presta atención a los sonidos que se oyen en el dispositivo principal y comprueba siempre event.origin.

Cuando el customizationFinished Cuando se active el evento, añade la línea a su carrito utilizando la misma clave cart_item_key que has pasado al iframe. Esa clave vincula la línea al diseño guardado.

studio-events.js
window.addEventListener("message", (event) => {
  // Always check the origin first
  if (event.origin !== "https://studio.fabrixa.com") return;

  if (event.data === "customizationFinished") {
    // Add to Cart → store the line keyed by your cart_item_key
    addToCart(cartItemKey);
  } else if (event.data === "closeButtonClicked") {
    // Back → close the editor / restore the product page
    closeStudio();
  }
});
Paso 3 — Vista previa

Muestra el diseño terminado donde quieras.

Una vez guardada una personalización, obtén una imagen renderizada de la misma desde el endpoint de vista previa; solo tiene que establecerla como la src de un <img>. Ideal para el carrito, el resumen del pedido o una página de confirmación.

La vista previa se basa en el mismo cart_item_key, con su clave de aplicación en la cadena de consulta.

cart-preview.html
<!-- Rendered preview of the saved customisation -->
<img
  src="https://api.fabrixa.com/v2/studio/customizations/CART_ITEM_KEY/preview?Application-Key=APPLICATION_KEY"
  alt="Customised product preview"
  style="max-width:100%;height:auto">
Paso 4 — Realizar el pedido

Realiza el pedido indicando la referencia.

Al finalizar la compra, POST la orden de /v2/integration/orders desde su backend. Para una línea diseñada por un cliente en Studio, envía lo habitual sku y quantity además de lo mismo cart_item_key que has pasado al iframe. Esa clave es el diseño guardado, así que no sources Se necesita el archivo. Fabrixa extrae la personalización y la incorpora a la producción.

cart_item_key es la referencia de Studio: utilícela únicamente para las líneas que el cliente haya personalizado en Studio. Cada fila contiene o bien un cart_item_key (diseñado en Studio) o un archivo llamado sources (su propio diseño: PDF, TIFF, JPG o PNG), nunca ambos. El resto de datos del pedido son idénticos.

POST /v2/integration/orders
{
  "number": "NL2026063001",
  "purchased_at": "2026-06-30 12:00:00",
  "rows": [
    {
      "sku": "SB796162",
      "quantity": 1,
      "cart_item_key": "0cb76770-de2d-4524-aa48-47b6e5f0d8a5"
    }
  ],
  "customer":         { "first_name": "Maria", "email": "maria@example.com" },
  "shipping_address": { "...": "..." }
}
Llaves y seguridad

Clave de aplicación en el navegador, token de acceso en su backend.

Studio y el endpoint de vista previa utilizan su Application Key, que, por diseño, es visible en el código incrustado: solo afecta al editor y muestra vistas previas de su canal. Para crear pedidos se necesita el Application Access Token además, y eso se queda en su servidor.

En el navegador

Estudio y vista previa

  • application_key en la URL del iframe de Studio
  • Application-Key en la URL de la imagen de vista previa
  • Muestra el editor y las vistas previas de los diseños guardados para su canal
  • No se pueden realizar pedidos, consultar la facturación ni consultar los datos de otro canal
Solo backend

Creación de pedidos

  • Authorization: Bearer APPLICATION_ACCESS_TOKEN
  • X-Application-Key: APPLICATION_KEY
  • Crea y realiza el seguimiento de los pedidos a través de POST /v2/integration/orders
  • Guarda el token de acceso en el servidor; nunca lo incluyas en el código del cliente.
Acceso

Studio está habilitado por cuenta.

Cree un canal de ventas en su panel de control para generar la clave de aplicación con la que se autentica la aplicación integrada; a continuación, desarrolle y pruebe la aplicación con ese canal antes de que empiece a gestionar pedidos reales. En la documentación de referencia de API hay una demostración en vivo en la que puede abrir Studio con su propio SKU y su clave; los precios varían según el nivel de volumen, así que póngase en contacto con nuestro equipo para obtener más detalles.

Preguntas frecuentes

Fabrixa Studio respondió:

¿Para qué sirve Fabrixa Studio?

Fabrixa Studio es un personalizador de productos de marca blanca que los comerciantes integran en su página de productos mediante un iframe. Los clientes crean o suben sus propios diseños y los visualizan en tiempo real en el producto, con la imagen de marca del comerciante en lugar de la de Fabrixa. A continuación, el pedido se realiza en función de la personalización guardada por referencia, por lo que no es necesario subir ni almacenar ningún archivo de diseño.

¿Cómo puedo integrar Fabrixa Studio en la página de mi producto?

Añade un iframe que apunte a studio.fabrixa.com e incluye tres valores en la URL: «application_key» para limitar la incrustación a su canal de ventas, «sku» para la variante del producto y «cart_item_key», un valor único que generas por cada línea del carrito y con el que Studio guarda la personalización. Todo lo demás, incluida la imagen de marca del editor, se gestiona dentro de Studio.

¿Fabrixa Studio avisa a mi tienda online cuando un cliente termina un diseño?

Studio envía dos mensajes a la ventana principal mediante postMessage: «customizationFinished», que se activa cuando el cliente hace clic en «Añadir al carrito», y «closeButtonClicked», que se activa cuando hace clic en «Atrás». Su página debe comprobar event.origin antes de actuar en respuesta a cualquiera de los dos mensajes y, a continuación, añadir la línea al carrito utilizando como clave el mismo cart_item_key pasado al iframe.

¿Cómo puedo vincular un diseño de Studio a un pedido?

Envía la misma clave «cart_item_key» que pasaste al iframe de Studio como una fila del pedido, junto con el SKU y la cantidad, cuando realices la solicitud POST a /v2/integration/orders. Esa clave corresponde al diseño guardado, por lo que no se necesita ningún archivo de fuentes para esa fila: cada fila del pedido incluye o bien un `cart_item_key` o bien un archivo de fuentes, pero nunca ambos.

¿Es seguro mostrar en el navegador la clave de aplicación que se utiliza en Fabrixa Studio?

Sí, la clave de aplicación es visible en la integración de Studio por diseño; solo limita el editor y la imagen de vista previa a su canal de ventas y no puede realizar pedidos, consultar la facturación ni acceder a los datos de otro canal. Para crear pedidos también se necesita un token de acceso a la aplicación independiente, que permanece en su servidor y se envía como un token «Bearer».

¿Estás listo para la integración?

Añada Studio a su tienda.

Cree un canal de ventas para generar sus claves e integrar Studio hoy mismo. ¿Necesita ayuda para configurar los eventos o el flujo de pedidos? Hable con un ingeniero de soluciones: le responderemos en el plazo de un día laborable.