Estas guías describen Toimii una vez que esté en funcionamiento. El panel y la facturación aún no están disponibles — Toimii se lanza en 2026.

Cómo incrustar un formulario de contacto en Shopify con Custom Liquid

Una sección Custom Liquid en cualquier tema. Sin instalar app, sin conocimientos de Liquid — solo pega las dos líneas.

<script src="https://cdn.toimii.io/components/your-code.js" async></script>
<toimii-contact></toimii-contact>

¿Esto funciona de verdad?

Sí — en todos los temas de Shopify compatibles con Online Store 2.0 (Dawn y cualquier tema moderno). La sección Custom Liquid está integrada en Shopify; no se necesita instalar app ni editar el código del tema en la mayoría de las páginas.

Paso a paso

Abre el editor de temas

Desde tu panel de administración de Shopify, ve a Tienda online → Temas → Personalizar en el tema que quieras editar.

Añade una sección Custom Liquid

Elige la página donde debe aparecer el formulario (una Página, la página de Contacto, o cualquier plantilla de página). Haz clic en Añadir sección y elige Custom Liquid.

Pega el código de incrustación

Pega las dos líneas de tu panel de Toimii en el campo Liquid. Liquid pasa el HTML sin procesar sin cambios, por lo que la etiqueta script y el elemento personalizado funcionan tal como están escritos.

Guarda el tema

Guarda en el editor de temas. El formulario se activa inmediatamente en el storefront.

Prueba en el storefront en vivo

Abre la página en vivo (no la vista previa) y envía un mensaje de prueba para confirmar que funciona de extremo a extremo. Si algo no se ve bien, consulta los problemas comunes a continuación.

Problemas comunes

Las ediciones directas de theme.liquid se sobreescriben al actualizar el tema. Usa la sección Custom Liquid en el editor de temas (guardada por página) o duplica el tema antes de editar los archivos principales.
Custom Liquid en páginas de pago requiere Shopify Plus. En planes estándar, incrusta en páginas de contacto, FAQ o de producto.
Algunos temas tienen una CSP integrada que bloquea scripts de terceros. Si el formulario no se renderiza, permite cdn.toimii.io y api.toimii.io en script-src / connect-src.
La vista previa del editor de temas a veces carga las secciones de forma diferida de una manera que rompe el primer renderizado de los elementos personalizados. Abre la URL del storefront en vivo (o usa el botón "Ver") para confirmar — la vista previa no es la fuente de verdad.
Si envuelves el formulario en un bloque Liquid {% if %}, el script se cargará igualmente en todas las páginas. Para ahorrar bytes, condiciona también la etiqueta script con la misma condición.

Preguntas frecuentes

¿Necesito una app de Shopify de la App Store?

No. Custom Liquid es una sección de tema integrada en Shopify — todos los temas a partir de Dawn la soportan. Las tiendas de apps están llenas de apps de "formulario de contacto"; no necesitas ninguna para Toimii.

¿Puedo incrustarlo en la página de pago?

No en los planes estándar. Custom Liquid en páginas de pago requiere Shopify Plus. En tiendas sin Plus, incrusta el formulario en una página de contacto, FAQ o en la página de estado del pedido post-compra.

¿Las actualizaciones del tema borrarán mi código de incrustación?

Sí — las ediciones directas de archivos de tema (theme.liquid, sections/*.liquid) se sobreescriben al actualizar o restaurar el tema. Dos opciones más seguras: usa una sección de tema + bloque Custom Liquid (guardado por página en el editor de temas), o duplica el tema antes de editar.

Mi tienda tiene una Content-Security-Policy — ¿bloquea Toimii?

Algunas tiendas tienen una Content-Security-Policy estricta mediante configuración del tema o apps como los temas Online Store 2.0 de Shopify con cabeceras CSP. Si el formulario no se renderiza, permite en script-src: cdn.toimii.io y api.toimii.io.

¿Funcionará en un sitio Storefront API personalizado (Hydrogen, Next.js)?

Sí. Usa App Bridge para renderizar un contenedor HTML y luego inyecta la etiqueta script y el elemento personalizado en él. Mismo enfoque: dos líneas de código, el elemento personalizado hace el resto.

¿Incrustando en una plataforma diferente?

Las mismas dos líneas de código, explicadas para cada plataforma.

WordPress

Bloque HTML personalizado, editor de bloques o clásico. Sin instalar plugins. Un detalle — tu rol de usuario necesita el permiso unfiltered_html.

Leer la guía completa

Squarespace

Coloca un Bloque de Código en cualquier página. Requiere el plan Core (renombrado de Business en 2025) o superior.

Leer la guía completa

Webflow

El elemento Code Embed admite hasta 50.000 caracteres. El código personalizado requiere el plan Basic o superior. Publica para ver el resultado.

Leer la guía completa

Wix

Wix pone el widget Embed en un sandbox, así que usamos un método dividido — el script en Configuración → Código personalizado, la etiqueta mediante Insertar widget. Guía honesta.

Leer la guía completa

Sitios estáticos

Astro, Hugo, 11ty, Jekyll — las mismas dos líneas en tu plantilla de layout. Las compilaciones siguen siendo rápidas.

Leer la guía completa

HTML / Personalizado

Una página HTML simple es suficiente. Ábrela en cualquier editor de texto, pega, guarda, sube. Tres pasos y ya está en línea.

Leer la guía completa

React / Vue / Angular

Usa el elemento personalizado directamente en JSX, plantillas Vue o componentes Angular. Sin componente envoltorio, sin paquetes extra.

Leer la guía completa

¿Listo para probarlo?

Prueba gratuita de 30 días. Sin tarjeta de crédito. Listo en minutos.

Sin tarjeta de crédito. Listo en 2 minutos.