Guía completa para optimizar el Header de Shopify

Te preparamos esta guía completa para que puedas comprender el impacto e importancia del encabezado en tu tiendaSHOPIFY. Con esta guía comprenderás cómo optimizarlo para mejorar la capacidad de respuesta de tu tienda online.

El encabezado es la sección superior del sitio web. 🤖 Este bloque de contenido generalmente contiene la navegación, la opción de inicio de sesión, noticias, carritos de compras y la imagen o encabezado. Lo que veremos en esta guía es porque debemos optimizar el tamaño del encabezado para lograr el máximo impacto.

• Primera impresión. El encabezado es el primer contacto que tiene un cliente con tu tienda, por lo tanto lo que ve el cliente es la primera impresión que se llevará de tu negocio. El encabezado construirá la imagen de tu negocio en la mente del cliente, ve los colores logotipo y si este está desproporcionado y descuidado esa es la imagen que percibirá tu cliente. 
• Capacidad de respuesta móvil. Esto se ha vuelto imprescindible para cualquier tienda en línea. Los motores de búsqueda lo han colocado como una función necesaria de cualquier tienda online, ya que la mayoría de los usuarios en la actualidad se conecta desde su móvil. Por lo que tu encabezado debe adaptarse al tamaño de la pantalla del usuario o provocará errores, y esto afectará tu UX directamente.
• Velocidad de carga de la página. El encabezado también puede afectar la velocidad de carga de la página. Si la imagen es muy pesada tardará la carga de tu sitio, por lo que de 1 a 4 segundos te hará perder clientes. 
• Mejora SEO. Con una velocidad de carga de página más rápida, un diseño receptivo móvil y visitantes que permanecen en su sitio web por más tiempo, tu SEO será excelente. Dando a tu página un mejor ranking en los motores de búsquedas.

Dimensiones de la imagen del encabezado de Shopify🚀🚀

Por lo general, las dimensiones de la imagen del encabezado deben tener una relación de aspecto de 16:9, pero también depende del tema que tengas en tu tienda. 

Muchos de los temas permiten un encabezado de 250 píxeles, pero te recomendamos que tu encabezado no supere los 120 píxeles. Con esto tienes suficiente espacio para la navegación, el logotipo y otros enlaces. También recomendamos que la imagen ronde los 600 píxeles de altura. 

El ancho lo establecerá la tienda. Shopify recomienda para optimizar las imágenes de los productos, la resolución de la imagen debe rondar los 72 dpi y nunca más de 20 MB. La imagen tampoco puede exceder los 4472 x 4472 píxeles. Pero esto va ligado directamente al tema que utilizas en tu tienda por lo que deberás verificar sus especificaciones. 

Como mejorar la capacidad de respuesta móvil

Debes elegir temas en los que te permitan hacer la adaptación para móvil, ya que una imagen se ve de una forma en una PC y diferente en un móvil.Si tu theme no tiene esta opción, nosotros podemos crearla en el código de la plantilla. 

Considera el tamaño de la imagen

Como mencionado, Shopify prefiere imágenes por debajo de un cierto límite de píxeles y de un cierto tamaño de imagen. Por lo que, si tu imagen excede estas dimensiones, podría negarse a agregar la imagen a tu tienda o negarse a cargar cuando los usuarios visiten tu tienda. Lo que recomendamos es comprimir las imágenes, existen softwares gratuitos para ello.

Dimensiones de la imagen original

Es recomendable mantener la dimensión de la imagen original lo más cerca posible del original. Toma la imagen en modo horizontal con una proporción de 16:9, así conservarás la imagen cuando la cargues en tu banner y se verá mucho más profesional. 

Cómo agregar una imagen de encabezado de Shopify

✅Paso 1: inicia sesión en Shopify

Primero, inicia sesión en Shopify. Esto te llevará al panel de comerciantes de Shopify, donde puedes realizar cambios importantes en tu tienda.

✅Paso 2: Ve a la personalización del tema 

En Shopify Dashboard, ve al menú del lado izquierdo y haz clic en la opción Tiendas en línea. Luego haz clic en la sección Temas. Allí tendrás acceso a todos tus temas descargados, dirígete a tu tema publicado y haga clic en el botón Personalizar. 

✅ Paso 3: Agrega la imagen y personaliza

Para realizar cambios en el encabezado, dirígete al menú de la izquierda y busca la opción Encabezado. Pero por ahora, busque la opción que dice Agregar imagen. Esto debería ser diferente de la opción Agregar logotipo. Si no hay una opción Agregar imagen, es posible que su tema no admita imágenes de encabezado. Elige de tu almacenamiento interno la imagen que quieres colocar en tu encabezado. 

Asegúrate de que cumplas con los requisitos anteriores. en configuración de imagen podrás aplicar los ajustes que desees en la imagen. Haz clic en Guardar cuando consideres listo. 

Al finalizar te recomendamos que controles que tu sitio esté cargando bien para computador y para móvil también.

Es importante como mencionamos anteriormente personalizar tu encabezado para que se ajuste a su marca. 

Paso 1 y 2 ídem que el anterior solo en el Paso 3: agrega una barra de anuncios.

• En la opción Encabezado, desplázate hacia abajo y habilita la opción Mostrar anuncio. Elige si quieres esto solo en la página de inicio. Agrega texto y un enlace sí es que tienes uno. 

Paso 4: Agrega tu logo

• En la parte superior haz clic en Seleccionar imagen en la opción Imagen de logotipo. Carga tu logotipo. 
• Cambia el tamaño del logotipo con la palanca y elige el ancho de píxel. 
• Elige cuál debe ser la alineación del logotipo. 
• Haz clic en Guardar cuando hayas finalizado. 

Paso 5: edite el menú principal del encabezado

• En la sección del encabezado. Haz clic en el menú Editar. 
• Agrega un título al menú. 
• Elige los elementos del menú que deseas que estén disponibles en tu encabezado. 
• Haz clic en Guardar menú cuando hayas finalizado. 

👉 Recuerda que el encabezado y la imagen del encabezado son muy importantes para el crecimiento de tu tienda. Su optimización puede ser la diferencia entre clasificar primero en los motores de búsqueda.