Resolución de problemas del tema de la tienda online

Hay muchas circunstancias diferentes que pueden hacer que el tema no se muestre como se espera, lo que provoca que desaparezcan elementos o no funcionen correctamente, y otros problemas de visualización. Esto puede deberse a un código externo o de aplicación que entra en conflicto con el tema, o a personalizaciones de código. También puede haber opciones de configuración en el panel de control de Shopify que deban ajustarse. Por ejemplo, es posible que debas revisar tu contenido traducido, tus productos, tus colecciones, tus menús o tus mercados.

Si aún tienes problemas con tu tema después de revisar los pasos de esta guía, es posible que debas contactar al equipo de atención al cliente especializada. Obtén más información sobre cómo obtener ayuda para los temas.

Ubicar el origen del problema

Localizar el origen del problema en tu tema es el primer paso para solucionarlo. Intenta seguir los pasos a continuación para localizar el origen del problema:

1. Puedes visitar la página de estado de Shopify para consultar cualquier problema conocido que pudiera estar afectando a tu tienda online. Si no hay ningún problema similar en la lista, puedes llevar a cabo una investigación más a fondo.

2. El problema podría ser local y estar relacionado con tu dispositivo. Los problemas locales generalmente son el resultado de la configuración del dispositivo o navegador, o de problemas con la conexión a Internet. Intenta seguir los pasos que se muestran a continuación para asegurarte de que el problema no sea local y se pueda replicar en otros dispositivos, navegadores o conexiones a Internet:

   • Borra el caché y las cookies de tu navegador. Si iniciaste sesión en el Centro de ayuda de Shopify con tu cuenta de Shopify, al borrar el caché y las cookies de tu navegador se cerrará la sesión de tu cuenta. Si estás utilizando el asistente virtual del Centro de ayuda, al borrar el caché y las cookies de tu navegador se restablecerá tu historial de chat y se cerrará la sesión de tu cuenta, por lo que tendrás que iniciar un nuevo chat con el asistente virtual del Centro de ayuda.
   • Prueba el modo Incógnito, otro dispositivo o la aplicación de Shopify.
   • Intenta usar datos móviles u otra conexión a internet.
   • Asegúrate de que el navegador esté actualizado.
   • Asegúrate de que el navegador no esté establecido para bloquear todas las cookies, ya que es posible que algunas aplicaciones no se muestren correctamente sin ellas.
   • Asegúrate de no estar usando una red privada virtual (VPN) y de no tener activado un firewall que bloquee Shopify.

3. Si sigues experimentando el problema en otros dispositivos, navegadores o conexiones a Internet, el problema no es local y se puede replicar. El siguiente paso para ubicar el origen del problema es replicar el problema en otro tema. Visita la Shopify Theme Store e instala una nueva versión del tema y prueba si el problema aún está presente en esa versión más reciente. Instalar un tema diferente, como, por ejemplo, un tema gratis de Shopify, también es una buena idea, porque puedes determinar si la incidencia se debe específicamente a ese tema en concreto o si todos los temas están experimentando el mismo problema. Luego de probar otros temas, te recomendamos que sigas estos pasos en función de cómo se presentó el problema:

   • Si el problema solo está presente en tu tema actual y en una versión del tema actualizada y sin personalizar, es posible que tengas que obtener ayuda con el tema.
   • Si el problema solo está presente en el tema actual, es posible que haya algún código del tema que cause problemas. Si actualizaste el código del tema recientemente, puedes volver a una versión anterior. Si no modificaste el código, te recomendamos revisar la configuración del tema. Por ejemplo, si el botón Agregar al carrito no se visualiza, revisa los colores de Botones en la configuración del tema y asegúrate de que sean colores diferentes que contrasten.
   • Si el problema está presente en todos los temas, se puede deber a la configuración del panel de control de Shopify, a las aplicaciones o a otros problemas.

4. El problema puede venir de una aplicación. Si recientemente instalaste o actualizaste alguna aplicación que afecte a la tienda online, te recomendamos desinstalarla de forma temporal. Si el problema no aparece después de desinstalarla, puedes contactar al equipo de atención al cliente para desarrolladores de aplicaciones a fin de obtener más ayuda para que se visualice correctamente en la tienda online. Obtén más información sobre cómo obtener ayuda con las aplicaciones. Si el problema sigue después de desinstalarla, la aplicación no es el origen del problema.

Las imágenes no se visualizan correctamente

Es posible que las imágenes se visualicen de manera diferente a la que esperas, pero eso se puede deber a que no son compatibles con el uso que les das en tu tema. Asegúrate de que las dimensiones de la imagen que usas sean correctas. Revisa la siguiente lista de problemas de visualización frecuentes que pueden ocurrir al subir una imagen que no es compatible:

• Si el encabezado se muestra más grande y la imagen del logo más pequeña de lo esperado, es posible que se deba a espacios en blanco en el archivo de imagen del logo. Los espacios en blanco en el archivo de imagen del logo pueden hacer que este se muestre más pequeño y que el encabezado se muestre más grande debido a los espacios en blanco. Edita el archivo de imagen para asegurarte de que está recortado alrededor del logo y de que no hay espacios en blanco.
• Si se recorta la imagen de una presentación de diapositivas, esta acción se realiza por diseño para garantizar que las imágenes se muestren de la misma forma tanto en dispositivos móviles como en computadoras de escritorio. Debido a que el contenido se muestra mucho más pequeño en una pantalla móvil, hay muchos detalles que se pueden perder si se reduce el contenido. En su lugar, el contenido se recorta para garantizar que los detalles no se pierdan. Una imagen retrato, que es más alta que ancha, también puede ocupar mucho espacio en el dispositivo de escritorio. Por esta razón, las imágenes de la presentación de diapositivas tienen una altura máxima. Puedes agregar un punto focal a las imágenes de la presentación de diapositivas para asegurarte de que este siempre sea el centro de la imagen de dicha presentación. Si agregar un punto focal no ayuda, puedes buscar una imagen que funcione en todos los tamaños de la pantalla. Obtén más información sobre las mejores prácticas para las presentaciones de diapositivas.
• Si una imagen GIF no se visualiza correctamente y se agregó a la tienda online con el editor de texto enriquecido, como en la descripción del producto o en un artículo del blog, se podría deber al tamaño de la imagen. Para corregir este problema, haz clic en el GIF en el editor de texto enriquecido y, luego, en Editar imagen. En el menú desplegable Tamaño de imagen, selecciona Original. A continuación, puedes cambiar el tamaño del GIF. Para ello, haz clic y arrastra las esquinas de la imagen hacia dentro para hacerla más pequeña o hacia fuera para hacerla más grande.
• Si las imágenes tienen un cambio de color significativo en la tienda online que difiere de las imágenes originales, es posible que no cumplan con el espacio de color sRGB. Para corregir el cambio, guarda el archivo en una aplicación de edición de fotos como un archivo sRBG. Los términos frecuentes con relación a este problema son "Optimización para página web", "Ajustar imagen para página web" o "Guardar para página web". Obtén más información sobre los perfiles de color.
• Si las imágenes de producto en tus páginas de colección no se alinean, es posible que tengas que ajustar la relación de aspecto de los archivos de las imágenes para que tengan la misma la proporción entre ancho y altura. Después de que lo hagas, sube la imagen del producto de nuevo. También puedes usar una aplicación de edición de imágenes de Shopify App Store.

Los productos o las colecciones no se visualizan correctamente

Si los productos no están en la tienda online, es posible que tengas que revisar Estado y Canales de ventas en la sección Publicación del producto en el panel de control de Shopify. Asegúrate de que el estado del producto sea Activo y de que el producto esté disponible en Tienda online.

Si tus colecciones no están en la tienda online, es posible que tengas que revisar Canales de ventas en la sección Publicación de la colección en el panel de control de Shopify. Asegúrate de que la colección esté disponible en Tienda online. También te recomendamos asegurarte de que la colección se agregó a tus menús.

Si las colecciones se visualizan, pero faltan productos, es posible que tengas que revisar los filtros de etiqueta de la colección en la configuración de Menús. Asegúrate de que no haya etiquetas en el campo Filtrar colección con etiquetas que puedan hacer que los productos no se visualicen.

Si la moneda no se visualiza correctamente en los productos o las colecciones, te recomendamos revisar Visualización de la moneda en la sección Valores predeterminados de la tienda en Configuración > General para asegurarte de que no haya ningún código adicional. Obtén más información sobre el formato en el cual se muestra la moneda a los clientes.

Si algunos productos o colecciones se visualizan de manera diferente a otros, es posible que tengas que revisar la plantilla de tema asignada a los productos o las colecciones en el panel de control de Shopify.

El contenido traducido no se visualiza correctamente

Si el contenido traducido no se visualiza correctamente o no está en la tienda online, es posible que las traducciones no estén actualizadas o que falten traducciones. El contenido también puede estar en la plantilla específica de un mercado. Cada vez que agregues contenido nuevo en tu idioma predeterminado, recuerda ejecutar la traducción automática nuevamente o agrega traducciones nuevas de forma manual.

Los siguientes estados pueden aplicarse al contenido traducido:

• Traducido: el contenido tiene traducciones disponibles.
• Desactualizado: el contenido en el idioma predeterminado se ha actualizado, pero las traducciones no reflejan actualizaciones.
• No disponible: no hay traducciones para este tipo de contenido.

Cuando revises el contenido traducido, actualiza el que contenido que no esté traducido o esté desactualizado. De esa manera, el contenido traducido debería visualizarse correctamente.

Obtén más información sobre la traducción y localización de la tienda.

Las actualizaciones en el editor de temas no se visualizan en la tienda online

Si en la tienda online y el editor de temas no se visualiza la misma información, revisa la plantilla de tema que estás editando. Es posible que tengas que hacer modificaciones para actualizar tus plantillas de tema a fin de que se visualice la información correcta. La contextualización de la tienda online te permite crear tiendas diferentes para mercados distintos y mostrar contenido traducido. Es posible que, al realizar las actualizaciones, hayas trabajado en un mercado específico o B2B sin darte cuenta. Localiza el contenido con el menú desplegable Contexto del editor de temas para asegurarte de que esté en los mercados correctos.

Obtén más información sobre la contextualización de las tiendas.

Diferencias en tu tema entre las vistas móviles y de escritorio

Todos los temas disponibles en la tienda de temas de Shopify son temas adaptables, lo que significa que el tema se adapta al tamaño de la pantalla. En el editor de temas, puedes cambiar la vista del tamaño de la pantalla mientras editas tu tema para garantizar que tus páginas e imágenes se muestren correctamente. Más información sobre cómo ver diferentes tamaños de pantalla en el editor de temas.

Muchas de las secciones y bloques tienen configuración móvil que puedes personalizar. Por ejemplo, puedes configurar el Número de columna en el móvil en la secciónProducto relacionado. Puedes revisar la sección de configuración relacionada con dispositivos móviles para cada tipo de página para solucionar cualquier problema de visualización en el tamaño de la pantalla del dispositivo móvil.

Algunas características del tema pueden mostrarse de manera diferente en el móvil que en el escritorio para garantizar que el tema sea accesible en todos los tamaños de pantalla. Por ejemplo, en un tamaño de la pantalla de escritorio, la presentación de diapositivas puede tener una superposición de texto, en la que el texto se muestra encima de la imagen, a menudo con una opacidad de color de la imagen o una sombra de texto. Sin embargo, en el tamaño de la pantalla del móvil, el texto puede aparecer debajo de la presentación de diapositivas. Esta es una característica de accesibilidad por diseño para que el texto sea legible en cualquier tamaño de pantalla. Si el texto fuera una sobreposición, se mostraría muy pequeño en el móvil, lo que dificultaría su lectura.

Si la sección de colecciones destacadas o las páginas de colecciones muestran tamaños incoherentes o no se alinean al visualizar la tienda online en dispositivos móviles, es posible que se deba a relaciones de aspecto incoherentes. Las cuadrículas de imágenes, como las imágenes de productos que se muestran dentro de una colección o colección destacada, están diseñadas para adaptarse al tamaño de la pantalla. Si las relaciones de aspecto de las imágenes de la cuadrícula no son uniformes, es posible que se muestren de forma diferente en función del tamaño de la pantalla. Las imágenes de productos cuadradas de 2048 px por 2048 px suelen quedar mejor en las cuadrículas de productos. Actualiza tus imágenes para que tengan una relación de aspecto coherente para su optimización en todos los tamaños de la pantalla. Más información sobre la relación de aspecto de la imagen.

Editor de texto enriquecido

A veces, el código HTML que se agrega en el editor de texto enriquecido entra en conflicto con el código de tu tema. Si el problema está presente en una sola página, como una página de producto, página o artículo del blog, se puede deber a un HTML adicional. Esto a veces se puede agregar por copiar y pegar texto de otro sitio.

Revisa el código HTML

Puedes revisar el código HTML en el editor de texto enriquecido.

Pasos:

1. Navega a la página en el panel de control.
2. Haz clic en el botón </> Mostrar HTML para revisar el código HTML.
3. Localiza cualquier código HTML que pueda causar problemas de visualización y elimínalo.
4. Haz clic en Guardar.

Borra el formato

Puedes resaltar una parte del texto y borrar el formato HTML.

Pasos:

1. Navega a la página en el panel de control.
2. Resalta el texto con problemas de formato.
3. Haz clic en el botón 🚫.
4. Haz clic en Guardar.

Más información sobre el editor de texto enriquecido.

La página redirige a una URL no admitida

Si la tienda online incluye un código que redirige a los usuarios hacia URL que no están conectadas a ella, verifica que el redireccionamiento se desactivó cuando visites el editor de temas.

Por ejemplo, este tipo de redireccionamiento se puede agregar a una tienda online para dirigir a los clientes a diferentes tiendas Shopify según su ubicación. Este tipo de código de redireccionamiento podría existir en el tema o en una aplicación que instalaste.

Para asegurarte de que el redireccionamiento no interfiera con la experiencia del editor, usa una referencia a la variable window.Shopify.designMode en JavaScript para desactivar el redireccionamiento cuando visites el editor de temas. Esta variable se establece en true cuando se carga la tienda online en el editor y en false cuando no lo hace.

Mensajes de error de código

Si hay un error de sintaxis en el código de tu tema, se mostrará un mensaje de advertencia HTML error found o Theme error en el editor de temas. En el mensaje de error se muestra el archivo Liquid que contiene el error.

Se visualiza un mensaje de advertencia The theme you're looking for couldn't be found cuando hay algún HTML que contiene un error. La carga de una página en el editor de temas puede fallar por muchas razones, como las siguientes:

• problemas de conexión de red
• código de Liquid inválido en tu tema

Puedes localizar los cambios de código en el código del tema y corregir el código o revertir el archivo a la versión anterior al cambio.

Pasos

1. Haz clic en el enlace del archivo de la sección .liquid que aparece en el mensaje de error o revisa los archivos para buscar los cambios recientes. El enlace te dirige a la página Editar HTML/CSS y el archivo se abre en el editor de código.

2. Explora el código del archivo e intenta encontrar HTML o Liquid no válidos. En el editor de código, los posibles errores de sintaxis se muestran en color rojo. Entre los problemas más frecuentes se incluyen los siguientes:

   • Exceso de etiquetas HTML de cierre, por ejemplo, un cierre </div> sin apertura <div>
   • Exceso de etiquetas HTML sin cierre, por ejemplo, una apertura <div> sin cierre </div>
   • Etiquetas HTML con formato incorrecto, por ejemplo, <div class="my-class" sin >
   • Código de Liquid con formato incorrecto
   • HTML roto en un archivo de un fragmento del tema incluido

3. Una vez que hayas encontrado el problema, corrige el código en el archivo del tema o revierte el código. Para revertir el código, selecciona una versión anterior en Cambios recientes.

4. Haz clic en Guardar.

5. Haz clic en Personalizar para volver al editor de temas y confirma que el mensaje de error ha desaparecido.

6. Navega a la tienda online para asegurarte de que se visualiza de la forma correcta.