Paso 1: Obtén tu clave de widget Photta
Inicia sesión en el Panel de Control de Photta Business en business.photta.app. Ve a Configuración → Claves API y localiza tu clave pública; comienza por pk_live_ y tiene el aspecto pk_live_xxxxxxxxxxxxxxxxxxxxxxxx. Haz clic en el icono de copiar junto a la clave. Esta es la única credencial que necesitas para la integración con Shopify; nunca pegues tu clave secreta sk_live_ en ningún código del frontend.
Si aún no tienes una cuenta, haz clic en 'Comenzar prueba gratuita' en la página de Photta Business. La prueba te ofrece 50 probadores gratuitos sin necesidad de tarjeta de crédito. Tu clave pk_live_ estará disponible inmediatamente después de verificar tu correo electrónico y registrar el dominio de tu tienda en Configuración → Dominios Permitidos.
Paso 2: Abre el código del tema de Shopify
En tu panel de administración de Shopify, ve a Tienda Online → Temas. Junto a tu tema activo, haz clic en el menú de tres puntos y selecciona Editar código. El editor de código abrirá un árbol de archivos a la izquierda. Despliega la carpeta Layout y haz clic en theme.liquid; esta es la plantilla maestra que envuelve cada página de tu tienda.
Usa la búsqueda integrada de tu navegador (Cmd+F o Ctrl+F) dentro del editor de código y busca </body>. Deberías encontrar exactamente una coincidencia cerca del final del archivo, justo encima de </html>. Coloca el cursor en la línea inmediatamente anterior a </body>. Todo lo que pegues aquí se cargará en cada página de tu tienda, que es exactamente lo que necesitas.
Paso 3: Pega el fragmento de script de Photta
Pega el siguiente fragmento en la línea inmediatamente anterior a </body>, reemplazando pk_live_... con tu clave real copiada en el Paso 1: <script src="https://widget.photta.app/sdk.js" data-pk="pk_live_..." defer></script>. El atributo defer es importante: evita que el script bloquee el renderizado de tu página mientras asegura que el widget se inicialice tras la carga del DOM.
Haz clic en Guardar en la esquina superior derecha del editor de código. Shopify guardará el archivo y mostrará un aviso de confirmación verde. No es necesario publicar una nueva versión del tema ni realizar ninguna otra acción; el cambio se aplica en tu tema activo en el momento en que haces clic en Guardar.
Paso 4: Verifica que el widget se haya cargado correctamente
Abre cualquier página de producto en tu tienda en una nueva pestaña del navegador (usa una ventana de incógnito para evitar el almacenamiento en caché de la sesión). Desplázate hasta la sección de producto; deberías ver un botón 'Pruébatelo' cerca del botón de Añadir al carrito. Haz clic en él, sube una foto de prueba y confirma que aparece el resultado. Si ves el botón, la instalación se ha completado.
Si el botón no aparece, abre la consola de desarrollador del navegador (F12 → pestaña Consola) y busca mensajes de error de photta o sdk.js. El problema más común es una discrepancia de dominio: el dominio de tu tienda debe estar listado en Configuración → Dominios Permitidos en el Panel de Control para Empresas. Añádelo allí, espera 30 segundos y recarga la página del producto.
Paso 5: Personaliza los colores del widget para que coincidan con tu marca
Por defecto, el widget utiliza la paleta oscura neutra de Photta. Para que coincida con tu marca, añade atributos de datos a la misma etiqueta de script: data-color-primary para el color de tu botón de llamada a la acción (valor hexadecimal, ej. #D4AF37), y data-color-surface para el fondo del modal. Ejemplo: <script src="https://widget.photta.app/sdk.js" data-pk="pk_live_..." data-color-primary="#D4AF37" defer></script>. Guarda theme.liquid de nuevo tras añadir estos atributos.
Para personalizaciones completas a nivel CSS, el widget de Photta expone propiedades personalizadas de CSS en el espacio de nombres --photta-* que puedes modificar desde el CSS base de tu tema. El plan Growth y superiores también permiten ocultar el distintivo 'Powered by Photta' a través del Panel de Control en Personalizar → Branding. Los cambios se aplican en tiempo real tras guardar, sin necesidad de volver a desplegar o actualizar el widget.