Lo que necesitas
Acceso al código del tema de tu tienda online. Antes de hacer cambios, crea un duplicado del tema. En Accessonaut, crea primero un proyecto con el dominio real de tu web y abre en el proyecto la página de instalación.
Paso a paso
- Abre Tienda online → Temas y duplica el tema que usas.
- En el tema duplicado, abre Editar código y el archivo de diseño común, normalmente layout/theme.liquid.
- Pega el código de inserción sin cambios una sola vez, justo antes de la etiqueta de cierre body, y guarda.
- Revisa la vista previa del tema. Si todo funciona, publica el tema y vuelve a probar el dominio público.
Así es la inserción
Usa el código listo de tu proyecto. El ejemplo necesita tu ID de proyecto real y la dirección del servicio accesible públicamente.
<script src="https://accessonaut.com/widget.js"
data-project-id="TU_ID_DE_PROYECTO"
data-language="es" defer></script>Adapta el diseño a tu web
En tu proyecto de Accessonaut, abre «Widget de ayudas de lectura». Cinco plantillas y una vista previa en directo te ayudan con el diseño: colores, tipografías, ancho del menú, esquinas, sombras, icono o botón de apertura con texto y textos propios. La posición y los márgenes se ajustan por separado para escritorio y smartphone. Al guardar, tu código de inserción actual adopta automáticamente el diseño del proyecto; la configuración pública se guarda en caché hasta un minuto.
En el plugin de WordPress puedes elegir ajustes locales en su lugar. Estos tienen prioridad sobre el diseño del proyecto. El diseño está disponible en todos los planes. En el plan Free, el aviso de Accessonaut sigue visible. Los ajustes de lectura personales de tus visitantes tienen prioridad sobre las indicaciones de diseño.
Ten en cuenta
El código del tema cubre la tienda online. El checkout de Shopify, las cuentas de cliente y las apps de terceros integradas pueden tener sus propios límites técnicos y vías de instalación. Revisa estos procesos por separado. Un cambio de tema puede eliminar tu inserción.
Preguntas frecuentes sobre Shopify
¿Funciona el widget en el checkout de Shopify?
No. Los archivos de diseño como theme.liquid se aplican a todas las páginas excepto el checkout. Shopify ya no permite scripts propios en el checkout: checkout.liquid ya no es compatible, y Shopify ha retirado los antiguos scripts adicionales de las páginas de agradecimiento y de estado del pedido. Las extensiones del checkout se ejecutan aisladas, sin acceso a la página. Por eso, revisa el checkout por separado en busca de barreras.
¿Aparece el widget en las cuentas de cliente?
Las nuevas cuentas de cliente se personalizan con el editor de checkout y cuentas y con extensiones de apps, no con el código del tema. Según Shopify, estas extensiones no tienen acceso a la propia página de la cuenta. Por eso, no cuentes con el widget allí.
¿Se conserva mi inserción al actualizar el tema?
Shopify traslada los cambios de código a la copia actualizada del tema si no chocan con la actualización. En la tarjeta del tema ves si ha funcionado. Si no, vuelve a pegar el código de inserción en la nueva copia, antes de la etiqueta de cierre body. Guarda tu código antes de actualizar.
¿Necesito una inserción aparte para varios idiomas o mercados?
No. Siempre hay un solo tema publicado, y todos los idiomas lo usan. Con data-language="auto", el widget sigue el atributo lang de la página; el tema Dawn lo define con {{ request.locale.iso_code }}. Si un mercado usa un dominio propio, ese dominio necesita su propio proyecto de Accessonaut.
¿Puedo probar el widget en la vista previa del tema?
Sí, la vista previa muestra el tema con la inserción. Pero los enlaces de vista previa compartidos funcionan a través de shopifypreview.com. Allí el widget no carga la configuración de tu proyecto y muestra el diseño estándar con el aviso de Accessonaut. El diseño definitivo lo revisas en el dominio de tu tienda.
Si algo no funciona
Tras cambiar de tema, el widget no aparece.
Causa: El código de inserción está en el tema anterior. Cada tema tiene su propio theme.liquid.
Solución: Pega el código en el tema nuevo antes de publicarlo. Elimínalo de los temas que ya no necesites.
Se superponen dos botones de accesibilidad.
Causa: Otra app muestra su propia herramienta. Dos herramientas que cambian tipografía y colores se estorban entre sí.
Solución: Elige una herramienta y desactiva la otra por completo.
Comprueba la instalación
- Abre la web pública en una ventana privada. El widget se muestra exactamente una vez.
- Llega al botón con el teclado. Abre el panel, cambia el tamaño del texto y vuelve a cerrarlo.
- Revisa la página de inicio, una subpágina, un formulario y la vista móvil. El widget no debe tapar ningún control importante.
- En la pestaña Red, comprueba que widget.js y la configuración del proyecto se cargan desde la dirección de tu servicio. Si hay errores, revisa el dominio, el ID del proyecto y la CSP.
- En los proyectos Free, el aviso visible de Accessonaut sigue formando parte del widget. Los permisos dependen de tu proyecto.
Privacidad y límites
Al cargarse, el navegador del visitante obtiene el script y la configuración del proyecto del servicio de Accessonaut. Con ello se tratan la dirección IP, los datos de la solicitud del navegador y el nombre de host de la web. Las preferencias de visualización se guardan localmente en el navegador. Ten en cuenta la integración en tu política de privacidad y revisa tu configuración concreta.
Las ayudas de lectura no garantizan la conformidad. Revisa además las barreras en el código fuente y los recorridos completos de los usuarios, de forma automática y manual.