Header Ads Widget

Ticker

6/recent/ticker-posts

Cómo editar el encabezado de Shopify

El tema de este artículo es la configuración del encabezado de Shopify. Discutimos brevemente la estructura típica de la página del sitio web y luego pasamos a los pasos de configuración principales: agregar el logotipo y cambiar el tamaño del logotipo de Shopify, el menú del encabezado, la barra de anuncios, crear un encabezado adhesivo que incluya una barra de anuncios o que la excluya. Como beneficio adicional, le diremos cómo puede editar el encabezado de Shopify a través de la plantilla de código. ¡Empecemos!

La página del sitio web de Shopify se puede dividir en algunos componentes:

1. Encabezado. Es un bloque de contenido que puedes ver en la parte superior de cada página de una tienda online. El encabezado generalmente consiste en el nombre de una tienda, logotipo, menú de navegación del sitio web principal y letrero del carrito de compras.
2. Pie de página. Es un bloque de contenido que puede ver en la parte inferior de cada página de una tienda en línea. Un pie de página puede contener un menú, enlaces a redes sociales, información de contacto y, a veces, también una suscripción a un boletín.
3. Cuerpo. Es un área entre el encabezado y el pie de página en cualquier página de un sitio web. El encabezado o pie de página son elementos estáticos, siguen siendo los mismos en todas las páginas. En comparación con ellos, el cuerpo de la página web es dinámico y su contenido cambia según la página a la que acceda.

En este artículo, discutiremos el bloque de encabezado y cómo puede configurar sus componentes.

En caso de que esté interesado en la configuración del bloque de pie de página , visite esta página y encuentre todo lo que necesita en una guía completa.

También puede consultar la creación de un menú en el tutorial de Shopify para mejorar la navegación .

Bloque de encabezado de Shopify

En Shopify, el encabezado se  ve así:

 

Shopify configuración del encabezado paso a paso

 

Básicamente, se puede dividir en 2 bloques. El primer bloque es una barra de anuncios . Contiene un mensaje de bienvenida. El segundo bloque contiene un logotipo, un menú, una barra de búsqueda y un carrito de compras.

Para editar el bloque de encabezado, debe ingresar al panel de administración de su sitio web y luego ir a Tienda en línea -> Temas .

 

cómo eliminar el encabezado de la página del producto Shopify

 

Luego, debe seleccionar su tema actual y presionar el botón Personalizar .

 

Shopify tamaño del logotipo en el encabezado

 

Aquí verá el bloque con las secciones de su sitio web (encabezado, pie de página, etc.). Debe seleccionar la sección de encabezado .

 

configuración de la barra de encabezado de Shopify

 

Ahora, echemos un vistazo a las principales capacidades de Shopify para la personalización del bloque de encabezado.

 

encabezado en la personalización de Shopify

 

Cómo editar el logotipo de Shopify en el encabezado

El primer elemento que puedes cambiar en el encabezado es el logo. Puede cambiar su ubicación seleccionando una de las opciones sugeridas (Izquierda, Centro). Además de cargar su propio logotipo desde su dispositivo, puede elegir una de las opciones gratuitas disponibles presionando Explorar imágenes gratuitas .

 

logo de encabezado de Shopify

 

En nuestro artículo, elegiremos la segunda opción y optaremos por una imagen de logotipo ya hecha.

 

configuración del tamaño del logotipo del encabezado de Shopify

 

Después de aplicar una nueva imagen, aparecerán tres botones:

  1. El cambio le permitirá elegir otra imagen;
  2. Eliminar le permite eliminar la imagen;
  3. Editar es el botón que permite agregar una breve descripción de la imagen (se colocará en el atributo alt). La descripción alternativa es necesaria para SEO, ya que las imágenes también se muestran en los resultados de búsqueda mediante consultas relevantes y también es importante para los visitantes del sitio web con discapacidad visual.

También puede configurar el tamaño del logotipo de Shopify

 

ancho del tamaño del logotipo de Shopify

 

Cómo editar el menú de encabezado de Shopify

El siguiente elemento que discutimos aquí es el menú principal de su sitio web.

 

configuración del menú del encabezado de Shopify

 

Por defecto, el menú principal está seleccionado. Puede elegir otro menú presionando el botón de cambio o editar el menú actual presionando el botón de menú Editar .

 

configuración del menú principal de Shopify

 

En la sección de edición de menú, puede crear nuevos elementos de menú, así como editar los existentes. También puede utilizar el menú desplegable para agrupar productos, colecciones o páginas para mejorar la navegación de su tienda en línea. Por ejemplo, si tiene muchos productos, puede agregarlos a colecciones y usar el menú desplegable para organizar estas colecciones. Ayudará al cliente a encontrar un tipo de producto necesario. Puede crear un menú desplegable creando o moviendo elementos del submenú debajo del elemento principal. El elemento principal se mostrará en el menú principal de su tienda y los elementos del submenú se mostrarán en el menú desplegable. Puede haber 2 niveles de secciones de submenú.

Por ejemplo, creemos un elemento de menú conectado a una página web que puede colocar 2 elementos más dentro de él:

 

creación de menú de encabezado de Shopify

 

Debe prestar atención a que los elementos del menú del primer nivel estén alineados a la izquierda. Los elementos del menú del segundo nivel están alineados entre sí, pero con sangría a los elementos del menú del primer nivel.

En el frente, se verá así:

 

Shopify encabezado creando navegación

 

También vale la pena mencionar que puede editar el menú directamente desde el menú principal del panel de administración. Simplemente vaya a la tienda en línea -> navegación .

 

Shopify mejora de la navegación

 

Cómo editar la barra de anuncios de Shopify

El siguiente bloque que puede editar es un mensaje de anuncio.

 

barra de anuncios de Shopify

 

De forma predeterminada, este bloque está oculto, pero puede hacerlo visible haciendo clic en mostrar anuncio. También puede mostrar este bloque solo en una página principal. Para hacerlo, debe marcar la casilla que dice Solo página de inicio .

En el campo de texto , puede cambiar el texto del mensaje.

En el campo de enlace , puede mencionar la página del sitio web a la que procederá un usuario cuando haga clic en este bloque. También puede cambiar el color del bloque y el color del texto.

Cómo editar el encabezado de Shopify a través de la plantilla de código

Puede editar el bloque de encabezado directamente a través del código. Para hacerlo, vaya a Acciones del tema -> Editar código .

 

barra de anuncios configuración de shopify


Después de ingresar a la sección con las plantillas de su tema, debe abrir la plantilla header.liquid en las secciones.

 

cambiar barra de anuncios shopify

 

Usando el diseño de Shopify y HTML, puede cambiar la ubicación de los bloques, eliminar bloques, agregar sus propias clases y atributos, etc. Para editar estilos en los Activos , debe seleccionar el archivo theme.scss.liquid .

 

anuncio barra de shopify editar

 

Cómo crear un encabezado fijo en Shopify

El encabezado fijo significa que la navegación, el logotipo y los iconos seguirán a los usuarios mientras se desplazan por la página. Es muy útil cuando desea que sus clientes tengan fácil acceso a la navegación de su sitio web. Veamos dos formas de crear un encabezado fijo en Shopify . En el primer caso, todo el encabezado estará fijo (junto con una barra de anuncios); en el segundo caso, la barra de anuncios no será pegajosa, no se arreglará.

Hacer que todo el encabezado sea pegajoso (junto con una barra de anuncios)

  1. En el panel de administración de Shopify, debes ingresar Tienda en línea> Temas .
  2. Aquí debe encontrar su tema y presionar Acciones> Editar código .
  3. En la carpeta Activos , debe abrir el archivo theme.scss.liquid .
  4. Continúe hasta el final de este archivo e inserte este código:

  • En la carpeta Activos , debe abrir el archivo theme.js .
  • Continúe hasta el final de este archivo e inserte este código:


Después de eso, debe guardar los cambios y volver a cargar la página de su sitio web.

Hacer que el encabezado sea pegajoso excluyendo la barra de anuncios

Si desea que la barra de anuncios no se arregle con el encabezado adhesivo, debe seguir estos pasos:

  • En el panel de administración de Shopify, ve a Tienda online> Temas .
  • Aquí debe encontrar su tema y presionar Acciones> Editar código .
  • En la carpeta Activos, debe abrir el archivo theme.scss.liquid .
  • Continúe hasta el final de este archivo e inserte este código:

  • En la misma carpeta de Activos , debe abrir la carpeta theme.js .
  • Continúe hasta el final de este archivo e inserte este código:

Publicar un comentario

0 Comentarios