Resolución de problemas del tema de la tienda online

Las imágenes pueden mostrarse de forma diferente a lo esperado, pero esto puede deberse a que la imagen no sea adecuada para el uso que le das en el tema. Verifica que las dimensiones de la imagen sean correctas. Revisa la siguiente lista de problemas comunes de visualización que pueden ocurrir cuando subes una imagen incompatible:

• Si el encabezado se muestra más grande y la imagen del logo se muestra más pequeña de lo esperado, puede deberse a espacio en blanco en el archivo de la imagen del logo. El espacio en blanco en el archivo del logo puede hacer que el logo se muestre más pequeño y que el encabezado se muestre más grande debido a ese espacio. Edita el archivo de imagen para verificar que esté recortado alrededor del logo y que no haya espacio en blanco.
• Si la imagen de la presentación de diapositivas se está recortando, esto es intencional para asegurar que las imágenes se muestren igual en dispositivos móviles y en escritorio. Como el contenido se muestra mucho más pequeño en una pantalla móvil, se pueden perder muchos detalles si se reduce. En su lugar, se recorta para evitar perder detalles. Una imagen vertical, más alta que ancha, también puede ocupar mucho espacio en escritorio. Por eso las imágenes de la presentación tienen una altura máxima. Puedes agregar un punto focal a las imágenes de la presentación de diapositivas para que el punto focal sea siempre el centro de la imagen de la presentación.

  Opción de altura adaptable: Muchos temas de Shopify incluyen un ajuste de altura adaptable para las presentaciones de diapositivas que ajusta la altura de la presentación a la de la primera diapositiva de imagen, lo que reduce el recorte en distintos tamaños de pantalla. Esta función está disponible en todos los temas compatibles actualmente desarrollados por Shopify.

• Si un GIF no se muestra correctamente y lo agregaste a la tienda online con el editor de texto enriquecido, por ejemplo en la descripción del producto o en un artículo del blog, puede deberse al tamaño de la imagen. Puedes corregirlo haciendo 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. Después, puedes cambiar el tamaño del GIF haciendo clic y arrastrando las esquinas de la imagen hacia adentro para hacerlo más pequeño o hacia afuera para hacerlo más grande.
• Si las imágenes cambian de color de forma notable en la tienda online con respecto a la imagen original, es posible que no estén en los colores estándar Red Green Blue (sRBG). Para corregir este cambio de color, guarda el archivo en una aplicación de edición de fotos con el perfil sRBG. Los términos habituales para esto son "Web optimize", "Adjust image for Web" o "Save for Web". Más información sobre perfiles de color.
• Si las imágenes de producto en las páginas de colección no están alineadas, quizá debas ajustar la relación de aspecto en los archivos de imagen de producto para que tengan la misma proporción alto-ancho y luego subir nuevamente la imagen de producto. También puedes usar una app de edición de imágenes de la Shopify App Store.

Revisa los siguientes problemas para encontrar tu problema específico y los pasos para solucionarlo:

• Productos faltantes: Si faltan productos en la tienda online, revisa el Estado y los Canales de ventas en la sección Publicación del producto en el panel de control de Shopify. Verifica que el estado del producto sea Activo y que el producto esté disponible en la Tienda online.
• Colecciones faltantes: Si faltan colecciones en la tienda online, revisa los Canales de ventas en la sección Publicación de la colección en el panel de control de Shopify. Verifica que la colección esté disponible en la Tienda online y que la colección se haya agregado a los menús.
• Colecciones visibles pero faltan productos: Si las colecciones se muestran pero faltan productos, revisa cualquier filtro por etiquetas de la colección en la configuración de Menús. Verifica que no haya etiquetas en el campo Filtrar colección por etiquetas que puedan impedir que se muestren los productos.
• Moneda incorrecta: Si la moneda no se muestra correctamente en los productos o en las colecciones, revisa la Visualización de moneda en la sección Valores predeterminados de la tienda de Configuración > General para verificar que no haya código adicional. Más información sobre dar formato a cómo se muestra la moneda a los clientes.
• Algunos productos se muestran de manera diferente: Si algunos productos o colecciones se muestran diferente a los demás, revisa la Plantilla del tema asignada a los productos o colecciones en el panel de control de Shopify.
• No se pueden editar las plantillas de producto o colección: Si las plantillas de producto o colección predeterminadas están atenuadas y no se pueden seleccionar en el editor de temas, debes hacer que al menos 1 producto o colección esté disponible en el canal de ventas Tienda online. No puedes editar estas plantillas predeterminadas si no hay productos o colecciones disponibles para previsualizar los cambios. Obtén más información sobre cómo cambiar la disponibilidad de una colección y cómo establecer la disponibilidad de los productos en los canales de ventas.

Si el contenido traducido no se muestra correctamente o falta en la tienda online, puede haber traducciones obsoletas o faltantes. El contenido también podría estar en una plantilla específica para un mercado. Cada vez que agregues contenido nuevo en el idioma predeterminado, recuerda ejecutar nuevamente la traducción automática o agregar manualmente las nuevas traducciones.

Los siguientes estados pueden aplicarse al contenido traducido:

• Traducido: El contenido tiene traducciones disponibles.
• Desactualizado: El contenido en el idioma predeterminado se actualizó, pero las traducciones no reflejan esos cambios.
• Sin traducir: No hay traducciones para este tipo de contenido.

Cuando revises el contenido traducido, actualiza el contenido sin traducir o desactualizado y luego debería mostrarse correctamente.

Más información sobre traducir y localizar la tienda.

Si la tienda online y el editor de temas no muestran la misma información, revisa la plantilla de tema que estás editando. Tal vez debas editar y actualizar las plantillas de tema para que muestren la información correcta.

Las anulaciones de mercado permiten crear distintas tiendas online para diferentes mercados y mostrar contenido traducido. Es posible que hayas estado trabajando sin querer en un mercado específico o en B2B al hacer actualizaciones. Ubica el contenido con el menú desplegable Mercado en el editor de temas para asegurarte de que está en los mercados correctos.

Más información sobre anulaciones de mercado.

Todos los temas disponibles en la tienda de temas de Shopify son temas adaptables, es decir, se adaptan al tamaño de la pantalla. En el editor de temas, puedes cambiar la vista del tamaño de pantalla mientras editas el tema para verificar que las páginas y las imágenes se muestren correctamente. Más información sobre ver diferentes tamaños de pantalla en el editor de temas.

Muchas secciones y bloques tienen configuraciones para móvil que puedes personalizar. Por ejemplo, puedes establecer el Número de columnas en móvil en la sección Productos relacionados. Para cada plantilla, revisa la configuración de la sección para móvil y soluciona cualquier problema de visualización en tamaños de pantalla móviles.

Algunas funciones del tema pueden mostrarse de manera diferente en móvil que en escritorio para garantizar que el tema sea accesible en todos los tamaños de pantalla. Por ejemplo, en una pantalla de escritorio, la presentación de diapositivas puede tener una superposición de texto, donde el texto se muestra sobre la imagen, a menudo con una opacidad del color de la imagen o una sombra en el texto. En pantallas móviles, el texto puede mostrarse debajo de la presentación. Esta función de accesibilidad se diseñó para que el texto sea legible en cualquier tamaño de pantalla. Si el texto fuera una superposición, se vería muy pequeño en móvil y sería difícil de leer.

Si la sección de colección destacada o las páginas de colección muestran tamaños inconsistentes o no se alinean al ver la tienda online en móvil, puede deberse a relaciones de aspecto inconsistentes. Las cuadrículas de imágenes, como las imágenes de producto que aparecen dentro de una colección o de una colección destacada, están diseñadas para ser adaptables al tamaño de la pantalla. Si las imágenes dentro de la cuadrícula tienen relaciones de aspecto diferentes, pueden mostrarse de forma distinta según el tamaño de la pantalla. Las imágenes de producto cuadradas de 2048 px por 2048 px suelen funcionar mejor en las cuadrículas de productos. Actualiza las imágenes para que tengan una relación de aspecto consistente y se optimicen en todos los tamaños de pantalla. Más información sobre la relación de aspecto de las imágenes.

A veces, el código HTML agregado en el editor de texto enriquecido entra en conflicto con el código del tema. Si el problema aparece en una sola página, como una página de producto, una página o un artículo del blog, puede deberse a HTML adicional. Esto puede suceder al copiar y pegar texto desde otro sitio.

Revisa el código HTML

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

Pasos:

1. Ve 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. Ubica cualquier código HTML que pueda causar problemas de visualización y elimínalo.
4. Haz clic en Guardar.

Borra el formato

Puedes seleccionar parte del texto y borrar el formato HTML.

Pasos:

1. Ve a la página en el panel de control.
2. Selecciona 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.

Si la tienda online incluye código que redirige a URL que no están vinculadas a la tienda, verifica que el redireccionamiento esté desactivado cuando visites el editor de temas.

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

Para verificar 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 tiene el valor true cuando la tienda online se carga en el editor, y false cuando no.

Si hay bloques plegables u otros bloques de tema que muestran el mismo contenido en todas las páginas de producto, necesitas configurar fuentes dinámicas con metacampos. Esto suele ocurrir cuando se agrega información específica del producto, como ingredientes o instrucciones de cuidado, a un producto, pero se muestra en todos los productos.

Los bloques plegables muestran el mismo texto en todos los productos

Cuando agregas contenido directamente a un bloque colapsable en el editor de temas, ese contenido se muestra en todas las páginas de producto. Para mostrar contenido específico del producto, debes usar fuentes dinámicas con metacampos:

1. En el panel de control de Shopify, ve a Configuración > Metacampos > Productos.
2. Haz clic en Agregar definición.
3. Ingresa un Nombre para el metacampo y luego haz clic en Seleccionar tipo de contenido.
4. Selecciona Texto y Texto de varias líneas.
5. Haz clic en Guardar.
6. Ve a una página de producto en el panel de control y desplázate hasta la sección de metacampos al final de la página.
7. Agrega el contenido específico del producto al metacampo que creaste.
8. En el editor de temas, ve a la plantilla de producto y busca la sección Fila plegable.
9. En la configuración Contenido de la fila, haz clic en el botón .
10. Selecciona el metacampo en las opciones disponibles.
11. Guarda los cambios.

Ahora cada producto mostrará su propio contenido cuando el metacampo esté completo, y no se mostrará nada si el metacampo está vacío para ese producto.

Más información sobre mostrar metacampos en la tienda online y usar metacampos y metaobjetos con fuentes dinámicas.

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

Podría aparecer un mensaje de advertencia The theme you're looking for couldn't be found cuando hay HTML con errores. Una página puede no cargarse en el editor de temas por varios motivos, por ejemplo:

• problemas de conexión a la red
• código Liquid no válido en el tema

Puedes buscar los cambios en el código del tema y corregirlo. Si puedes identificar el archivo existente afectado, puedes restaurarlo a una versión anterior disponible desde la vista de Cronología del editor de código.

Pasos:

1. Haz clic en el archivo de sección .liquid vinculado en el mensaje de error o revisa los archivos para ver cambios recientes. Esto te lleva a la página Editar HTML/hojas de estilo en cascada (CSS), y el archivo se abre en el editor de código.
2. Revisa el código del archivo y busca HTML o Liquid no válidos. El editor de código muestra en rojo los posibles errores de sintaxis. Los problemas más comunes incluyen lo siguiente:
   • Etiquetas HTML de cierre adicionales, por ejemplo, una etiqueta de cierre </div> sin su etiqueta de apertura <div>
   • Etiquetas HTML sin cerrar, por ejemplo, una etiqueta de apertura <div> sin su etiqueta de cierre </div>
   • Etiquetas HTML mal formadas, por ejemplo, <div class="my-class" sin el >
   • Código Liquid con sintaxis incorrecta
   • HTML con errores en un archivo de fragmento del tema incluido
3. Una vez que hayas encontrado el problema, corrige el código en el archivo del tema. Si usas la vista de Cronología del editor de código para seleccionar una versión anterior y la opción Restaurar contenido, se reemplazará todo el contenido del archivo. Primero copia el contenido actual en un lugar seguro si quieres conservar algún cambio.
4. Haz clic en Guardar.
5. Haz clic en Editar tema para volver al editor de temas y confirma que el mensaje de error ya no se muestre.
6. Ve a la tienda online para verificar que se muestre como esperas.

Error "Exceeded maximum number of unique handles"

Si aparece un mensaje de error de Liquid como "Exceeded maximum number of unique handles for all_products" en la página de inicio, normalmente significa que se agregaron demasiadas secciones de producto destacado a la página de inicio (en la mayoría de los temas, más de 20).

Para solucionarlo:

1. En el panel de control de Shopify, ve a Tienda online > Temas.
2. Busca el tema actual y haz clic en Editar tema.
3. Ve a la página de inicio.
4. Quita algunas secciones de producto destacado para no exceder los límites del tema.
5. Considera usar secciones de colección destacada en su lugar, que permiten mostrar varios productos de forma más eficiente y mejorar el rendimiento de la tienda.

Los íconos de pago suelen incluirse de forma predeterminada en el pie de página de la mayoría de los temas para mostrar a los clientes las formas de pago aceptadas. Si los íconos de pago no aparecen en el pie de página del tema, verifica lo siguiente:

1. En el editor de temas, ve a la sección Pie de página y verifica que la opción Mostrar íconos de pago esté activada.
2. En el panel de control de Shopify, ve a Configuración > Pagos y verifica que haya al menos una forma de pago activa. Algunas formas de pago pueden requerir completar la configuración de la cuenta antes de que se muestren sus íconos.
3. Si usas una pasarela de pago externa, es posible que los íconos de pago no se muestren debido a limitaciones de la plataforma.

Si ya verificaste estas configuraciones y los íconos de pago siguen sin mostrarse, es posible que necesites get support for your theme.