Cómo añadir un widget de comentarios a un blog de Shopify

Qué permite el formulario de comentarios nativo y qué no

Los comentarios de Shopify se configuran para cada blog en Contenido > Entradas del blog > Gestionar blogs, y el ajuste tiene exactamente tres opciones: "Comments are disabled", "Comments are allowed, pending moderation" y "Comments are allowed, and are automatically published". Cada comentario tiene uno de tres estados (Aprobado, No aprobado, Spam), Shopify marca automáticamente los comentarios que considera spam y, al quitar esa marca, el comentario queda aprobado en la misma acción. Hay dos cosas que suelen sorprender más adelante: un comentario aprobado no puede volver al estado de no aprobado y los comentarios eliminados no se pueden recuperar.

La limitación más importante está en la estructura. Los temas muestran el formulario con {% form 'new_comment', article %} y recorren los comentarios existentes de article.comments, con un límite de 50 por página. El objeto de comentario expone author, content, created_at, email, id, status, updated_at y url. Ningún campo vincula un comentario con otro, así que no es posible mostrar una respuesta ni siquiera escribiendo tú el código Liquid.

Mantener el formulario nativo es una opción perfectamente razonable para una tienda que recibe un comentario al mes. Sustitúyelo cuando quieras que las personas conversen entre sí debajo de una entrada, en lugar de dejar mensajes sin posibilidad de respuesta.

Averigua qué plantilla de artículo usa tu tema

Este es el punto decisivo en Shopify, y no tiene nada que ver con lo que pagas. Compruébalo antes de copiar nada, porque determina qué archivo debes editar. En el editor de código del tema, abre la carpeta Plantillas y busca la plantilla del artículo. Si ves templates/article.liquid, tienes un tema vintage y puedes escribir HTML y Liquid directamente en ese archivo. Si ves templates/article.json, tienes un tema de Online Store 2.0 o de la generación Horizon, que es lo que usa la mayoría de las tiendas actualmente.

Una plantilla JSON es una lista de secciones y ajustes, no código de marcado. Pegar un <div> en ella genera un JSON no válido y un error al guardar. Justo ahí es donde muchos se rinden y concluyen que el widget no funciona en Shopify. En un tema JSON, debes editar la sección principal del artículo: abre la carpeta Secciones y busca la sección a la que hace referencia la plantilla. En Dawn es sections/main-article.liquid.

Qué tiendas pueden hacerlo

No necesitas contratar un plan superior. Shopify documenta el editor de código del tema, el editor de temas, la sección Liquid personalizado y los bloques de inserción de aplicaciones sin exigir ningún plan concreto. Además, la página del plan Basic incluye una tienda online personalizable y un motor de blog integrado que recoge comentarios. A partir de Basic, eso es todo. Cuatro de los nueve planes que Shopify enumera actualmente quedan fuera de este supuesto, por dos motivos distintos.

Lite y Agentic no tienen una tienda online donde instalarlo. La página del plan Lite indica que no incluye el canal de ventas de tienda online, y la página del plan Agentic coloca Tienda online en primer lugar entre las funciones no disponibles. Sin tienda online no hay tema, blog ni lugar donde mostrar un hilo, así que la instalación no está tanto bloqueada como fuera de lugar.

Starter y Retail comparten la otra restricción. Ambos te limitan al tema Spotlight, ambos indican que no hay otros temas ni opciones de personalización disponibles, y ninguna de las dos páginas aclara si se puede acceder al editor de código. Por tanto, considera ambos casos sin confirmar, en lugar de dar por hecho que se puede o que no: abre Editar código en tu propia tienda antes de contar con esa posibilidad. Ambos están cerrados también a nuevas altas. La página de Starter dice "The Starter plan isn't available to new stores.", y la de Retail incluye la misma frase referida a Retail. Si usas uno de ellos, es porque ya lo tenías.

El hilo que vas a insertar

Instala el cargador y el elemento contenedor

1. La barra de direcciones te indica qué debes registrar

   Hay exactamente dos posibilidades. La dirección .myshopify.com se asigna al crear la tienda y permanece vinculada a ella de forma permanente; el dominio personalizado que conectas después es el que escriben los clientes. Cuál de los dos muestra tu entrada del blog depende de hasta dónde hayas llegado con la configuración del dominio. Si aún no has conectado un dominio personalizado, todo se sirve desde la dirección myshopify. El widget compara location.hostname con los dominios registrados para tu identificador de sitio, así que registra la dirección que aparece en la barra del navegador al abrir una entrada real. Registra ambas si estás en pleno cambio o revisas tu trabajo desde la dirección myshopify. Hazlo en el panel de BootSignal. Recibirás un identificador de sitio, y esa cadena es lo único que BootSignal introduce en tu tema.

2. Duplica el tema y abre Editar código

   En el panel de administración de Shopify, ve a Tienda online, busca el tema, haz clic en el icono del menú horizontal ("...") y elige Editar código. En el móvil, la ruta es Icono de menú > Canales de ventas > Tienda online > Gestionar temas > Icono del menú horizontal > Editar código. Duplica primero el tema para tener una copia a la que volver, ya que las actualizaciones del tema pueden eliminar los cambios de código.

3. Coloca el cargador en theme.liquid

   En el árbol de archivos, abre la carpeta Diseño y selecciona theme.liquid. Pega el cargador justo antes de la etiqueta de cierre </body> y haz clic en Guardar. Mantén defer en la etiqueta: Theme Check de Shopify señala los scripts que bloquean el análisis del HTML porque ralentizan la tienda, y una etiqueta con ejecución diferida no retrasa la visualización de la página. Todos los demás widgets de BootSignal se cargan mediante esta misma etiqueta, así que añadir después un bloque de valoraciones o una barra de anuncios no añade un segundo archivo de script a la tienda.

   Fragmento de códigoCopiar

   <script src="https://bootsignal.com/bootsignal.js"
           data-site-id="YOUR_SITE_ID" data-lang="en" defer></script>

4. Añade el elemento contenedor a la sección del artículo

   En un tema JSON, abre Secciones y edita la sección principal del artículo (sections/main-article.liquid en Dawn). Coloca el elemento contenedor después del contenido del artículo, normalmente justo donde está el bloque de comentarios nativo. En un tema vintage, pégalo en templates/article.liquid en la misma posición. Vincula data-thread-id a la entrada para que cada artículo conserve su propio hilo.

   Fragmento de códigoCopiar

   <div data-bootsignal="comments" data-thread-id="{{ article.handle }}"></div>

5. Guarda y abre una entrada publicada

   Guarda el archivo de la sección y abre la URL de una entrada real del blog en una pestaña normal del navegador. El hilo aparece debajo de la entrada, y el primer visitante que inicie sesión con Google podrá escribir. Si no aparece nada, lee el nombre de host en la barra de direcciones y compáralo con la lista de tu panel, porque esa es la comprobación que hace el propio widget.

Por qué el div contenedor no debe ir en theme.liquid

theme.liquid es la plantilla global. El cargador debe ir ahí precisamente porque tiene que ejecutarse en todas las páginas, pero el elemento contenedor cumple otra función: si lo pegas en esa plantilla, aparecerá un hilo de comentarios vacío en las páginas de productos, el carrito, las páginas de políticas y la página de inicio. Es un error muy habitual, y luego los comerciantes se preguntan por qué aparece un cuadro de comentarios debajo del botón de pago.

Si realmente no puedes acceder a la sección del artículo (por un tema bloqueado o poco habitual), coloca el contenedor dentro de una condición de plantilla para que solo se muestre en las entradas del blog.

{% if template contains 0 %}
  <div data-bootsignal="comments" data-thread-id="{{ article.handle }}"></div>
{% endif %}

Funciona, pero coloca código de marcado del blog en el archivo que cargan todas las páginas de tu tienda. El lugar adecuado es el archivo de la sección.

La vía de Liquid personalizado, sin el editor de código

Hay una vía sin editar código. Abre el editor de temas (Tienda online > Editar tema), usa el desplegable de plantillas del centro de la barra superior para cambiar a la plantilla de entradas del blog y, en la barra lateral Secciones, haz clic en Añadir sección o Añadir bloque y elige Liquid personalizado. Pega el elemento contenedor en el campo de código y guarda. Los requisitos de la Theme Store de Shopify hacen obligatoria esta sección para los temas del catálogo y describen los bloques de Liquid personalizado como un punto de inserción para aplicaciones, así que la mayoría de las tiendas disponen de ella.

• El ajuste liquid limita el contenido a 50kb, una cifra a la que ningún fragmento de widget se acercará.
• El código Liquid no válido genera un error al guardar, y las etiquetas HTML sin cerrar se cierran automáticamente, lo que puede reorganizar sin avisar un fragmento mal pegado. Asegúrate de que el fragmento esté bien formado.
• El ajuste no admite etiquetas {% javascript %} ni {% stylesheet %}, así que la única combinación que funciona es HTML normal y una etiqueta <script src>.
• Un tema hecho a medida, uno de fuera del catálogo o un tema vintage antiguo puede no ofrecer Liquid personalizado. En ese caso, el editor de código es tu única vía.

Desactiva el formulario nativo o tendrás dos

Una vez que el widget esté activo, el tema seguirá mostrando debajo el formulario de comentarios de Shopify. Ve a Contenido > Entradas del blog > Gestionar blogs, elige el blog y selecciona "Comments are disabled". El formulario desaparecerá del tema sin que tengas que tocar el código.

Copia todo lo que quieras conservar antes de desactivarlo y guárdalo fuera de Shopify. Los comentarios eliminados no se pueden recuperar, y no existe una vía de migración desde la tabla nativa a un widget, así que el hilo antiguo y el nuevo serán independientes desde el principio.

El precio y por qué no cambia con el tráfico

Una suscripción cubre el hilo y todo lo que quieras instalar junto a él más adelante: $20 al mes o $200 al año por dominio registrado, sin contabilizar páginas vistas ni visitantes. Esto importa más en el blog de una tienda que en un sitio personal, porque una guía de compra que aparece en un agregador de ofertas puede multiplicar tu tráfico de la noche a la mañana sin cambiar la factura. Una segunda tienda supone un segundo dominio registrado, que se añade desde el panel. El catálogo incluye 49 widgets de pago y 33 herramientas gratuitas para el navegador, y también quedan incluidos los widgets que se añadan después de que te suscribas (todos los precios). Las comparativas de precios con otras herramientas de comentarios están en la sección de alternativas.

Si la suscripción deja de estar activa, el hilo no desaparece de tu blog. Los comentarios siguen visibles en modo de solo lectura, no se elimina nada y, al volver a suscribirte, todo se restablece tal como estaba. Conviene saberlo antes de instalar algo en una tienda que piensas mantener durante años.

Valoraciones con estrellas en la misma entrada

El cargador que has pegado en theme.liquid sirve para todos los demás widgets, así que añadir un segundo widget solo requiere un div en el mismo archivo de sección. En el blog de una tienda, las valoraciones aportan valor: una guía de compra con una puntuación debajo se percibe de forma distinta a una que no la tiene.

Las reseñas recogidas aquí también alimentan el widget Testimonial Wall, que solo puede mostrar citas que las personas hayan dejado realmente. No tiene forma de inventarlas, algo importante en un sitio de comercio electrónico, donde una prueba social que parece falsa puede costarte la venta.

Vuelve a revisar la entrada después de cada actualización del tema

Esta es la tarea de mantenimiento de la que nadie te habla. Shopify lo deja claro: si los cambios que has hecho en el código de un tema son incompatibles con una actualización, todos tus cambios de código se eliminan en la copia actualizada. El cargador y el elemento contenedor son cambios de código. Pueden desaparecer en una actualización que hayas aprobado por motivos completamente ajenos, y nada te avisa, porque la ausencia de un hilo de comentarios no impide que la página funcione.

1. Antes de actualizar, duplica el tema actual para conservar una copia de la instalación que funciona.
2. Una vez publicada la actualización, abre una entrada del blog y confirma que el hilo sigue ahí.
3. Si ha desaparecido, vuelve a abrir Editar código y pega de nuevo las dos piezas: el cargador en theme.liquid y el elemento contenedor en la sección del artículo.
4. Los comentarios en sí nunca están en riesgo. Se guardan en BootSignal, asociados al identificador del hilo, así que volver a pegar el código recupera todo el hilo exactamente como estaba.

Deja una nota en la herramienta que uses para registrar los cambios de la tienda, junto a las demás personalizaciones del tema. Es mejor dedicar dos minutos después de una actualización que enterarte por un cliente de que la conversación de tu mejor entrada lleva un mes sin aparecer.