Categorías

Este componente te permite agregar varios items o bloques, que serán categorías de tu tienda, y podrás personalizar atributos y opciones para cada uno de ellos.

Configuración del componente

Nota: nos referiremos a Contenido como los detalles de una categoría, tales como su nombre/título, descripción y enlace del botón.

Al hacer clic en el nombre del componente encontrarás opciones generales para personalizarlo, las cuales determinarán cómo se verá y se comportará la sección, así como sus subcomponentes (bloques). Las opciones disponibles para este componente son las siguientes:

Ancho

Permite definir el ancho máximo que el componente ocupará dentro de la ventana del navegador.

Puedes leer más sobre cómo esta opción afectará al componente en esta página.

Columnas en escritorio

Permite definir la cantidad de bloques por fila horizontal que se mostrarán en dispositivos de escritorio. La cantidad visible de bloques variará según lo que hayas definido en la opción Visualización, de la siguiente manera:

Carousel

Ancho del dispositivo	Cantidad de bloques
Igual o mayor a 992px	Cantidad definida
Menor a 992px	3 bloques
Menor a 768px	2 bloques

Grid

Ancho del dispositivo	Cantidad de bloques
Igual o mayor a 992px	Cantidad definida
Menor a 992px	3 bloques
Menor a 768px	2 bloques

Columnas en móvil

Permite definir la cantidad de bloques que se mostrarán en una sola fila horizontal para dispositivos móviles con un ancho igual o menor a 575px.

Espacio entre

Permite definir si habrá un espacio visible entre los bloques.

Nota: esta opción solo será visible y podrá utilizarse si lo definido en la opción Espaciado dentro de Configuración del tema > Diseño > Estilos del tema es distinto de Ninguno.

Visualización

Permite definir si el contenido del componente se mostrará dentro de una sección de tipo Carousel o Grid.

Puedes leer más sobre las diferencias entre estos dos tipos en esta página.

Configuración del Carousel

Este grupo de opciones será visible cuando elijas Carousel, y te permitirá personalizar su comportamiento.

Puedes encontrar la lista completa de opciones en esta página.

Opciones de encabezado

Al habilitar esta opción, se mostrará una sección de Encabezado antes del contenido del componente. Puedes encontrar la lista de opciones en esta página.

Opciones de contenido

Este grupo permite personalizar el Contenido de cada bloque, con base en las siguientes opciones:

Proporción de imagen

Permite definir las dimensiones en las que se mostrarán las imágenes en cada bloque. Estas se adaptarán al espacio disponible, tanto vertical como horizontalmente.

Posición

Permite definir la posición en la que aparecerá el contenido de los bloques:

• Sobre la imagen: el contenido se mostrará encima de las imágenes, haciendo que la imagen controle la altura de cada bloque.
• Después de la imagen: el contenido se mostrará después de la imagen.

Alineación

Al elegir Después de la imagen en la opción anterior, se mostrarán dos opciones adicionales para definir la alineación del contenido en dispositivos de escritorio y móviles. Esto afectará a todos los bloques de la misma forma.

Títulos

Dentro de este grupo encontrarás opciones para personalizar el estilo de los títulos de todos los bloques, como el peso, espaciado entre letras y la opción de mostrarlos en mayúsculas.

Apariencia

Este grupo contiene las siguientes opciones para personalizar el componente:

• Margen superior: permite controlar el margen superior de la sección.
• Margen inferior: permite controlar el margen inferior de la sección.
• Colores del contenido: permite elegir el Paquete de colores para el componente.

Animaciones

La opción Personalizar opciones permite ajustar las animaciones para este componente específico. Puedes leer cuáles están disponibles en esta página.

---

---

Configuración del subcomponente

El subcomponente de un Categories se llama Category block, y puedes agregar tantos como desees. Las opciones para este subcomponente son las siguientes:

Categoría

Aquí puedes elegir una categoría para el bloque, lo que añadirá automáticamente atributos como el nombre/título y el enlace.

Título

Permite reemplazar el nombre original de la categoría seleccionada o incluso definir uno si no deseas elegir una categoría.

Mostrar descripción

Permite mostrar la descripción de la categoría seleccionada después de su nombre.

Al habilitarla, aparecerá una opción de Descripción personalizada que te permitirá sobrescribir la anterior.

Opciones de enlace

Cuando eliges una Categoría en la primera opción del bloque, este grupo se mostrará con las siguientes configuraciones adicionales:

Nota: al elegir una categoría, toda el área del bloque será clicable y llevará a la página correspondiente de la categoría.

Texto del enlace

Texto que se mostrará dentro del enlace.

Nota: si la opción Mostrar enlace como texto está deshabilitada, este texto seguirá siendo visible al pasar el cursor sobre el bloque.

Enlace externo

Si está habilitado, el enlace se abrirá en una nueva pestaña del navegador.

Mostrar flecha en el título

Se mostrará una flecha y su posición dependerá de lo que hayas elegido en la opción Posición en la configuración del componente, de la siguiente manera:

• Sobre la imagen: la flecha se mostrará junto al texto del enlace si Mostrar enlace como texto está habilitado.
• Debajo de la imagen: la flecha se mostrará al lado derecho del título.

Mostrar enlace como texto

Permite mostrar el enlace como texto visible después del título y la descripción.

Opciones de imagen

Nota: la primera imagen que se mostrará será la que pertenezca a la Categoría seleccionada en el bloque, siempre que tenga una configurada en su panel de administración.

Imagen personalizada

Esta opción permite subir una imagen si la categoría seleccionada no tiene una, o reemplazarla si ya existe.

Al hacerlo, aparecerá una opción adicional llamada Imagen personalizada (móvil) para subir una diferente en dispositivos móviles. Si no se sube ninguna imagen en esta segunda opción, la primera se usará en todos los dispositivos.

Superposición (Overlay)

Este elemento será visible siempre que se haya seleccionado Sobre la imagen en la opción Posición dentro de la configuración principal del componente.

Esta opción permite controlar su opacidad (transparencia). Puedes leer más sobre esto en esta página.

Nota: esta opción también aparece si se ha añadido un Icon.

Opciones de ícono

Este grupo permite mostrar un ícono dentro del área de imagen del bloque. Las siguientes opciones estarán disponibles dependiendo de lo que elijas en la opción Posición en la configuración del componente:

Nota: se recomienda subir íconos en formatos como .svg, .webp o .png.

Tamaño

Permite definir el tamaño del ícono en porcentaje, basado en el ancho del bloque. Por ejemplo, si defines 50%, el ancho del ícono será la mitad del ancho total del bloque.

Color de superposición

Permite elegir un Paquete de colores para el elemento de superposición cuando se añade un Icon.

Opciones de posición

Se mostrarán dos opciones para controlar y elegir la posición horizontal y vertical del ícono dentro del área de imagen.

Apariencia

Este grupo de opciones será visible cuando se seleccione Sobre la imagen en la opción Posición dentro de la configuración principal del componente:

Alineación (escritorio y móvil)

Permite definir la alineación para ambos tipos de dispositivos.

Posición vertical del contenido

Permite definir la posición del contenido en el eje vertical.

Colores del contenido

Permite elegir el Paquete de colores para el bloque.