Componentes de temas de Jumpseller

En esta página

Definiciones generales

¿Qué es un Componente?

Los Componentes son una de las partes fundamentales dentro de la construcción y estructura de un tema. Pueden incluir cabeceras, pies de página, videos, banners, sliders, entre otras secciones que son utilizadas para construir y diseñar páginas en un sitio web. Estos pueden ser agregados, editados, y eliminados en el panel de Componentes del Editor Visual, y pueden ser reutilizados a través de diferentes plantillas y páginas para mantener una consistencia tanto su el diseño como funcionalidad.

Al utilizar Componentes, los diseñadores de sitios web pueden crear diseños complejos y características de forma eficiente con poca o cero conocimiento de código, puesto que los componentes pueden ser manipulados y reorganizados fácilmente. Esto también permite una mantención sencilla del sitio web, debido a que los cambios en un componente se verán reflejados a través de todas las plantillas donde un componente específico se esté utilizando.

Puedes ajustar de forma fácil los Componentes mediante las Ayudas de Edición, lo cual te permitirá editar configuraciones, así como también duplicar, esconder, eliminar y también reordenar componentes directamente en la vista previa.

También puedes hacer click en el botón “Agregar componente” para agregar uno en el lugar y posición que desees.

Cada componente posee sus propias configuraciones generales y alguno de ellos incluyen lo que denominamos Subcomponentes, los cuales permiten construir un segundo nivel de contenido, el cual también puede ser configurado y personalizado de forma individual.

Todas las plantillas poseen 2 componentes obligatorios que no pueden ser eliminados ni escondidos, los cuales son Cabecera y Pie de Página. Estos se despliegan al inicio y al final de cada plantillla, respectivamente, los cuales cubriremos en detalle más abajo en esta página.

¿Qué es un Subcomponente?

Un Subcomponente es un ítem que puede ser agregado dentro de un Componente. Por ejemplo, el subcomponente de un Slider es un Slide, mientras que el subcomponente de Galería de logotipos es un Logo, y así de la misma forma con otros en un tema de Jumpseller.

Todos ellos poseen opciones individuales que puedes personalizar, también puedes agregar los que consideres necesarios, reordenarlos, esconderlos y eliminarlos. Cuando duplicas o reutilizas un componente, sus Subcomponentes también serán duplicados.

Para que puedas entender como administrarlos, revisa el siguiente listado:

Habrán algunos Componentes en los cuales verás un ícono de flecha al lado izquierdo de su nombre. Aquello significa que posee o puede poseer subcomponentes en su interior.
Al hacer hover, la flecha rotará y al hacer click en él, el listado de componentes se abrirá, permitiéndote visualizarlos todos.
Puedes hacer click nuevamente en la flecha para cerrarlo.
También verás un botón que te permitirá agregar subcomponentes, como por ejemplo “Agregar nuevo Slide”.

En cada subcomponente, al pasar el cursor sobre su nombre, aparecerán 3 opciones al lado derecho, las cuales te permitirán realizar las siguientes acciones:

Duplicar

Permite duplicar el subcomponente y crear uno nuevo, el cual incluirá la misma información y contenido.

Eliminar

Permite eliminar el subcomponente del listado.

Nota: Los cambios no serán aplicados en tu tienda hasta que guardes los cambios. Por ejemplo, si eliminaste un subcomponente por error, puedes hacer click en el botón Rehacer que está disponible en la esquina superior derecha del Editor Visual para volver a agregarlo.

Esconder

Allows you to hide the subcomponent on the storefront.

Te permite esconder el subcomponente en la tienda, sin necesariamente tener que eliminarlo.

Plantillas del Tema

Una Plantilla es el contenedor en el cual todo el diseño de una sección se ubica. Las plantillas disponibles en Jumpseller son las siguientes:

Inicio

Esta es la página inicial y principal que se muestra cuando un visitante ingresa al dominio de tu tienda, como por ejemplo tu-dominio.jumpseller.com o tu-dominio.com.

Producto

Muestra toda la información de los productos de tu tienda. Puedes crear todas las plantillas que quieras para mostrar la información de varias formas para distintos tipos de productos.

Categoría

Está enfocada en desplegar las colecciones de productos de las categorías que puedes crear en el panel de administración de tu tienda, lo cual puedes realizar al ir a Productos > Categorías. Aquí también puedes crear nueva plantillas y aplicarlas a categorías para diferenciarlas.

Página

Los temas de Jumpseller vienen con 3 plantillas de página preinstaladas que puedes utilizar, y de la misma forma que con Productos y Categorías, también puedes crear muchas más y aplicarlas a tus páginas.

Las plantillas de página preinstaladas en un tema son las siguientes:

Blog

Despliega todas las páginas categorizadas como Post.

Nota: Puedes crear cuantas categorías de página necesites y relacionarlas a diferentes páginas, como por ejemplo Noticias, Consejos, etc.

Post

Despliega la información de un Post.

Default

Esta es la plantilla por defecto para el contenido de tus páginas genéricas. Páginas Legales como por ejemplo Términos y Condiciones, Políticas de Privacidad y Políticas de despacho, utilizarán de forma automática esta plantilla.

Búsqueda

Despliega todos los productos que coincidan cuando un cliente realice una búsqueda en tu tienda.

Contacto

Puede desplegar varios detalles sobre tu tienda, como por ejemplo información de contacto, enlaces de redes sociales, un mapa y un formulario de contacto.

Error

Se utiliza cuando un visitante llega a una página que no está disponible, como por ejemplo al ingresar una URL incorrecta o una página que ya no exista. También se utiliza por ejemplo cuando se produce algún problema en el proceso de compra de tu tienda.

Conceptos básicos

A continuación, explicamos algunos tópicos, palabras y conceptos que serán utilizados en este artículo.

Slider/Carrusel

Un Slider o Carrusel es un tipo de elemento que ampliamente utilizado en los Componentes, y el cual básicamente despliega Ítems o Subcomponentes en una sección donde se muestran más o menos dependiendo del tipo de dispositivo en donde se esté visitando la tienda. Los elementos que se esconden -o no son visibles- en la ventana del navegador, podrán ser visibles mediante objetos de navegación como flechas y puntos, o al arrastar el contenido de forma horizontal.

En la mayoría de los Componentes del tema encontrarás opciones para personalizar Carruseles, usualmente dentro de un grupo llamado Configuraciones del carrusel, el cual incluirá lo siguiente:

Habilitar reproducción automática: Permite que el Carrusel se mueva automáticamente de un ítem al siguiente.
Velocidad de reproducción automática: Permite definir el tiempo que tomará para que la opción anterior funcione.
Mostrar flechas: Permite mostrar flechas bajo el Carrusel para que los usuarios lo controlen.
Mostrar flechas en hover: si la opción anterior se encuentra habilitada, esta te permitirá definir que las flechas sólo se muestren cuando los usuarios hacen “hover” dentro del área del componente. Al sacar el cursor, se esconderán. Este comportamiento sólo será aplicado en dispositivos de escritorio.
Mostrar puntos: Permite mostrar puntos bajo el Carrusel para que los usuarios lo controlen.

Nota: En componentes como el Slider el nombre del grupo puede ser distinto, pero aún así las opciones ofrecerán la misma funcionalidad, incluso cuando alguna de ellas pueda tener un nombre un poco distinto también.

Grupos de Colores

La mayoría de los componentes poseen su propia configuración para personalizar colores. Con los Grupos de Colores podrás cambiar el look de todo un componente en un sólo click. Estos cambios se aplican a elementos tales como el fondo, textos, enlaces y botones. Puedes editar, reutilizar, clonar o crear cuantos grupos desees. Cuando modificas el color de un grupo, este será aplicado en cada lugar donde dicho grupo esté siendo utilizado.

Nota: No todos los componentes están disponibles en todos los temas de Jumpseller, así como también no todas las opciones para cada componente o subcomponente son las mismas en todos los temas. Sin embargo, el comportamiento principal de ellos es similar y esta documentación te ayudará a configurarlos de forma exitosa.

Dispositivos

A través de este artículo verás que utilizamos frecuentemente los conceptos de Desktop (Escritorio) y Mobile (Móvil o Móviles). Incluso cuando mayoritariamente hacemos referencia a estos dos, es importante considerar la existencia de dispositivos Tablet (Tabletas).

En la siguiente table puedes encontrar el detalle de las dimensiones con las cuales consideramos cada dispositivo:

Dispositivo	Equivalencia del ancho
Móvil pequeño	Igual o menor a 414 px
Móvil	Igual o menor a 575 px
Tableta	Entre 575 px y 991 px
Escritorio	Igual o mayor a 992 px
Escritorio grande	Igual o mayor a 1200 px

Nota: Esto considera principalmente la visualización vertical para dispositivos Móviles y Tabletas. Por ende, puede suceder que al cambiar o rotar un dispositivo de forma horizontal, el ancho cambie y la equivalencia en pixeles sea distinta a la mencionada en la tabla anterior.

Ancho

En el artículo encontrarás la palabra Ancho mencionada varias veces y es ya que en varios componentes tendrás la posibilidad de definir y cambiar el ancho de las secciones, de forma que puedas crear diseños bien dinámicos. Las convenciones de nomenclatura más comunes que encontrarás son, por ejemplo, las siguientes:

Ancho de Grilla

Los temas son construidos y codificados con un diseño que reestringe y ajusta el contenido de varias secciones a un ancho específico, de forma tal que todos se vean y comporten similarmente y posean un diseño sólido. Para esto, utilizamos un diseño en todas todas las secciones pueden ser divididas en 12 columnas.

En este caso, Grilla significa que el contenido se expandirá al espacio máximo disponible de esta, por ende 12 columnas, lo cual es aproximadamente 1320 pixeles.

Navegador o Ancho completo

Esto significa que el contenido se expandirá, adaptará y cambiará de tamaño al ancho máximo disponible del navegador donde tu tienda esté siendo visualizada o visitada.

Otros tamaños de ancho

En varios componentes encontrás opciones para el ancho que te permitirán elegir entre:

Pequeño: el contenido se reestringirá a sólo 6 de las 12 columnas disponibles de la grilla en dispositivos de Escritorio, y 7 columnas para dispositivos menores como una Tableta.
Mediano: el contenido se reestringirá a sólo 8 de las 12 columnas disponibles de la grilla en dispositivos de Escritorio, y 9 columnas para dispositivos menores como una Tableta.
Grande: el contenido se reestringirá a sólo 10 de las 12 columnas disponibles de la grilla en dispositivos de Escritorio, y 11 columnas para dispositivos menores como una Tableta.

Nota: En algunos componentes también encontrarás la opción Extra Grande, la cual variará y cambiará las dimensiones mencionadas anteriormente dependiendo del caso de uso, opciones y contexto del componente en que se encuentre disponible. Para dispositivos Móviles el contenido se expandirá al ancho completo disponible.

Hover

En este artículo utilizaremos el término hover de forma frecuente, lo cual básicamente significa la acción en la cual un usuario posa el mouse/cursor sobre un elemento, objecto o sección.

Overlay

En varios componentes encontrarás una opción que hace referencia a Overlay. Este elemento es básicamente una capa que se posiciona entre el contenido y la imagen de una sección y permite generar un mayor contraste entre ambos. Puedes encontrar esta opción en componentes (o subcomponentes) como por ejemplo Slides, Banners, Banner Grande.

Animaciones

Dentro de la mayoría -si no todos- de los componentes encontrarás una opción llamada Habilitar Animación la cual te permitirá modificar y personalizar las transiciones que serán aplicadas. Las opciones disponibles son las siguientes:

Tipo de animación: permite definir la posición desde la cual el componente será animado y aparecerá.
Animar sólo una vez: al habilitar, la animación sólo sucederá cuando bajes en la página y el componente aparezca. Por el contrario, al deshabilitarla, la animación sucederá cuando bajes y subas cada vez en la página.
Retraso de animación: permite definir el tiempo que tomará (en milisegundos) para que suceda la animación, una vez que el componente ingrese o sea visible en la ventana del navegador.

Cabeceras

En la mayoría de los Componentes encontrarás una opción llamada Habilitar cabecera, la cual al ser habilitada desplegará un listado de opciones vinculadas las cuales te permitirán personalizar elementos que son parte de esta sección.

Esta sección se ubica al inicio de los componentes y las opciones para ella son las siguientes:

Subtítulo: se muestra al inicio de la Cabecera y antes del Título.
Título: se muestra entre el Subtítulo y la Descripción, y en la mayoría de los casos es obligatorio.
Descripción: se muestra bajo el Título.
Enlace: permite agregar un enlace a cualquier contenido de la tienda, como por ejemplo categorías, productos, páginas, enlaces externos, etc.
Texto del enlace: texto que se mostrará en el enlace.

La apariencia de las Cabeceras en aspectos como alineación, entre otros estilos, está definida por varias opciones las cuales pueden ser encontradas en Temas > Editor Visual > Configuración del tema > Cabeceras. Puedes leer más sobre ellas en este articulo.

Listado de componentes and subcomponentes

Cabecera

El componente Cabecera está presente en la mayoría de las plantillas, mientras que algunos temas no lo mostrarán en las páginas del proceso de compra (Carro, Checkout, Revisión del pedido y Compra exitosa).

Este componente se ubica al principio del diseño de cada plantilla. La Cabecera incluye en todos los casos, una Barra de búsqueda y el Menú de navegación principal.

Algunos temas poseen configuraciones avanzadas y opciones como por ejemplo las siguientes:

Menús secundarios
La posibilidad de mostrar redes sociales
Detalles e información de contacto
Paneles laterales
entre otros.

Para más información sobre este componente, por favor visita este artículo en donde se explica en detalle.

Pie de Página

El componente Pie de Página está presente en la mayoría de las plantillas, y al igual que la Cabecera, algunos temas no lo muestran en las páginas del proceso de compra.

Este componente se ubica en la parte inferior del diseño de cada plantilla, y usualmente se utiliza para mostrar algunos de los siguientes elementos:

el Logo (o nombre) de tu tienda
la descripción de la tienda
menús de navegación
enlaces de redes sociales
un formulario de newsletter
logos de métodos de pago
entre otras opciones que pueden variar entre los temas.

Para más información sobre este componente, por favor visita este artículo en donde se explica en detalle.

Acordeón

Este componente se utiliza para desplegar información bien diversa y detallada sobre tópicos o asuntos como descripciones respecto de ciertas características de tu tienda, preguentas frecuentes, detalles de producto, etc.

Configuraciones del componente

Al hacer click en el nombre del componente encontrarás opciones generales para personalizarlo, las cuales determinarán como se verá y comportará la sección. Las opciones disponibles para este componente son las siguientes:

Ancho

Permite definir el ancho del contenido del componente, en base a las siguientes opciones:

Pequeño: el acordeón se limitará a sólo 6 de las 12 columnas de la grilla del tema.
Mediano: el acordeón se limitará a sólo 8 de las 12 columnas de la grilla del tema.
Grande: el acordeón se limitará a sólo 10 de las 12 columnas de la grilla del tema.
Ancho de grilla: el acordeón cubrirá el ancho completo de la grilla del tema.

Alineación de contenido

Permite definir la posición horizontal en qué se ubicará el acordeón.

Nota: No habrá ningún cambio visible si definiste Ancho de grilla en la opción anterior.

Habilitar ítems colapsables

Al habilitar esta opción, cuando un usuario haga click en alguno de los ítems del acordeón los demás se cerrarán. De forma opuesta, al deshabilitarla, todos los ítems permanecerán abiertos al hacer click.

Primer ítem abierto

Permite definir que el primer ítem del acordeón esté abierto por defecto al cargar la página. Cómo o cuándo este ítem se cierre dependerá en el comportamiento de la opción anterior.

Habilitar cabecera

Permite desplegar una Cabecera antes del contenido del componente. Puedes encontrar el listado de opciones en esta sección de la página.

Margen superior

Permite controlar el margen de la parte superior de la sección.

Margen inferior

Permite controlar el margen de la parte inferior de la sección.

Colores de contenido

Permite elegir el Pack de Colores para el componente.

Configuraciones del subcomponente

El subcomponente de un Acordeón se llama Item de Acordeón y puedes agregar todos los que quieras para entregar la información necesaria a tus clientes. Las opciones para este subcomponente son las siguientes:

Título

Título o nombre para el ítem de acordeón.

Nota: Este campo es obligatorio.

Contenido

Aquí puedes agregar un texto o descripción para el ítem de acordeón.

Nota: Este campo es obligatorio.

Imagen

Permite agregar una imagen que se muestre junto al contenido del ítem de acordeón.

Tamaño de la imagen

Permite definir el ancho que tendrá la imagen desde un 10% a un 100%. Estos porcentajes dependerán del ancho del ítem, el cual es definido en base a ancho del acordeón.

Posición de la imagen

Permite definir si la imagen se mostrará antes o después del contenido del ítem.

Banners

El propósito de este componente es para que puedasa destacar ciertas características o información respecto de tu tienda, con contenido que puede ser por ejemplo promociones, categorías y/o productos destacados, entre otras, mediante el uso de imágenes y enlaces.

Configuraciones del componente

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

Tipo de visualización

Permite definir la forma en que los Banners serán mostrados en el componente, en base a las siguientes opciones:

Carrusel: los Banners se mostrarán dentro de un Carrusel, en el cual puedes controlar aspectos tales como la velocidad, reproducción automática o si quieres mostrar elementos de navegación en él.
Grilla: los Banners se mostrarán en columnas, una junta a la otra de forma vertical y horizontal en base a la cantidad de ítems por fila que definas. En dispositivos móviles siempre se apilarán de forma vertical.

Tipo de contenido

Permite definir la forma en que cada Banner se verá y qué opciones serán consideradas respecto de las opciones de sus subcomponentes respectivos. Las opciones disponibles son las siguientes:

Imagen + Contenido: La imagen o imágenes para cada Banner funcionarán como fondo y el contenido (p.e. Título) será posicionado sobre este.
Sólo imagen: No será necesario que agregues ningún tipo de contenido, por ende, elementos como por ejemplo el Título no se mostrarán. En base a esto, cualquier tipo de gráfica que quieras agregar, como textos, formas, etc., deberán ser incluidas dentro de la imagen mediante softwares como Photoshop, Illlustrator, Canva, etc.

Proporción de imagen

Permite elegir la forma de las imágenes de tus banners. Esto funciona en base a lo que se conoce Relación de aspecto, lo cual permite que todas las imágenes se vean proporcionalmente iguales de forma tal que puedas mostrar un diseño consistente entre ellas. Las opciones disponibles son las siguientes:

Apaisado: Una forma bien ancha y no tan alta, muy útil para proveer un estilo panorámico. Utiliza una proporción de 16:9.
Retrato: una forma alta y estrecha, ideal para exhibir en formato vertical, como los carteles. Utiliza una proporción de 3:4.
Rectangular: una forma equilibrada, ligeramente más larga, adecuada para la mayoría de las imágenes. Utiliza una proporción de 4:3.
Cuadrada: una forma con la misma altura y ancho, perfecta para imágenes en las que ambas dimensiones son iguales. Utiliza una proporción de 1:1.

Nota: Las imágenes que subas se adaptarán a la forma definida y llenarán el espacio disponible posicionándolas al centro de forma horizontal y vertical. Esta opción sólo será considerada si definiste Imagen + Contenido en la opción Tipo de contenido.

Número de columnas en escritorio

Permite definir la cantidad de Banners que serán desplegados en una fila horizontal individual, para dispositivos de Escritorio que posean un ancho igual o mayor a 768px.

Nota: Al elegir la opción de 4 columnas, la cantidad de Banners en dispositivos de escritorio pequeños cambiará de forma automática a 2 columnas, para preservar una visualización óptima del contenido dentro de ellos.

Número de columnas en móvil

Permite definir la cantidad de Banners que serán desplegados en una fila horizontal individual, para dispositivos Móviles que posean un ancho igual o menor a 767px.

Nota: puedes encontrar las dimensiones ideales en que necesitarás subir las imágenes para Banners en esta sección de la página.

Habilitar cabecera

Permite desplegar una Cabecera antes del contenido del componente. Puedes encontrar el listado de opciones en esta sección de la página.

Configuraciones del carrusel

Al seleccionar Carrusel en la opción Tipo de visualización, podrás personalizar ciertas configuraciones para definir como este se comportará. Puedes encontrar el listado de opciones en esta sección de la página.

Margen superior

Permite controlar el margen de la parte superior de la sección.

Margen inferior

Permite controlar el margen de la parte inferior de la sección.

Colores de contenido

Permite elegir el Pack de Colores para el componente.

Configuraciones del subcomponente

El subcomponente de un componente Banners se llama Banner, y puedes agregar todos los que quieras. Las opciones para este subcomponente son las siguientes:

Colores de contenido

Permite elegir el Pack de Colores para cada Banner.

Imagen (escritorio)

Permite subir una imagen para dispositivos de Escritorio que posean un ancho igual o mayor a 576px.

Imagen (móvil)

Permite subir una imagen para dispositivos Móviles que posean un ancho igual o menor a 575px.

Nota: Si subes sólo una de las imágenes, será utilizada en todos los dispositivos.

Overlay de la imagen

Permite definir la opacidad (transparencia) para el elemento Overlay.

Posición horizontal de la imagen

Permite definir la posición horizontal para cualquiera de las imágenes anteriores, sólo cuando Tipo de contenido sea igual a Imagen + Contenido en la configuración del componente principal.

Posición vertical de la imagen

Permite definir la posición vertical para cualquiera de las imágenes anteriores, sólo cuando Tipo de contenido sea igual a Imagen + Contenido en la configuración del componente principal.

Nota: La posición horizontal y vertical será más notoria cuando las imágenes sean más grandes o amplias que la Proporción de imagen definida, como por ejemplo si optas por una forma proporcional de Retrato y la imagen que subas posea una dimensión rectangular.

Posición horizontal del contenido

Permite definir la forma en que el contenido de los banners se posicionará en el eje x (horizontal).

Posición vertical del contenido

Permite definir la forma en que el contenido de los banners se posicionará en el eje y (vertical).

Opciones de contenido

A continuación, encontrarás varias opciones para agregar contenido a un banner:

Subtítulo: Opcional. Permite mostrar un texto pequeño antes del Título del banner.
Título: Permite mostrar un título para el banner. Intenta que sea breve para que no colapse el espacio disponible.
Enlace: Permite agregar un enlace a cualquier contenido de la tienda, como por ejemplo categorías, productos, páginas, etc.
Texto del enlace: Texto que se mostrará en el botón.
Mostrar enlace como botón: De ser habilitado, el botón se hará visible. Si se deshabilita, se esconderá pero el Banner será clickeable de forma completa.
Usar estilo de contorno del botón: Permite mostrar el enlace/botón con un borde alrededor.
Mostrar flecha en botón: Permite mostrar una flecha al lado derecho del texto del botón.
Habilitar como enlace externo: Al habilitar, el enlace se abrirá en una nueva pestaña del navegador.

Nota: Subtítulo, Título y Enlace como botón sólo se mostrarán y serán visibles si la opción Tipo de contenido es igual a Imagen + Contenido. Para el caso de la opción Sólo imagen, sólo necesitarás considerar las opciones de Imagen (escritorio y móvil), Enlace y Texto del enlace.

Este componente te permite mostrar una sección en la cual su propósito es destacar algo respecto de tu tienda, como puede ser por ejemplo:

Mencionar alguna característica relevante de tu tienda.
Destacar una categoría de tu tienda que sea bien relevante.
Destacar un producto que quieras que tus clientes vean o que quizás posea un muy buen descuento.

Ancho

Permite definir el ancho para todo el componente, en base a las siguientes opciones:

Por defecto: la opción definida en Configuración del tema > Diseño > Estilos del tema > Ancho máximo del contenedor será aplicada.
Pequeño: expande la sección a un ancho máximo de 1320px.
Mediano: expande la sección a un ancho máximo de 1620px.
Grande: expande la sección a un ancho máximo de 1920px.
Extra grande: expande la sección a un ancho máximo de 2220px.
Ancho completo: expande la sección al ancho máximo del navegador en que se esté viendo la tienda.

Altura

Permite definir la altura de todo el componente, en base a las siguientes opciones:

Ajustar al contenido: la altura de la sección será determinada en base al contenido que agregues al componente, como por ejemplo Título, Descripción, etc.
Pequeño: La altura de la sección será como mínimo de 420px.
Mediano: La altura de la sección será como mínimo de 560px.
Grande: La altura de la sección será como mínimo de 720px.
Navegador: La altura de la sección tomará, cómo mínimo, la altura de la ventana del navegador en donde se esté visitando tu tienda, por lo cual podrá variar de dispositivo en dispositivo.

Nota: We refer to a minimum, because the height of the section will vary depending on the amount and/or length of the content you add within the component.

Nota: Hacemos referencia a un mínimo, ya que la altura de la sección variará dependiendo de la cantidad y/o que tan extenso sea el contenido que agregues en el componente.

Imagen (escritorio)

Permite subir una imagen para dispositivos de Escritorio que posean un ancho igual o mayor a 576px.

Imagen (móvil)

Permite subir una imagen para dispositivos Móviles que posean un ancho igual o menor a 575px.

Nota: Si subes sólo una de las imágenes, será utilizada en todos los dispositivos.

Overlay de la imagen

Permite definir la opacidad (transparencia) para el elemento Overlay.

Posición horizontal de la imagen

Permite definir la posición horizontal dentro del espacio disponible para cualquiera de las imágenes anteriores.

Posición vertical de la imagen

Permite definir la posición vertical dentro del espacio disponible para cualquiera de las imágenes anteriores.

Nota: La posición vertical y horizontal es más notoriamente visible cuando las imágenes son mayores o más grandes que la dimensión de la sección.

Tipo de contenido

Permite definir la forma en que se verá el componente y las opciones que serán consideradas dentro de su configuración respectiva. Las opciones disponibles son las siguientes:

Imagen + Contenido: La imagen o imágenes para funcionarán como fondo y el contenido (ej: Título) será posicionado sobre ellas.
Sólo imagen: No será necesario que agregues ningún contenido, por ende, elementos tales como el Título no serán desplegados. En base a esto, cualquier tipo de elemento gráfico que quieras agregar, como por ejemplo textos, formas, etc., deberán ser incluidas dentro de la imagen mediante softwares como Photoshop, Illlustrator, Canva, etc.

Nota: Al elegir Sólo imagen sólo deberás considerar las siguientes opciones dentro de la configuración del componente: Imagen (escritorio y móvil), Enlace y Texto del enlace.

Alineación de contenido

Permite definir la alineación para el contenido del componente.

Posición horizontal del contenido

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

Opciones de contenido

A continuación, encontrarás varias opciones para agregar contenido al componente:

Subtítulo: Opcional. Permite mostrar un texto pequeño antes del Título de la sección.
Título: Permite mostrar un título en la sección. Intenta que sea breve para que no colapse el espacio disponible.
Descripción: Opcional. Permite mostrar un texto después del Título para dar más contexto sobre qué trata la sección.
Enlace: Permite agregar un enlace a cualquier contenido de la tienda, como por ejemplo categorías, productos, páginas, etc.
Texto del enlace: Texto que se mostrará en el botón.
Mostrar enlace como botón: De ser habilitado, el botón se hará visible. Al deshabilitar, se esconderá pero la sección será clickeable de forma completa.
Usar estilo de contorno del botón: Permite mostrar el enlace/botón con un borde alrededor.
Mostrar flecha en botón: Permite mostrar una flecha al lado derecho del texto del botón.
Habilitar como enlace externo: Al habilitar, el enlace se abrirá en una nueva pestaña del navegador.

Margen superior

Permite controlar el margen de la parte superior de la sección.

Margen inferior

Permite controlar el margen de la parte inferior de la sección.

Colores de contenido

Permite elegir el Pack de Colores del componente. Esto determinará básicamente los colores de los textos dentro de él, como por ejemplo el Título.

Nota: Las dimensiones sugeridas ideales para la o las imágenes que es posible subir puedes encontrarlas en esta sección

Formulario de contacto

Este componente te permite desplegar el Formulario de contacto de tu tienda en distintas plantillas y páginas del tema. Hay ciertas consideraciones que debes tener en mente al utilizarlo:

Sólo es posible tenerlo una vez por página. Por ejemplo, no podrás agregarlo dos veces en la página de inicio de tu tienda.
Cuando los usuarios hagan click en el botón Enviar del formulario y el mensaje sea enviado exitosamente, serán redireccionados a la Página de contacto de tu tienda, por lo cual debes cerciorarte de que este componente también esté agregado y sea visible en dicha plantilla.

Habilitar cabecera

Permite desplegar una Cabecera antes del contenido del componente. Puedes encontrar el listado de opciones en esta sección de la página.

Margen superior

Permite controlar el margen de la parte superior de la sección.

Margen inferior

Permite controlar el margen de la parte inferior de la sección.

Colores de contenido

Permite elegir el Pack de Colores para el componente.

Información de contacto

Este componente te permite mostrar una sección con datos de contacto de la ubicación definida como Principal/Default en el panel de administración de tu tienda, la cual puedes configurar yendo a Configuración > Checkout > Ubicaciones.

Habilitar cabecera

Permite desplegar una Cabecera antes del contenido del componente. Puedes encontrar el listado de opciones en esta sección de la página.

Alineación de contenido

Permite definir la alineación de los datos de contacto del componente. La alineación para la sección Cabecera del componente se define en tu panel de administración, yendo a Temas > Editor Visual > Configuración del tema > Cabeceras.

Mostrar correo de contacto

Permite mostrar el correo de la ubicación.

Mostrar teléfono de contacto

Permite mostrar el número de teléfono de la ubicación.

Mostrar número de WhatsApp

Permite mostrar el número WhatsApp definido en el panel de administración de tu tienda, yendo a Configuración > General > Preferencias > Redes Sociales.

Mostrar dirección principal de la tienda

Permite mostrar la dirección de la ubicación. Esta será un enlace a Google Maps, el cual se abrirá en una nueva pestaña del navegador en dispositivos de Escritorio o la aplicación de Google Maps en dispositivos móviles.

Mostrar enlaces de redes sociales

Permite mostrar los enlaces de redes sociales que pueden ser agregados en el panel de administración de tu tienda, yendo a Configuración > General > Preferencias > Redes Sociales.

Margen superior

Permite controlar el margen de la parte superior de la sección.

Margen inferior

Permite controlar el margen de la parte inferior de la sección.

Colores de contenido

Permite elegir el Pack de Colores para el componente.

Mapa de contacto

Este componente te permite desplegar un Mapa con diseño y estilo de Google Maps, el cual mostrará la dirección de la ubicación definida como Principal/Default en el panel de administración de tu tienda, la cual puedes configurar yendo a Configuración > Checkout > Ubicaciones.

Habilitar cabecera

Permite desplegar una Cabecera antes del contenido del componente. Puedes encontrar el listado de opciones en esta sección de la página.

Tamaño del mapa

Te permite definir el ancho del Mapa, en base a las siguientes opciones:

Ancho de grilla: el mapa abarcará el ancho completo de la grilla del tema.
Pequeño: el mapa se reestringirá a sólo 6 de las 12 columnas de la grilla del tema.
Mediano: el mapa se reestringirá a sólo 8 de las 12 columnas de la grilla del tema.
Grande: el mapa se reestringirá a sólo 10 de las 12 columnas de la grilla del tema.

Posición del mapa

Te permite definir la posición horizontal en que el Mapa se ubicará.

Nota: Esto no tendrá efecto alguno si se definió Ancho de grilla en la opción anterior.

Margen superior

Permite controlar el margen de la parte superior de la sección.

Margen inferior

Permite controlar el margen de la parte inferior de la sección.

Colores de contenido

Permite elegir el Pack de Colores para el componente.

Categorías

Este componente te permite agregar varios ítems o bloques, los cuales pueden ser categorías de tu tienda, y en donde puedes personalizar atributos y opciones para cada uno de ellos.

Configuraciones del componente

Nota: haremos referencia al Contenido para los detalles de una categoría, como por ejemplo su Nombre/Título, Descripción y Botón enlace.

Tipo de visualización

Permite definir la forma en que los bloques serán mostrados en el componente, en base a las siguientes opciones:

Carrusel: los bloques se mostrarán dentro de un Carrusel, con elementos de navegación para controlarlo.
Grilla: los bloques se mostrarán en columnas en filas horizontales.

Número de columnas en escritorio

Permite definir la cantidad de bloques que serán mostrados por fila horizontal, en dispositivos de Escritorio. La cantidad visible de bloques en dispositivos más pequeños variará en base a lo que hayas definido en la opción Tipo de visualización, de la siguiente forma:

Carrusel

Ancho de dispositivo	Cantidad de bloques (en vista)
Igual o mayor a 992px	Cantidad definida
Menor a 992px	3 bloques
Menor a 768px	2 bloques

Grilla

Ancho de dispositivo	Cantidad de bloques (por fila horizontal)
Igual o mayor a 992px	Cantidad definida
Menor a 992px	3 bloques
Menor a 768px	2 bloques

Número de columnas en móvil

Permite definir la cantidad de bloques que se mostrarán por fila horizontal, en dispositivos Móviles que posean un ancho igual o menor a 575px.

Posición del contenido

Permite definir cómo y dónde se posicionará el Contenido de cada bloque, en base a las siguientes opciones:

Sobre la imagen: el Contenido se posicionará sobre la imagen, por ende, esta actuará como imagen de fondo.
Bajo la imagen: el Contenido se posicionará bajo o después de la imagen, por ende, se aplirán verticalmente.

Alineación de bloques en escritorio

Permite definir la alineación de todos los bloques del componente, para dispositivos de escritorio que posean un ancho igual o mayor a 576px.

Alineación de bloques en móvil

Permite definir la alineación de todos los bloques del componente, para dispositivos móviles que posean un ancho igual o menor a 575px.

Proporción de imagen

Permite elegir la forma en que se mostrarán las imágenes de los bloques, en base a las siguientes opciones:

Apaisado: Una forma bien ancha y no tan alta, muy útil para proveer un estilo panorámico. Utiliza una proporción de 16:9.
Retrato: una forma alta y estrecha, ideal para exhibir en formato vertical, como los carteles. Utiliza una proporción de 3:4.
Rectangular: una forma equilibrada, ligeramente más larga, adecuada para la mayoría de las imágenes. Utiliza una proporción de 4:3.
Cuadrada: una forma con la misma altura y ancho, perfecta para imágenes en las que ambas dimensiones son iguales. Utiliza una proporción de 1:1.

Habilitar cabecera

Permite desplegar una Cabecera antes del contenido del componente. Puedes encontrar el listado de opciones en esta sección de la página.

Configuraciones del carrusel

Configuraciones del subcomponente

El subcomponente para el componente Categorías se llama Bloque de categoría, y puedes agregar todos los que quieras. Las opciones para este subcomponente son las siguientes:

Categoría

Aquí debes elegir la categoría para el ítem, lo cual automáticamente agregará atributos tales como nombre y enlace.

Título

Permite reemplazar el nombre original de la categoría seleccionada.

Mostrar descripción

Permite desplegar la descripción de la categoría seleccionada bajo el nombre. Al habilitarla, la siguiente opción estará disponible:

Descripción

Permite agregar una descripión personalizada para el bloque. Si la categoría posee una descripción en su configuracción, lo que agregues en este campo la reemplazará.

Opciones de imagen

Este grupo contiene varias opciones para personalizar la imagen(es) del bloque.

Imagen de fondo (escritorio)

Permite subir una imagen para dispositivos de escritorio que posean un ancho igual o mayor a 768px.

Imagen de fondo (móvil)

Permite subir una imagen para dispositivos móviles que posean un ancho igual o menor a 767px.

Nota: Por defecto la imagen inicial que se mostrará será la que posea la categoría en su configuración en el panel de administración. Si subes la imagen de escritorio y/o móvil, estas reemplazaran a la de la categoría.

Overlay de la imagen

Permite definir la opacidad (transparencia) para el elemento Overlay, el cual será visible sólo si escogiste Sobre la imagen en la opción Posición del contenido, en la configuración del componente principal.

Icono imagen

Permite subir un icono personalizado. La posición en que este se muestre dependerá de lo que escojas en la opción Posición del contenido, en base a lo siguiente:

Sobre la imagen: el icono se ubicará junto al contenido del bloque, antes del nombre.
Bajo la imagen: el icocno se ubicará sobre la imagen, centrado vertical y horizontalmente.

Nota: Te sugerimos subir un icono en formatos como por ejemplo SVG, WebP o PNG.

Tamaño del icono

Permite definir el tamaño del icono mediante porcentajes, lo cual dependerá del ancho del bloque. Por ende, si defines 50% (máximo disponible) el ancho del icono será la mitad del ancho completo del bloque.

Opciones de enlace

Este grupo contiene varias opciones para personalizar el enlace del bloque.

Texto del enlace

Permite definir el texto a mostrar en el enlace. Este llevará directamente a la categoría que seleccionaste.

Habilitar como enlace externo

Al habilitar, el enlace será abierto en una nueva pestaña del navegador.

Mostrar flecha en título

Al habilitar, se mostrará una flecha y su posición dependerá de lo que hayas escogido en la opción Posición del contenido en la configuración del componente principal, de la siguiente forma:

Sobre la imagen: la flecha se mostrará junto al texto del enlace, y si Mostrar enlace como texto se encuentra habilitada.
Bajo la imagen: la flecha se mostrará al lado derecho del nombre de la categoría.

Mostrar enlace como texto

Al habilitar, el enlace a la categoría se mostrará al final de todo el contenido de la sección. Al deshabilitarla, el enlace como tal se esconderá pero el bloque en su totalidad será clickeable y llevará a la página respectiva de la categoría.

Colores de contenido

Permite elegir el Pack de Colores para el bloque.

Nota: Esto sólo será aplicado si escogiste Sobre la imagen en la opción Posición del contenido en la configuración del componente principal.

Contador

Este componente te permite agregar una sección que mostrará un Reloj de cuenta regresiva o Reloj contador, el cual puede ser muy útil para por ejemplo:

Aumentar la urgencia y generar conversiones: al mostrar un reloj de cuenta regresiva, los clientes sienten la urgencia de actuar antes de que caduque la oferta. Esto suele generar una toma de decisiones más rápida y mayores tasas de conversión.
Aumentar la visibilidad de ofertas especiales: incluir un título, un subtítulo y una descripción claros te permite destacar promociones especiales, hacer que se destaquen en la página y garantizar que los clientes no se las pierdan.
Mejorar el marketing urgente: perfecto para ventas relámpago, descuentos por tiempo limitado o promociones de eventos, el contador ayuda a alinear tus esfuerzos de marketing con fechas límite específicas.
Aumentar las tasas de clicks: la inclusión de un enlace garantiza que los usuarios interesados puedan navegar fácilmente a la página relevante, lo cual genera tráfico al destino deseado.

Fecha del contador

Obligatorio. Aquí debes definir la Fecha en que el reloj se detendrá, por ejemplo 2023/06/30 (año / mes / día). Cuando el reloj llegue a cero (0), la sección se esconderá automáticamente y no será visible.

Nota: Las barras diagonales (/) NO deben tener o incluir espacios ni antes ni después.

Hora del contador

Opcional. Aquí puedes agregar, adicionalmente a la Fecha anterior, una hora en qué el contador se detendrá. Ejemplo: 23:59:59 (hora : minutos : segundos).

Nota: Los dos puntos (:) NO deben incluir o tener espacios ni antes ni después.

Título del contador

Título que se muestra arriba del Reloj contador. Por defecto mostrará el texto "Las ofertas terminan en".

Subtítulo

Opcional. Texto que se puede mostrar antes del Título de la sección (no del Título del contador).

Título

Opcional, pero ideal. Texto que puede desplegarse a la izquierda de la sección, junto y bajo el Subtítulo.

Enlace

Permite agregar un enlace (botón) a cualquier contenido de la tienda, como por ejemplo categorías, productos, páginas, enlaces externos, etc.

Nota: Considera agregar un enlace a alguna página, idealmente una categoría, en donde hayan efectivamente ofertas disponibles.

Texto del enlace

Texto que se muestra en el enlace (botón).

Nota: Considera agregar un texto que invite a los usuarios a hacer click en él.

Color de fondo

Permite definir el color de fondo de la sección.

Enlace - Color de fondo

Permite definir el color de fondo del enlace (botón).

Nota: Ambas opciones de color adaptarán de forma automática el color de los textos del componente, aplicando un contraste apropiado.

Código Personalizado

Utiliza este componente para aplicaciones externas o diseño personalizado, en él puedes incluir código, herramientas, aplicaciones, etc., que necesites desplegar en él.

Código personalizado

En este campo puedes agregar el código que quieras desplegar en tu tienda.

Nota: Este campo no soporta ni permite el uso de etiquetas liquid.

Código Personalizado `(next-gen)`

Nota: Este componente sólo está disponible en temas Next-Gen, como por ejemplo Simple.

Utiliza este componente para aplicaciones externas o diseño personalizado, en él puedes incluir código, herramientas, aplicaciones, etc., que necesites desplegar en él.

Código

En este campo puedes agregar el código que quieras desplegar en tu tienda.

Nota: Este campo no soporta ni permite el uso de etiquetas liquid.

Ancho

Permite definir el ancho del contenido de la sección, en base a las siguientes opciones:

Ancho de grilla: El contenido de la sección se expandirá al ancho máximo de la grilla del tema, el cual es de 1296px.
Ancho completo: El contenido se expandirá al ancho máximo del navegador en que se esté visitando la tienda.

Margen superior

Permite controlar el margen de la parte superior de la sección.

Margen inferior

Permite controlar el margen de la parte inferior de la sección.

Medios con texto

Este componente te permite crear diseños dinámicos en tu tienda mediante el uso de imágenes o videos y contenido, en los cuales puedes definir como estos se mostrarán dentro de la sección.

Para entender de mejor manera cómo funciona, nos referiremos a Contenido respecto de las opciones Subtítulo, Título, Texto y Enlace; y nos referiremos a Multimedia respecto de las Imágenes o el Video que puedes agregar en la configuración del componente.

Orden de columnas

Permite definir el orden del Contenido y Multimedia, y cómo estos serán presentados dentro del componente para dispositivos de Escritorio, en base a las siguientes opciones:

Contenido / Multimedia: el Contenido se posicionará a la izquierda, mientras que Multimedia a la derecha.
Multimedia / Contenido: Multimedia se posicionará a la izquierda, mientras que Contenido a la derecha.

Nota: ambas secciones utilizarán 6 columnas del total de 12 columnas de la grilla del tema.

Respetar orden de columnas en Móvil

Mientras que la opción anterior define el orden para dispositivos de Escritorio, esta permite respetar dicho orden también en dispositivos Móviles.

Imagen (escritorio)

Permite subir una imagen para dispositivos de Escritorio que posean un ancho igual o mayor a 576px.

Imagen (móvil)

Permite subir una imagen para dispositivos Móviles que posean un ancho igual o menor a 575px.

Nota: Si subes sólo una de las imágenes, será utilizada en todos los dispositivos.

Video

Permite agregar un video de YouTube o Vimeo al copiar y pegar el Código de incrustación disponible en las opciones de cada plataforma.

Nota: Una vez que agregues un Video este tendrá predominancia, por ende, incluso cuando hayas subido cualquiera de las imágenes disponibles anteriormente, no se mostrarán.

Proporción del video

Permite definir la forma en que se mostrará el video, en base a las siguientes opciones:

4 / 3: Esto es básicamente una forma rectangular.
16 / 9: Esto es básicamente una forma apaisada.

Alineación de contenido

Permite definir la alineación del Contenido del componente.

Posición vertical

Permite definir la forma en que el Contenido y Multimedia se alinearán en base al eje y, en el cual el que posea mayor altura determinará la posición del otro.

Opciones de contenido

A continuación, podrás encontrar varias opciones para el Contenido del componente:

Subtítulo: Opcional. Permite mostrar un pequeño texto sobre el Título.
Título: Permite mostrar un título, el cual posee mayor relevancia que el resto de los elementos respecto de su tamaño.
Texto: Permite agregar un texto o descripción para entregar mayor contexto sobre qué trata la sección.
Enlace botón: Permite agregar un enlace con estilo de botón a cualquier contenido de la tienda, como por ejemplo categorías, productos, páginas, etc.
Texto del enlace: Texto que se mostrará en el botón.
Usar estilo de contorno del botón: Permite mostrar el botón con un border alrededor de él.
Mostrar flecha en botón: Permite mostrar una flecha al lado derecho del texto del botón.

Margen superior

Permite controlar el margen de la parte superior de la sección.

Margen inferior

Permite controlar el margen de la parte inferior de la sección.

Colores de contenido

Permite elegir el Pack de Colores para el componente.

Categoría Destacada

Este componente permite mostrar productos de cualquier categoría de tu tienda.

Categoría Destacada

Obligatorio. Aquí debes elegir una categoría para que el componente pueda desplegar productos.

Cantidad de ítems a mostrar

Permite definir la cantidad de productos que serán desplegados en el componente. El orden en que los productos aparecerán será en base al orden que posean dentro de la configuración de la categoría, por lo que deberás editar el listado de productos en ella, considerando el límite que hayas definido en esta opción.

Puedes ver los productos que pertenecen a una categoría específica siguiendo cualquiera de los pasos detallados a continuación:

Opción 1

Accede a Productos > Todos los productos para ver el listado de productos de tu tienda.
Al principio de la lista encontrarás tres opciones, haz click en la del medio y utiliza el filtro que está disponible ahí.
Busca la categoría que deseas para poder mostrar sus productos.
Posteriormente, puedes reordenarlos al hacer click y mantener presionado el mouse para arrastralos hacia arriba o abajo.

Opción 2

Accede a Productos > Categorías y selecciona la que quieras al hacer click en su nombre.
Dentro de la página de la categoría, al lado derecho de la barra superior haz lick en el ícono de 3 puntos que verás.
Se abrirá un menú desplegable y podrás ver el enlace Ver productos, el cua lte llevará a la misma página de la Opción 1, pero ya aplicando un filtro en base a la categoría que seleccionaste.

Tipo de visualización

Permite definir la forma en que los productos serán mostrados en el componente, en base a las siguientes opciones:

Carrusel: los productos se mostrarán dentro de un Carrusel, en el cual puedes controlar aspectos tales como la velocidad, reproducción automática o si quieres mostrar elementos de navegación en él.
Grilla: los productos se mostrarán en columnas, uno junto al otro de forma horizontal y vertical en base a la cantidad de ítems a mostrar que definas. En dispositivos móviles siempre se apilarán de forma vertical.

Nota: La cantidad de productos por fila horizontal para dispositivos de Escritorio y Móviles puede ser modificada en el panel de administración, yendo a Temas > Editor Visual > Configuración del tema > Bloque de Producto. Para más detalles sobre esto puedes leer este artículo en donde se explica en detalle.

Imagen destacada

Este grupo contiene varias opciones para personalizar la(s) imagen(es) que se puede(n) despegar en el comoponente y junto a los productos.

Mostrar imagen destacada

Permite mostrar la imagen de la categoría que escogiste en la opción Categoría destacada. Si la categoría no posee una imagen, deberás subir al menos una de las imágenes disponibles a continuación.

Imagen destacada (escritorio y móvil)

Estas dos opciones te permiten subir imágenes para dispositivos de escritorio y móviles, respectivamente, y se mostraran en base a las siguientes condiciones:

Escritorio: se mostrará en dispositivos de escritorio que posean un ancho igual o mayor a 768px.
Móvil: se mostrará en dispositivos móviles que posean un ancho igual o menor a 767px.

Nota 1: cualquiera de estas dos imágenes reemplazarán la de la categoría.

Nota 2: si subes sólo una de ellas, se mostrará en todos los dispositivos.

Mostrar información de categoría

Esta opción permite mostrar información de la categoría seleccionada sobre la(s) imagen(es). Al habilitarla las siguientes opciones se harán disponibles:

Overlay de imagen: permite definir la opacidad (transparencia) para el elemento Overlay que se muestra entre la(s) imagen(es) y el contenido.
Nombre personalizado de categoría: permite reemplazar el nombre original de la categoría seleccionada.
Alineación de contenido en escritorio: permite definir la alineación para el contenido en dispositivos de escritorio que posean un ancho igual o mayor a 768px.
Alineación de contenido en móvil: permite definir la alineación para el contenido en dispositivos móviles que posean un ancho igual o menor a 767px.
Posición vertical del contenido: permite definir la posición del contenido en el eje "y" (vertical).
Colores de contenido de imagen destacada: permite escoger el Pack de colores que será aplicado a todo el contenido.

Habilitar cabecera

Permite desplegar una Cabecera antes del contenido del componente. Puedes encontrar el listado de opciones en esta sección de la página.

Nota: para este componente la opción Enlace sólo permite habilitar el enlace respectivo que llevará a la Categoría seleccionada.

Configuraciones del carrusel

Margen superior

Permite controlar el margen de la parte superior de la sección.

Margen inferior

Permite controlar el margen de la parte inferior de la sección.

Colores de contenido

Permite elegir el Pack de Colores para el componente.

Productos Destacados

Este componente te permite mostrar los productos que han sido marcados como Destacados en la tienda. A continuación, te explicamos como puedes destacarlos y reordenarlos:

Descata tus productos

Accede a Productos > Todos los productos y selecciona un producto de tu tienda al hacer click en su nombre y/o imagen.
Una vez dentro de la página de configuraación del producto, en el panel del lado derecho encontrarás la opción Producto Destacado.
Haz click en la caja disponible y guarda el cambio.

Listado de productos destacados

Accede a Productos > Todos los productos y antes del listado de productos encontrarás tres opciones. Haz click en la que está más a la derecha.
En el menú desplegable que se abrirá haz click en la que dice Destacados.
La página cargará y filtrará sólo los productos que han sido marcados.
Aquí puedes reordenarlos al hacer click y mantener presionado el mouse para poder arrastrarlos hacia arriba o abajo.
Para quitar un producto de este listado, sólo debes ingresar a su configuración y deshabilitar la opción que fue mencionada anteriormente.

Configuraciones del componente

Cantidad de ítems a mostrar

Permite definir la cantidad de productos que será desplegada en el componente. El orden que los productos se mostrarán será en base al orden que posean en el listado de productos Destacados que fue explicado anteriormente, por lo cual deberás editar el listado, considerando el límite que hayas definido en esta opción.

Tipo de visualización

Permite definir la forma en que los productos serán mostrados en el componente, en base a las siguientes opciones:

Carrusel: los productos se mostrarán dentro de un Carrusel, en el cual puedes controlar aspectos tales como la velocidad, reproducción automática o si quieres mostrar elementos de navegación en él.
Grilla: los productos se mostrarán en columnas, uno junto al otro de forma horizontal y vertical en base a la cantidad de ítems a mostrar que definas. En dispositivos móviles siempre se apilarán de forma vertical.

Nota: La cantidad de productos por fila horizontal para dispositivos de Escritorio y Móviles puede ser modificada en el panel de administración, yendo a Temas > Editor Visual > Configuración del tema > Bloque de Producto. Para más detalles sobre esto puedes leer este artículo en donde se explica en detalle.

Habilitar cabecera

Permite desplegar una Cabecera antes del contenido del componente. Puedes encontrar el listado de opciones en esta sección de la página.

Configuraciones del carrusel

Margen superior

Permite controlar el margen de la parte superior de la sección.

Margen inferior

Permite controlar el margen de la parte inferior de la sección.

Colores de contenido

Permite elegir el Pack de Colores para el componente.

Reseñas Destacadas

Nota: Este componente va de la mano con la funcionalidad de Reseñas de productos, la cual sólo está disponible desde el plan PRO en adelante. Si no posees alguno de estos planes no funcionará, incluso cuando tengas el componente agregado en tu tema. Puedes leer más sobre esto en este artículo.

Este componente te permite desplegar reseñas que tus clientes hayan agregado a tus productos y que hayan sido marcados como Destacados. Para que esto funcione de forma correcta, sigue los siguientes pasos:

Primero debes tener habilitado el correo de Reseña de producto, lo cual puedes realizar en el panel de administración de tu tienda yendo a Configuración > General > Emails.
Una vez que hayas hecho esto y ya hayas recibido reseñas, debes ir a Productos > Reseñas para ver el listado completo.
Haz click en cualquiera de ellas para ingresar a su configuración, y una vez dentro al lado derecho, encontrarás la opción que te permitirá destacarla.

Nota: Considera que para que una reseña destacada sea visible en el componente, su estado debe ser Publicado.

Configuraciones del componente

Cantidad de ítems a mostrar

Permite definir la cantidad de reseñas que serán desplegadas en el componente. El orden que se mostrarán será mediante las últimas que hayan sido marcadas como Publicado y Destacado.

Tipo de visualización

Permite definir la forma en que las reseñas serán mostradas en el componente, en base a las siguientes opciones:

Carrusel: las reseñas se mostrarán dentro de un Carrusel, en el cual puedes controlar aspectos tales como la velocidad, reproducción automática o si quieres mostrar elementos de navegación en él.
Grilla: las reseñas se mostrarán en columnas, una junto a la otra de forma horizontal y vertical en base a la cantidad de ítems a mostrar que definas. En dispositivos móviles siempre se apilarán de forma vertical.

Configuraciones del carrusel

Número de columnas en escritorio

Permite definir la cantidad de reseñas que serán mostradas por fila horizontal, en dispositivos de Escritorio. La cantidad visible de reseñas en dispositivos más pequeños variará en base a lo que hayas definido en la opción Tipo de visualización, de la siguiente forma:

Carrusel

Ancho de dispositivo	Cantidad de reseñas (visibles)
Igual o mayor a 992px	Cantidad definida
Menor a 992px	3 reseñas
Menor a 768px	2 reseñas
Menor a 576px	1 reseña

Grilla

Ancho de dispositivo	Cantidad de reseñas (por fila horizontal)
Igual o mayor a 992px	Cantidad definida
Menor a 992px	2 reseñas
Menor a 576px	1 reseña

Alineación de reseñas

Permite definir la alineación del contenido de todas las reseñas en el componente.

Nota: La imagen de la reseña se moverá y posicionará de acuerdo a la opción seleccionada.

Mostrar imagen del producto

Permite mostrar o esconder la imagen del producto para todas las reseñas en el componente.

Mostrar fecha de reseña

Permite mostrar la fechas de las reseñas, bajo el nombre del cliente (de estar habilitado).

Formato de fecha de reseñas

Al habilitar la opción anterior, esta se hará disponible y permite definir el formato de la fecha de todas las reseñas del componente

Mostrar nombre del cliente

Permite desplegar el nombre del cliente que dejó la reseña.

Nombre del cliente

Permite definir cómo se mostrará el nombre del cliente, en base a las siguientes opciones:

Nombre completo: se mostrará tanto el nombre y apellido que el cliente agregó en su cuenta.
Nombre: se mostrará sólo el nombre, omitiendo el apellido.

Mostrar ícono de cita

Permite desplegar un icono de "cita" junto al contenido de la reseña. La posición de este icono cambiará dependiendo de lo que escojas en la opción Alineación de reseñas.

Al habilitar esta opción estarán disponibles para su uso las siguientes:

Tipo de ícono: Permite definir el tipo de icono a mostrar: Cierre o Apertura.
Tamaño del ícono: Permite definir el tamaño del icono (en pixeles).

Aplicar estilo de tarjeta a reseñas

Permite aplicar un estilo de "tarjeta" o "caja" a todas las reseñas. Las siguientes opciones se harán disponibles sólo si esto se habilita:

Habilitar borde en tarjeta: muestra un borde (o línea) alrededor de las reseñas.
Opacidad borde de tarjeta: permite ajustar la opacidad (transparencia) del borde.
Colores del contenido de tarjeta: permite elegir el Pack de colores para todas las reseñas.

Habilitar cabecera

Permite desplegar una Cabecera antes del contenido del componente. Puedes encontrar el listado de opciones en esta sección de la página.

Margen superior

Permite controlar el margen de la parte superior de la sección.

Margen inferior

Permite controlar el margen de la parte inferior de la sección.

Colores de contenido

Permite elegir el Pack de Colores para el componente.

Nota: Esto no afectará las reseñas si la opción Aplicar estilo de tarjeta a reseñas está habilitada.

Productos Seleccionados

Este componente te permite mostrar cualquier producto de tu tienda, independiente de atributos como su estado (p.e. Destacado) o de su relación con alguna categoría. Funciona mediante un subcomponente llamado Producto de tienda, el cual es explicado más abajo.

Configuraciones del componente

Cantidad de ítems a mostrar

Permite definir la cantidad de productos que será desplegada en el componente. The order in which products will be shown it's gonna be determined by the order in which you add them.

Nota: Si agregas más productos que la cantidad definida, no serán disponibles en el componente.

Tipo de visualización

Permite definir la forma en que los productos serán mostrados en el componente, en base a las siguientes opciones:

Carrusel: los productos se mostrarán dentro de un Carrusel, en el cual puedes controlar aspectos tales como la velocidad, reproducción automática o si quieres mostrar elementos de navegación en él.
Grilla: los productos se mostrarán en columnas, uno junto al otro de forma horizontal y vertical en base a la cantidad de ítems a mostrar que definas. En dispositivos móviles siempre se apilarán de forma vertical.

Nota: La cantidad de productos por fila horizontal para dispositivos de Escritorio y Móviles puede ser modificada en el panel de administración, yendo a Temas > Editor Visual > Configuración del tema > Bloque de Producto. Para más detalles sobre esto puedes leer este artículo en donde se explica en detalle.

Habilitar cabecera

Permite desplegar una Cabecera antes del contenido del componente. Puedes encontrar el listado de opciones en esta sección de la página.

Configuraciones del carrusel

Margen superior

Permite controlar el margen de la parte superior de la sección.

Margen inferior

Permite controlar el margen de la parte inferior de la sección.

Colores de contenido

Permite elegir el Pack de Colores para el componente.

Configuraciones del subcomponente

Tal como fue mencionado previamente, el subcomponente para Productos Seleccionados se llama Producto de tienda. Puedes agregar todos los que quieras, sin embargo, sólo los que estén dentro del límite definido en la opción Cantidad de ítems a mostrar del componente serán visibles.

Dentro del listado del componente verás el botón Agregar nuevo producto de tienda, el cual agregará un subcomponente. Al hacer click en su nombre sólo encontrarás una opción en su configuración, llamada Producto, en donde deberás elegir el producto que quieres mostrar.

Nota: Puedes leer más sobre los Subcomponentes en esta sección de la página.

Imagen

Este componente te permite mostrar una imagen, para dispositivos de escritorio y para dispositivos móviles, con algunas opciones para definir cómo se verá:

Imagen (escritorio)

Permite subir una imagen para dispositivos de Escritorio que posean un ancho igual o mayor a 576px.

Imagen (móvil)

Permite subir una imagen para dispositivos Móviles que posean un ancho igual o menor a 575px.

Nota: Si subes sólo una de las imágenes, será utilizada en todos los dispositivos.

Ancho

Permite definir el ancho al cual se restringirá la imagen del componente.

Nota: Puedes leer más sobre cómo cada opción se comporta en esta sección, en la parte de Otros tamaños de ancho.

Posición horizontal del contenido

Permite definir la posición en que la imagen se ubicará respecto del eje “x” (horizontal).

Nota: Esto no será visible si seleccionaste Ancho de grilla o Ancho completo en la opción Ancho.

Margen superior

Permite controlar el margen de la parte superior de la sección.

Margen inferior

Permite controlar el margen de la parte inferior de la sección.

Colores de contenido

Permite elegir el Pack de colores para el componente, lo cual básicamente aplicará un color al fondo.

Instagram

Este componente te permite mostrar las últimas publicaciones de la cuenta de Instagram que puede conectarse a tu tienda.

Si todavía no la has conectado, por favor sigue estos pasos para hacerlo:

Primero, asegúrate de haber ingresado a la cuenta de Instagram que deseas conectar en el mismo navegador donde tienes abierto el panel de administración de tu tienda.
En tu panel de administración ingresa a Configuración > General > Preferencias > Redes Sociales y haz click en el botón “Editar información” que se encuentra en dicha sección.
Dentro de la nueva página a la que serás llevado, haz click en el botón Instagram Login que se encuentra abajo al final.
Serás redireccionado a una nueva página donde deberás aceptar y autorizar la comnexión.
Una vez que la conexión haya sido aprobada, tus publicaciones se mostrará automáticamente en el componente.

Nota: Puede ocurrir que en ocasiones tu cuenta de Instagram se desconecte o desvincule, lo cual generalmente es por motivos de seguridad. Si llega a suceder, puedes seguir los pasos anteriores y conectarla nuevamente.

Configuraciones del componente

Número de publicaciones de Instagram

Permite definir la cantidad máxima de publicaciones a mostrar en el componente.

Tipo de visualización

Permite definir la forma en que las publicaciones serán mostrados en el componente, en base a las siguientes opciones:

Carrusel

Las publicaciones se mostrarán dentro de un Carrusel, en el cual puedes controlar aspectos tales como la velocidad, reproducción automática o si quieres mostrar elementos de navegación en él. La cantidad de publicaciones visibles para esta opción variará dependiendo del ancho del navegador, en base a las definiciones de la siguiente tabla:

Ancho de dispositivo	Cantidad visible de publicaciones
Igual o mayor a 1201px	6 publicaciones
Igual o menor a 1200px	5 publicaciones
Igual o menor a 991px	4 publicaciones
Igual o menor a 767px	3 publicaciones
Igual o menor a 414px	2 publicaciones

Grilla

Las publicaciones serán mostradas en columnas, una junto a la otra de forma horizontal y vertical. La forma en que las columnas se distribuyan variará dependiendo de lo que elijas en la opción Número de publicaciones de Instagram y el ancho del navegador, en base a las definiciones de la siguiente tabla:

Nº de publicaciones de Instagram	>= 992px (Escritorio)	>= 768px (Tabletas)	>= 576px (Tableta pequeña)	<= 575px (Móvil)	<= 414px (Móvil pequeño)
6 publicaciones	6 columnas / 1 fila	3 columnas / 2 filas	3 columnas / 2 filas	3 columnas / 2 filas	2 columnas / 3 filas
8 publicaciones	8 columnas / 1 fila	4 columnas / 2 filas	4 columnas / 2 filas	2 columnas / 4 filas	2 columnas / 4 filas
12 publicaciones	6 columnas / 2 fila	4 columnas / 3 filas	3 columnas / 4 filas	3 columnas / 4 filas	2 columnas / 6 filas

Eliminar espacio entre publicaciones

Permite definir si las publicaciones tendrán un espacio entre ellas, lo cual permite proveer una forma de presentarlas de forma distinta dependiendo del estilo que quieras darle a tu tema.

Título

Texto que se muestra antes del nombre de la cuenta de Instagram, el cual es desplegado en el componente (antes de las publicaciones) una vez que conectas la cuenta.

Configuraciones del carrusel

Margen superior

Permite controlar el margen de la parte superior de la sección.

Margen inferior

Permite controlar el margen de la parte inferior de la sección.

Colores de contenido

Permite elegir el Pack de Colores para el componente.

Últimas Publicaciones del Blog

Este componente te permite mostrar una colección o grupo de páginas de tu tienda. Incluso cuando haremos referencia en su mayoría a “Blog, en la realidad puedes ampliar y utilizar esto para mostrar básicamente lo que quieras.

Para entender como este componente está conectado a las páginas de la tienda, debes tener presente lo siguiente:

Al ir al panel de administración de la tienda en Personalización > Páginas > Todas las páginas, notarás al lado izquierdo una sección llamada Categorías.
Aquí puedes crear cuentas categorías desees, pero durante la creación, las tiendas de Jumpseller ya vienen con dos: Blog y Post.
Blog en lo que respecta al componente no es relevante.
Post es la categoría que te permite conectar varias páginas, de forma tal que se muestren todas en la misma plantilla (Página de Blog).
Al lado derecho encontrarás el listado de páginas, el cual también vendrá con dos ya creadas: Blog y Entrada del Blog.
Blog es la página que agrupará y mostrará todos los Posts.
Entrada del Blog es la que será utilizada para mostrar el contenido de un post o artículo.

A continuación, explicamos como puedes vincular una página a una categoría, en este caso, para el Blog:

Ve al listado de páginas y crea una nueva página o ingresa a una que ya exista.
Dentro de la configuración de la págima agregar su contenido respectivo, como por ejemplo título y contenido.
Posteriormente, baja en la página hasta que encuentres la sección Propiedades, en la cual deberás enfocarte en dos opciones:
1. Categorías: aquí debes elegir la que lleva por nombre Post.
2. Plantilla: aquí selecciona la plantilla que poseé el mismo nombre que la categoría, de forma tal que herede los estilos y componentes de plantilla necesarios.
Guarda tus cambios y puedes hacer click en el enlace “Ver”, en la esquina superior derecha, para que puedas revisar como se ve.
Adicionalmente, si no has cambiado el Permalink or URL de la página Blog, puedes visualizarla ya sea accediendo a su configuración y clickeando en el enlace “Ver” o, al abrir una nueva pestaña del navegador y escribir la URL de la página, como por ejemplo dominio-tienda.jumpseller.com/blog.
Una vez allí podrás ver todos los Posts que estén vinculados a tu Blog.

Nota: Puedes realizar estas acciones y seguir los mismos pasos para lograr algo similar para cualquier otra página que desees ccrear, como por ejemplo una página de “Noticias”.

Configuraciones del componente

Categoría de página

Permite definir la categoría en base a la cual se mostrarás las páginas (posts) dentro del componente. Este menú desplegable te presentará todas las categorías que tienes creadas en el panel de administración de la tienda.

Cantidad de ítems a mostrar

Allows to define the amount of posts that will be displayed within the component. The order in which posts will be shown it's gonna be determined by the order defined within the Blog page settings. To know how to control this follow these steps:

Permite definir la cantidad de posts que serán mostrados en el componente. El orden en que los posts se mostrarán estará determinado por el orden definido dentro de la configuración de la página Blog. Para saber como administrar esto sigue los siguientes pasos:

Accede a Páginas > Todas las páginas en el panel de administración de tu tienda.
En el panel izquierdo de Categorías, pasa el mouse sobre el nombre de la categoría Post.
Se harán visibles dos íconos al lado derecho del nombre de la categoría. Haz click en el primero y se abrirá una ventana emergente.
Allí encontrarás dos opciones. La que lleva por nombre Orden de la categoría te permitirá definir cómo los posts se mostrarán dentro del componente, lo cual también afectará a la página Blog.
Selecciona la opción que desees y haz click en el botón Actualizar para guardar el cambio, o en el botón Cancelar para que no sea considerado.

Tipo de visualización

Permite definir la forma en que los posts serán mostrados dentro del componente, lo cual se verá afectado por las opciones Número de columnas en escritorio y Número de columnas en móvil, en base a las siguientes opciones:

Carrusel

Los posts se mostrarán dentro de un Carrusel, en el cual puedes controlar aspectos tales como la velocidad, reproducción automática o si quieres mostrar elementos de navegación en él. La cantidad visible de posts para esta opción variará dependiendo del ancho del navegador, en base a las definiciones de la siguiente tabla:

Ancho de dispositivo	Cantidad visible de posts
Igual o mayor a 992px	`Número de columnas en escritorio`
Igual o menor a 991px	2 posts
Igual o menor a 575px	`Número de columnas en móvil`
Igual o menor a 414px	1 post

Grilla

Los posts serán mostradas en columnas, una junto a la otra de forma horizontal y vertical. La forma en que se distribuirán las columnas para esta opción será de acuerdo a las definiciones de la siguiente tabla:

Escritorio (Igual o mayor a 992px)	Tabletas (Igual o mayor a 576px)	Móvil (Igual o menor a 575px)	Móvil pequeño (Igual o menor a 414px)
`Número de columnas en escritorio`	2 columnas	`Número de columnas en móvil`	1 columna

Habilitar cabecera

Permite desplegar una Cabecera antes del contenido del componente. Puedes encontrar el listado de opciones en esta sección de la página.

Nota: para este componente la opción Enlace estará automáticamente pre-llenada con un enlace a la página Blog de tu tienda. Puedes cambiarlo para que lleve a otra que quieras.

Configuraciones del carrusel

Margen superior

Permite controlar el margen de la parte superior de la sección.

Margen inferior

Permite controlar el margen de la parte inferior de la sección.

Colores de contenido

Permite elegir el Pack de Colores para el componente.

Últimos productos

Este componente te permite mostrar los productos más recientes que hayas creado y/o agregado a tu tienda. El orden en que se mostrarán es automático, y será en base al orden en que los creaste en el panel de administración de tu tienda.

Configuraciones del componente

Cantidad de ítems a mostrar

Permite definir la cantidad de productos que será desplegada en el componente.

Tipo de visualización

Permite definir la forma en que los productos serán mostrados en el componente, en base a las siguientes opciones:

Carrusel: los productos se mostrarán dentro de un Carrusel, en el cual puedes controlar aspectos tales como la velocidad, reproducción automática o si quieres mostrar elementos de navegación en él.
Grilla: los productos se mostrarán en columnas, uno junto al otro de forma horizontal y vertical en base a la cantidad de ítems a mostrar que definas. En dispositivos móviles siempre se apilarán de forma vertical.

Nota: La cantidad de productos por fila horizontal para dispositivos de Escritorio y Móviles puede ser modificada en el panel de administración, yendo a Temas > Editor Visual > Configuración del tema > Bloque de Producto. Para más detalles sobre esto puedes leer este artículo en donde se explica en detalle.

Habilitar cabecera

Permite desplegar una Cabecera antes del contenido del componente. Puedes encontrar el listado de opciones en esta sección de la página.

Configuraciones del carrusel

Margen superior

Permite controlar el margen de la parte superior de la sección.

Margen inferior

Permite controlar el margen de la parte inferior de la sección.

Colores de contenido

Permite elegir el Pack de Colores para el componente.

Línea divisoria

Este componente te permite agregar una línea de forma tal de crear una división más notoria entre componentes y secciones dentro del tema. Las opciones para este componente son las siguientes:

Ancho

Permite definir el ancho que tendrá la línea, en base a las siguientes opciones:

Por defecto: la opción definida en Configuración del tema > Diseño > Estilos del tema > Ancho máximo del contenedor será aplicada.
Pequeño: expande la sección a un ancho máximo de 1320px.
Mediano: expande la sección a un ancho máximo de 1620px.
Grande: expande la sección a un ancho máximo de 1920px.
Extra grande: expande la sección a un ancho máximo de 2220px.
Ancho completo: expande la sección al ancho máximo del navegador en que se esté viendo la tienda.

Eliminar espacio derecho e izquierdo

Permite definir que la línea no presente espacios al lado derecho ni izquierdo de la sección. Al hacer esto, la línea llegará a ambos bordes del navegador.

Grosor de línea

Permite ajustar el grosor de la línea, de forma tal que puedas hacer que sea más notoria, de ser necesario.

Opacidad de línea

Permite controlar la opacidad (transparencia) de la línea. El color para ella considerará la opción Texto principal del Pack de Colores del componente.

Margen superior

Permite controlar el margen interior superior de la sección.

Margen inferior

Permite controlar el margen interior inferior de la sección.

Colores de contenido

Permite elegir el Pack de Colores para el componente.

Ubicaciones

Este componente te permite mostrar las Ubicaciones que has agregado en el panel de administración de tu tienda, dentro de Configuración > Checkout > Ubicaciones. Las opciones para que puedas personalizar este componente son las siguientes:

Habilitar cabecera

Permite desplegar una Cabecera antes del contenido del componente. Puedes encontrar el listado de opciones en esta sección de la página.

Ubicaciones a mostrar

Permite definir qué tipo de ubicaciones se mostrarán dentro del componente, en base a las siguientes opciones:

Todas las ubicaciones: se mostrará el listado completo de ubicaciones que hayas agregado.
Ubicaciones de retiro: sólo se mostrarán las que estén marcadas como Punto de Retiro.

Nota: La funcionalidad de Recogidas Locales sólo está disponible para ser utilizada en el Checkout versión 2, el cual puedes revisar en el panel de administración de tu tienda yendo a Configuración > Checkout > Preferencias > Versión de Checkout.

Cantidad de ubicaciones por fila

Permite definir la cantidad de columnas en que serán mostradas las ubicaciones dentro del componente. La forma en que se distribuirán en distintos dispositivos será en base a las definiciones de la siguiente tabla:

Dispositivo / Valor de opción	3 columnas	2 columnas	1 columna
Escritorio (Igual o mayor a 992px)	3 columnas por fila horizontal	2 columnas por fila horizontal	1 columna, apilada verticalmente
Tabletas (Igual o mayor a 576px)	2 columnas por fila horizontal	2 columnas por fila horizontal	1 columna, apilada verticalmente
Móviles (Igual o menor a 575px)	1 columna, apilada verticalmente	1 columna, apilada verticalmente	1 columna, apilada verticalmente

Alineación de contenido

Permite definir la alineación del contenido de todas las ubicaciones dentro del componente.

Opciones de información de ubicaciones

Las siguientes opciones permiten definir cuáles detalles de las ubicaciones serán visibles dentro del componente:

Mostrar correo de la ubicación: mostrar o no el correo en todas las ubicaciones.
Mostrar teléfono de la ubicación: mostrar o no el teléfono en todas las ubicaciones.
Mostrar dirección de la ubicación: mostrar o no la dirección en todas las ubicaciones.
Mostrar detalles de la ubicación: permite mostrar un enlace “Ver más detalles” al final del listado, el cual abrirá una ventana emergente, en la cual se mostrán todos los detalles de la ubicación.
Mostrar mapa de la ubicación: permite mostrar o no un mapa de Google dentro de la ventana emergente, en base a la dirección de cada ubicación.

Margen superior

Permite controlar el margen de la parte superior de la sección.

Margen inferior

Permite controlar el margen de la parte inferior de la sección.

Colores de contenido

Permite elegir el Pack de Colores para el componente.

Galería de logotipos

Este componente te permite desplegar una colección de imágenes, las cuales pueden ser por ejemplo logotipos de marcas que vendas en tu tienda, empresas asociadas, productos destacados o básicamente cualquier cosa que desees comunicar mediante el uso de imágenes.

Funciona mediante el uso de un subcomponente llamado Logo, para lo cual puedes agregar todos los que quieras.

Configuraciones del componente

Tipo de visualización

Permite definir la forma en que los Logos serán mostrados en el componente, en base a las siguientes opciones:

Carrusel: los logos se mostrarán dentro de un Carrusel, en el cual puedes controlar aspectos tales como la velocidad, reproducción automática o si quieres mostrar elementos de navegación en él.
Grilla: los logos se mostrarán en columnas, una junto al otro de forma horizontal y vertical en base a la cantidad de ítems a mostrar que definas. En dispositivos móviles siempre se apilarán de forma vertical.

Número de columnas en escritorio

Permite definir la forma en que los logos se mostrarán en dispositivos de escritorio, considerando los que posean un ancho igual o mayor a 768px, en base a lo que hayas definido en la opción Tipo de visualización, de la siguiente forma:

Carrusel

Esta opción considerará la cantidad de logos que sean visibles en el Carrusel:

Ancho de dispositivo	Cantidad de logos
Igual o mayor a 1201px	Cantidad definida
Igual o mayor a 992px	4 logos
Igual o mayor a 768px	3 logos

Grilla

Esta opción distribuirá los logos en columnas dentro de filas horizontales, en base a la cantidad definida:

Valor de opción	Escritorio (Igual o mayor a 992px)	Tabletas (Igual o mayor a 768px)
8	8 columnas	4 columnas
7	7 columnas	4 columnas
6	6 columnas	4 columnas
5	5 columnas	4 columnas
4	4 columnas	4 columnas
3	3 columnas	3 columnas
2	2 columnas	2 columnas

Número de columnas en móvil

Permite definir la forma en que los logos se mostrarán en dispositivos móviles, considerando los que posean un ancho igual o menor a 767px, en base a lo que hayas definido en la opción Tipo de visualización, de la siguiente forma:

Carrusel

Esta opción considerará la cantidad de logos que sean visibles en el Carrusel:

Ancho de dispositivo	Cantidad de logos
Igual o menor a 575px	Cantidad definida
Igual o mayor a 414px	Siempre 2 logos

Grilla

Esta opción distribuirá los logos en columnas dentro de filas horizontales, en base a la cantidad definida:

Valor de opción	Móvil (Igual o menor a 767px)
3	3 columnas
2	2 columnas
1	1 columna

Habilitar cabecera

Permite desplegar una Cabecera antes del contenido del componente. Puedes encontrar el listado de opciones en esta sección de la página.

Configuraciones del carrusel

Margen superior

Permite controlar el margen de la parte superior de la sección.

Margen inferior

Permite controlar el margen de la parte inferior de la sección.

Colores de contenido

Permite elegir el Pack de Colores para el componente.

Configuraciones del subcomponente

Tal como fue mencionado anteriormente, el subcomponente de Galería de logotipos se llama Logo y puedes agregar todos los que quieras. Las opciones para este subcomponente son las siguientes:

Imagen

Permite subir una imagen o logo.

Enlace

Permite agregar un enlace a cualquier contenido de la tienda, como por ejemplo categorías, productos, páginas, enlaces externos, etc., en cuyo caso el Logo será clickable.

Texto del enlace

Texto que será visible cuando un usuario haga "hover" sobre la imagen.

Habilitar como enlace externo

Al habilitar, el enlace se abrirá en una nueva pestaña del navegador.

Este componente le permite a los usuarios suscribirse a tu tienda, lo cual los creará (registrará) como Clientes dentro de la base de datos de tu panel de administración. Puedes revisar el listado completo yendo a Clientes > Todos los clientes.

Una vez que un cliente se suscriba, se gatillarán o efectuarán ciertas acciones:

El cliente será creado en la base de datos sólo con su correo.
Si tienes activa la opción Cuenta habilitada, dentro de Configuración > General > Emails > Correos Transaccionales, el cliente recibirá un correo para confirmar la suscripción.
Los usuarios podrán crear una cuenta de cliente al hacer click en el enlace Reestablecer contraseña disponible en la Página de Ingreso de tu tienda (ej: tu-dominio.jumpseller.com/customer/login). También se les enviará el enlace cuando confirmen la suscripción.
Si tienes activa la opción Nuevo cliente, dentro de Configuración > General > Emails > Correos electrónicos del administrador, recibirás una notificación cuando el usuario confirme de forma exitosa la suscripción.
Si tienes activa la opción CAPTCHA en el registro de clientes, dentro de Configuración > General > Protección contra el spam, los usuarios tendrán que completar de forma obligatoria una tarea que se hará visible, mediante la herramienta de Google reCAPTCHA, para poder suscribirse.

Nota: Incluso cuando suene un poco obvio, un usuario no podrá suscribirse más de una vez con el mismo correo, puesto que las cuentas de cliente son administradas mediante ese atributo.

Si deseas realizar más cosas y aprovechar lo que este componente permite, puedes por ejemplo instalar la Aplicación de Mailchimp para sincronizar tu listado de clientes y enviar correos de marketing. Puedes leer más sobre esto en los siguientes enlaces:

Las opciones disponibles para que puedas personalizar este componente son las siguientes:

Alineación de contenido

Permite definir la alineación del contenido del componente (Título, Descripción) y del formulario del newsletter.

Nota: Esto afectará la ubicación en que sea posicionado el formulario.

Título

Permite agregar un título para el componente, el cual se mostrará al principio de la sección.

Descripción

Permite agregar un texto o descripción bajo el título. Puede ser útil para dar contexto y/o incentivar a los usuarios a suscribirse mediante, por ejemplo, la entrega de algunos beneficios que sean claves para hacerlo.

Texto de muestra del campo correo

Permite definir el texto que será visible dentro del campo de correo.

Texto del Botón

Permite definir el texto del botón del formulario.

Texto de descargo de responsabilidad

Permite mostrar un texto debajo del formulario, el cual puede ser útil por ejemplo para proveer información a los usuarios respecto de que aceptan los términos de tu tienda al suscribirse, o para lo que consideres necesario.

Habilitar Imagen de fondo

Permite mostrar una imagen de fondo detrás de todo el contenido del componente. Al habilitarla, las siguientes opciones estarán disponibles:

Imagen de fondo (escritorio)

Permite subir una imagen para dispositivos de escritorio que posean un ancho igual o mayor a 576px.

Imagen de fondo (mobile)

Permite subir una imagen para dispositivos móviles que posean un ancho igual o menor a 575px.

Overlay de imagen

Permite modificar la opacidad (transparencia) del elemento Overlay que se posiciona entre la imagen de fondo y el contenido del componente.

Nota: Si no quieres desplegar o mostrar el Overlay, sólo debes definir la opacidad a cero (0).

Posición horizontal de la imagen

Permite definir la posición de la imagen en el eje "x" (horizontal).

Posición vertical de la imagen

Permite definir la posición de la imagen en el eje "y" (vertical).

Margen superior

Permite controlar el margen de la parte superior de la sección.

Margen inferior

Permite controlar el margen de la parte inferior de la sección.

Colores de contenido

Permite elegir el Pack de Colores para el componente.

Plantilla de producto

Este componente es el que permite mostrar y personalizar la sección principal de la página de tus productos en el tema. Funciona mediante la utilización de varios subcomponentes que despliegan distinta información y detalles de cada producto, en los cuales puedes reordenarlos, esconderlos (1) o eliminarlos (2).

Nota (1): Todos los subcomponentes dentro de este componente poseen la opción para ser escondidos.

Nota (2): Algunos subcomponentes poseen la opción para ser eliminados, mientras otros no, puesto que son obligatorios para una correcta funcionalidad de la página de producto.

En lo que respecta a este componente, nos referiremos por Contenido a la columna que contiene todos los detalles del producto, como es el caso del Nombre, Precio, Formulario, etc.; Por el contrario, nos refererimos como Galería a la columna que muestra la(s) imagen(es) del producto.

Configuraciones del componente

Alineación de contenido

Permite definir la alineación del Contenido del componente.

Opciones de galería

El siguiente grupo de opciones te permitirá personalizar ciertos aspectos de la Galería del componente.

Dimensión de imagen

Permite definir la forma en que las imágenes serán presentadas en el component, en base a las siguientes opciones:

Apaisado: Una forma bien ancha y no tan alta, muy útil para proveer un estilo panorámico. Utiliza una proporción de 16:9.
Retrato: una forma alta y estrecha, ideal para exhibir en formato vertical, como los carteles. Utiliza una proporción de 3:4.
Rectangular: una forma equilibrada, ligeramente más larga, adecuada para la mayoría de las imágenes. Utiliza una proporción de 4:3.
Cuadrada: una forma con la misma altura y ancho, perfecta para imágenes en las que ambas dimensiones son iguales. Utiliza una proporción de 1:1.

Visualización de imágenes

Permite definir la forma en que la(s) imagen(es) del producto se adaptarán al espacio disponible relacionado con la dimensión escogida anteriormente, en base a las siguientes opciones:

Redimensionar: las imágenes se adaptarán lo más posible a la dimensión del espacio disponible.
Recortar: se llenará todo el espacio disponible con la mayor parte de las imágenes del producto

Ancho de la imagen en escritorio

Esta opción permite definir el ancho en base al cual las imágenes de la galería serán Redimensionadas o Recortadas.

La dimensión seleccionada aquí posee una relación directa al Ancho máximo del contenedor que definas en Configuración del tema > Diseño, puesto que tendrás que aumentar el tamaño en esta opción si escoges un ancho de contenedor mayor a Ancho de grilla.

Mostrar miniaturas en galería

Permite mostrar una Galería secundario con miniaturas de las imágenes del producto en conjunto con la principal, con las cuales los usuarios podrán hacer click para verlas. Presentará flechas izquierda y derecha para controlarla.

Nota: Si deshabilitas esta opción, la Galería principal mostrará flechas dentro de ella, para que los usuarios puedan controlarla y ver más imágenes.

Posición de miniaturas en escritorio

Permite definir la posición de las Miniaturas de la Galería en dispositivos de escrittorio que posean un ancho igual o mayor a 992px. Para dispositivos con un ancho menor a ese, se posicionarán automáticamente bajo la principal.

Habilitar Zoom en las imágenes

Permite a los usuarios hacer zoom en las imágenes del producto al pasar el mouse sobre ellas. Para esto es importante que consideres subir imágenes en una dimensión mayor a la que se muestra en tu tienda.

Cantidad de zoom

Permite definir la cantidad de zoom que será aplicada a las imágenes del producto, si la opción anterior se encuentra habilitada.

Fijar imagen de producto

Permite fijar la imagen del producto a la parte superior de la Cabecera del tema (de estar fijo también) y/o al Navegador, para que acompañe a los usuarios mientras bajan en la página.

Puedes leer más sobre el tamaño y dimensión ideal para imágenes en esta sección de la página.

Margen superior

Permite controlar el margen de la parte superior de la sección.

Margen inferior

Permite controlar el margen de la parte inferior de la sección.

Colores de contenido

Permite elegir el Pack de Colores para el componente.

Habilitar Animación

Al habilitar esta opción podrás personalizar las transiciones que serán aplicadas al componente.

Nota: Puedes leer más sobre estas opciones en la sección Conceptos básicos dentro de esta misma página.

Componentes de Plantilla de producto

El componente Plantilla de producto funciona permitiéndote elegir qué contenido quieres mostrar en él, mediante varios subcomponentes que son los detalles del producto. Para cada uno de ellos tendrás la posibilidad de editar, mover, esconder y eliminar. Los que están disponibles para ser utilizados son los siguientes:

Nota: Algunos de estos subcomponentes no poseerán opciones dentro de su configuración, ya que son principalmente utilizados para mostrar la información. Por ende, la forma en que se vean y/o comporten puede ser administrado en la sección Configuración del tema del Editor Visual, debido a que son opciones generales que afectan otras páginas, componentes o plantillas dentro del tema.

Atributos

Permite mostrar el SKU y la Marca del producto, en conjunto con otras opciones para personalizar cómo se ven y comportan:

Nota: Si un producto no posee estos atributos, nada se mostrará. Por el contrario, si un producto posee ambos atributos y has optado por mostrarlos, serán separados por una línea vertical. El orden siempre será primero SKU y después Marca.

Mostrar antes de imagen de producto en Móviles

Por defecto los Atributos se mostrarán debajo o después de la Galería del producto en dispositivos móviles. Esta opción permite modificar el comportamiento y ubicarlos antes o arriba.

Mostrar SKU del producto

Permite definir si el SKU del producto será desplegado o no.

Mostrar texto antes del SKU

Permite desplegar un texto antes del SKU del producto, como por ejemplo "SKU: 1234".

Mostrar marca del producto

Permite definir si la Marca del producto será desplegada o no.

Título

Este subcomponente permite desplegar el nombre del producto, el cual posee las siguientes opciones para personalizarlo:

Mostrar antes de imagen de producto en Móviles

Por defecto el Nombre/Título se mostrará debajo o después de la Galería del producto en dispositivos móviles. Esta opción permite modificar el comportamiento y ubicarlo antes o arriba.

Mostrar título en mayúsculas

Permite forzar que el título se muestre en mayúsculas, incluso cuando no haya sido escrito de esa forma, por ejemplo NOMBRE DE PRODUCTO.

Precio

Este subcomponente permite mostrar el precio del producto, el cual posee las siguientes opciones para personalizarlo:

Mostrar antes de imagen de producto en Móviles

Por defecto el Precio se mostrará debajo o después de la Galería del producto en dispositivos móviles. Esta opción permite modificar el comportamiento y ubicarlo antes o arriba.

Visualización de precios

Permite definir la forma en que el precio se mostrará cuando el producto posea un descuento visible (promoción), en base a las siguientes dos opciones:

Horizontal: Los precios se alinearán uno junto al otro, horizontalmente.
Apilados: Los precios se alinearán uno bajo el otro, verticalmente.

Mostrar etiqueta de descuentos

Permite mostrar una "etiqueta" de descuento al lado derecho del precio. Los colores de esta serán los que definas en Temas > Editor Visual > Configuración del tema > Colores.

Nota: la etiqueta de descuento también se verá afectada por la opción Visualización de precios.

Mostrar mensaje de fecha límite de promociones

Permite desplegar un mensaje bajo el o los precios mencionando que existe una fecha en la cual el descuento (promoción) expira o termina. Sólo funcionará si la promoción posee una Fecha Límite definida en su configuración.

Estrellas de reseñas de producto

Este subcomponente permite mostrar la calificación o puntuación junto a las estrellas de un producto que posea reseñas.

Nota: la funcionalidad de Reseñas de Productos sólo está disponible desde el plan PRO en adelante. Por ende, incluse cuando tengas este subcomponente agregado pero no poseas el plan necesario, nada se mostrará. Lo mismo sucederá para un producto que no posea reseñas.

Stock

Este subcomponente permite mostrar el Stock del producto. Cómo esto se verá y comportará se explica en este artículo.

Wishlist

Este subcomponente permite mostrar el botón con el cual los usuarios pueden agregar un producto al Wishlist en su cuenta de cliente.

Nota: Los usuarios sólo podrán agregar un producto una vez que hayan ingresado a su cuenta.

Formulario de producto

Este subcomponente permite mostrar el Formulario con el cual los clientes pueden agregar el producto al carro.

Cómo esto se verá y comportará se explica en este artículo.

Ubicaciones con Stock de producto

Este subcomponente permite mostrar un botón, el cual al hacer click abrirá un panel lateral desde el lado derecho del navegador. Este panel mostrará el listado de ubicaciones y el estado respectivo del stock.

Las opciones para personalizarlo son las siguientes:

Título: permite definir el título que será visible en el panel lateral que se abre al hacer click en el botón.
Icono del botón: permite definir el ícono que se mostrará a la izquierda del texto del botón.
Texto del botón: texto que se muestra dentro del botón que abre el panel.

Otras opciones para este subcomponente se encuentran en Temas > Editor Visual > Configuración del tema > Formulario de producto, las cuales se explican en el siguiente artículo.

Descripción

Este subcomponente permite mostrar la Descripción del producto, la cual puede ser agregada para todos los productos de tu tienda.

Las opciones para personalizarlo son las siguientes:

Título

Permite mostrar un título antes de la descripción.

Colapsar descripción

Permite reestringir la altura de la descripción del producto, en base al umbral de la opción siguiente. Esto es útil si tus productos poseen descripciones largas, las cuales por ejemplo, puedan generar un espacio blanco muy notorio entre las columnas de Galería y Contenido.

Al habilitar, se desplegará un enlace con el texto "Leer más" en la parte inferior de la descripción. Al hacer click, la descripción se expandirá a su alto máximo posible, en cuyo caso el texto del enlace cambiar a "Leer menor". En un segundo click, la descripción se colapsará nuevamente.

Umbral para colapsar la altura

Permite definir la altura a la cual se colapsará la descripción, siempre y cuando la opción anterior se encuentre habilitada.

Acordeón de producto

Este subcomponente es similar al componente Acordeón mencionado previamente en esta página. Permite agregar diferentes ítems con informacción, pero en este caso, específicamente para la página de producto. Posee menos opciones que el otro, puesto que sus atributos como colores y espacios se obtienen en base al componente padre Plantilla de producto.

Las opciones para personalizarlo son las siguientes:

Habilitar ítems colapsables

Primer ítem abierto

Permite definir que el primer ítem del acordeón esté abierto por defecto al cargar la página. Cómo o cuándo este ítem se cierre dependerá en el comportamiento de la opción anterior.

Para cada subcomponente llamado Ítem de acordeón de producto encontrarás las siguientes opciones para personalizarlos:

Icono

Permite agregar un ícono el cual se mostrará al lado izquierdo del título del ítem.

Título

Obligatorio. Permite definir un título para el ítem.

Contenido

Permite agregar un text o descripción para el ítem, el cual será visible cuando se abra.

Enlace

Permite desplegar un enlace a cualquier página de la tienda.

Texto del enlace

Texto que se mostrará dentro del enlace.

Mostrar flecha en enlace

Permite desplegar una flecha a la derecha del texto del enlace.

Habilitar como enlace externo

Al habilitar, el enlace se abrirá en una nueva pestaña del navegador.

Imagen

Permite agregar una imagen junto al contenido del ítem.

Tamaño de la imagen

Permite definir el tamaño de la imagen en base a su ancho, en rangos de porcentajes desde 10% hasta 100%.

Posición de la imagen

Permite definir la posición en que se mostrará la imagen dentro del ítem.

Campos personalizados de producto

Este subcomponente permite desplegar todos los campos personalizados habilitados que hayas agregado a los productos de tu tienda. Las opciones para personalizarlo son las siguientes:

Título

Permite definir el título que se mostrará antes de todos los campos y su contenido.

Tipo de visualización

Permite definir cómo los campos y su contenido se verán, en base a las siguientes opciones:

Lista: Los campos se mostrarán uno bajo el otro en un listado.
Table: Los campos se mostrarán dentro de una sección con estilo de tabla, con bordes alrededor.

Archivos

Este subcomponente permite desplegar todos los archivos que se hayan subido a un producto, dentro de una sección con estilo de tabla. Las opciones para personalizarlo son las siguientes:

Título

Permite definir el título que se mostrará antes de todos los enlaces de archivos.

Compartir producto

Este subcomponente te permite desplegar un listado de enlaces que le permitirán a los usuarios compartir el producto.

Las opciones para personalizarlo son las siguientes:

Título: permite definir el título que se muestra junto a los enlaces, y para el botón que se muestra en dispositivos móviles.
Mostrar Facebook: permite que el producto sea compartido en Facebook.
Mostrar 𝕏: permite que el producto sea compartido en 𝕏 (antes Twitter).
Mostrar WhatsApp: permite que el producto sea compartido mediante WhatsApp.
Mostrar correo: permite que el producto sea compartido mediante correo, lo cual abrirá la aplicación o software del dispositivo en el cual el usuario esté visitando la tienda.
Mostrar copiar al portapeles: permite que los usuarios copien la URL del producto en el portapeles de su dispositivo, para que puedan compartir como prefieran.

Importante: En dispositivos móviles esto cambiará a un único botón, el cual al hacer click abrirá las opciones nativas para compartir del dispositivo del usuario.

Línea divisoria

Este subcomponente permite agregar una línea divisoria, la cual puede ser útil para generar una separación más notoria entre el contenido del componente principal.

Las opciones para personalizarlo son las siguientes:

Grosor de línea: Permite ajustar el grosor de la línea, de forma tal que puedas hacer que sea más notoria, de ser necesario.
Opacidad de línea: Permite controlar la opacidad (transparencia) de la línea. El color para ella considerará la opción Texto principal del Pack de Colores del componente.
Margen superior: Permite controlar el margen interior superior de la sección.
Margen inferior: Permite controlar el margen interior inferior de la sección.

Código personalizado

Este subcomponente permite agregar código personalizado en la página del producto, lo cual puede ser útil para aplicaciones externas o tu propio diseño, herramientas, plugins, etc.

Producto seleccionado

Este componente es prácticamente igual al componente Plantilla de producto, con la gran diferencia de que permite destacar un producto individual o específico de tu tienda. Algunas consideraciones que debes tener al utilizarlo son:

Puede ser agregado en cualquier plantilla del tema, con la excepción de la de Producto.
Sólo puedes agregar este componente una vez en una plantilla del tema.

Configuraciones del componente

The settings for this component are almost the same as the Product template, with a few additional ones that offer more customization, which are the following:

Las opciones para este componente son casi las mismas que en Plantilla de producto, con algunas más que permiten personalizarlo, y son las siguientes:

Note: next, we are just listing the options that are specific for this component.

Nota: a continuación, sólo mencionamos las opciones que son especificas para este componente. Para el resto, puedes leer los detalles en el componente Plantilla de producto.

Producto

En este campo debes elegir el producto que deseas destacar.

Invertir orden de columnas en escritorio

Permite invertir el orden de las columnas del componente, en cuyo caso el Contenido se moverá al lado izquierdo de la sección, mientras que la Galería se moverá a la derecha.

Nota: Este cambio sólo se verá aplicado en dispositivos que posean un ancho igual o mayor a 768px. Para dispositivos menores a dicho valor, el Contenido se posicionará automáticamente bajo la Galería.

Opciones de diseño

El siguiente grupo de opciones te permitirá personalizar ciertos aspectos de diseño del componente:

Margen superior

Permite controlar el margen de la parte superior de la sección.

Margen inferior

Permite controlar el margen de la parte inferior de la sección.

Colores de contenido

Permite elegir el Pack de Colores para el componente.

Nota: Esto será aplicado a toda la sección, pero no afectará al producto y sus detalles si habilitaste la opción Aplicar estilo de tarjeta.

Aplicar estilo de tarjeta

Permite aplicar un estilo de "tarjeta" o "caja" al contenedor que envuelve toda la información del producto. Las siguientes opciones se harán disponibles sólo si esto se habilita:

Habilitar borde en tarjeta: mostrará un borde (o línea) en todo el contorno del contenedor principal de la sección.
Opacidad borde de tarjeta: permite ajustar la opacidad (transparencia) del borde.
Colores del contenido de tarjeta: permite elegir el Pack de colores para el producto, el cual será aplicado dentro del contenedor principal.

Subcomponentes de Producto seleccionado

El listado de subcomponentes disponibles para el Producto seleccionado es casi el mismo que en el componente Plantilla de producto, con la excepción de los siguientes:

Descripción
Acordeón de producto
Campos personalizados de producto
Archivos
Código personalizado de producto

Slider

Este componente es una de las secciones más utilizadas e implementadas en los sitios web. Te permite agregar y mostrar varios subcomponentes dentro de él, los cuales se llaman Slide, con múltiple contenido dentro de ellos y varias opciones para personalizarlo.

Configuraciones del componente

Ancho

Permite definir el ancho máximo que tendrá la sección, en base a las siguientes opciones:

Por defecto: la opción definida en Configuración del tema > Diseño > Estilos del tema > Ancho máximo del contenedor será aplicada.
Pequeño: expande la sección a un ancho máximo de 1320px.
Mediano: expande la sección a un ancho máximo de 1620px.
Grande: expande la sección a un ancho máximo de 1920px.
Extra grande: expande la sección a un ancho máximo de 2220px.
Ancho completo: expande la sección al ancho máximo del navegador en que se esté viendo la tienda.

Nota: El tamaño de las imágenes que puedes subir en cada Slide variarán dependiendo de la opción que selecciones aquí. Estas se explican en detalle en esta sección de la página.

Tipo de contenido

Permite definir la forma en que se verá cada Slide y las opciones que serán consideradas dentro de su configuración respectiva. Las opciones disponibles son las siguientes:

Imagen + Contenido: La imagen o imágenes para cada Slide funcionarán como fondo y el contenido (ej: Título) será posicionado sobre ellas.
Sólo imagen: No será necesario que agregues ningún contenido, por ende, elementos tales como el Título no serán desplegados. En base a esto, cualquier tipo de elemento gráfico que quieras agregar, como por ejemplo textos, formas, etc., deberán ser incluidas dentro de la imagen mediante softwares como Photoshop, Illlustrator, Canva, etc.

Nota: Al elegir Sólo imagen sólo deberás considerar las siguientes opciones dentro de la configuración de un Slide: Imagen (escritorio y móvil), Enlace y Texto del enlace.

Altura

Permite definir la altura de todo el componente, en base a las siguientes opciones:

Ajustar al contenido: la altura de la sección será determinada en base al contenido que agregues al componente, como por ejemplo Título, Descripción, etc.
Pequeño: La altura de la sección será como mínimo de 420px.
Mediano: La altura de la sección será como mínimo de 560px.
Grande: La altura de la sección será como mínimo de 720px.
Navegador: La altura de la sección tomará, cómo mínimo, la altura de la ventana del navegador en donde se esté visitando tu tienda, por lo cual podrá variar de dispositivo en dispositivo.

Nota 1: Hacemos referencia a un mínimo, ya que la altura de la sección variará dependiendo de la cantidad y/o que tan extenso sea el contenido que agregues en el componente.

Nota 2: El tamaño de las imágenes que puedes subir en cada Slide variarán dependiendo de la opción que selecciones aquí. Estas se explican en detalle en esta sección de la página.

Configuraciones del Slider

Las siguientes opciones te permite personalizar ciertos atributos del componente:

Habilitar reproducción automática: Permite que el Slider se mueva automáticamente de un ítem al siguiente.
Velocidad de reproducción automática: Permite definir el tiempo que tomará para que la opción anterior funcione.
Mostrar flechas: Permite mostrar flechas bajo el Slider para que los usuarios lo controlen.
Mostrar puntos: Permite mostrar puntos bajo el Slider para que los usuarios lo controlen.
Tamaño de flechas y puntos: Permite ajustar el tamaño de las flechas y los puntos.

Margen superior

Permite controlar el margen de la parte superior de la sección.

Margen inferior

Permite controlar el margen de la parte inferior de la sección.

Configuraciones del subcomponente

Tal como ya mencionamos, el subcomponente de un Slider se llama Slide, y puedes agregar todos los que quieras. Las opciones para este subcomponente son las siguientes:

Imagen (escritorio)

Permite subir una imagen para dispositivos de Escritorio que posean un ancho igual o mayor a 576px.

Imagen (móvil)

Permite subir una imagen para dispositivos Móviles que posean un ancho igual o menor a 575px.

Nota: Si subes sólo una de las imágenes, será utilizada en todos los dispositivos.

Overlay de la imagen

Permite definir la opacidad (transparencia) para el elemento Overlay.

Posición horizontal de la imagen

Permite definir la posición horizontal para cualquiera de las imágenes anteriores, sólo cuando Tipo de contenido sea igual a Imagen + Contenido en la configuración del componente principal.

Posición vertical de la imagen

Permite definir la posición vertical para cualquiera de las imágenes anteriores, sólo cuando Tipo de contenido sea igual a Imagen + Contenido en la configuración del componente principal.

Nota: Vertical and horizontal positioning is most noticeably visible when images are wider or large than the defined Width and/or Height.

Alineación de contenido

Allows to define the aligment for the content of the slides.

Posición horizontal del contenido

Permite definir la forma en que the content of the slides will position withihn the x axis (horizontal).

Opciones de contenido

A continuación, encontrarás varias opciones para agregar contenido a un Slide:

Subtítulo: Opcional. Permite mostrar un pequeño texto sobre el Título.
Título: Allows to display a title. Intenta que sea breve para que no colapse el espacio disponible.
Descripción: Allows to display a text after the title and before the link button (if visible), in order to provide more context on what the Slide is about. Intenta que sea breve para que no colapse el espacio disponible.

Opciones de enlace

A continuación, encontrarás varias opciones para personalizar el Enlace de un Slide:

Enlace: Permite agregar un enlace a cualquier contenido de la tienda, como por ejemplo categorías, productos, páginas, etc.
Texto del enlace: Texto que se mostrará en el botón.
Mostrar enlace como botón: De ser habilitado, el botón se hará visible. If disabled, it will hide but the Slide will still be clickable as a whole.
Usar estilo de contorno del botón: Permite mostrar el enlace/botón con un borde alrededor.
Mostrar flecha en botón: Permite mostrar una flecha al lado derecho del texto del botón.
Habilitar como enlace externo: Al habilitar, el enlace se abrirá en una nueva pestaña del navegador.

Nota: Subtítulo, Título, Descripción, Overlay y Mostrar enlace como botón sólo se desplegarán y serán visibles si la opción Tipo de contenido es igual a Imagen + Contenido. Para el caso de la opción Sólo imagen, sólo deberás considerar las opciones Imagen (escritorio y móvil), Enlace y Texto del enlace.

Colores de contenido

Permite elegir el Pack de Colores para cada Slide.

Características de la tienda

Este componente te permite desplegar contenido bien variable, similar a lo que se puede lograr con el componente Medios con texto, pero con la diferencia clave que las Imágenes y Contenido siempre serán apiladas verticalmente, una bajo la otra, al elegir Grilla en la opción Tipo de sección de la configuración del componente.

Funciona al agregar varios subcomponentes, llamados Característica, en los cuales puedes agregar imágenes y contenido (ej: Título, descripción).

Configuraciones del componente

Opciones de cabecera

Las siguientes opciones y elementos pueden ser desplegadas en la sección Cabecera que se posiciona antes del contenido del componente. Si todas estas se encuentran vacías, la sección (cabecera) no será visible.

Subtítulo: Se muestra al inicio de la Cabecera y antes del Título.
Título
Descripción: Texto que se muestra bajo el Título.
Enlace: permite agregar un enlace a cualquier contenido de la tienda, como por ejemplo categorías, productos, páginas, enlaces externos, etc.
Texto del enlace: Texto que se mostrará en el enlace.

Tamaño de imágenes

Permite definir la forma en que las imágenes de cada Característica serán mostradas, en base a las siguientes opciones:

Original: las imágenes se mostrarán con la dimensión original en que fueron subidas.
Redimensionar: las imágenes serán adaptadas a un formato de 520x300 px.

Tipo de sección

Permite definir la forma en las Características serán mostrados en el componente, en base a las siguientes opciones:

Carrusel: las características se mostrarán dentro de un Carrusel, en el cual puedes controlar aspectos tales como la velocidad, reproducción automática o si quieres mostrar elementos de navegación en él.
Grilla: las características se mostrarán en columnas, una junta a la otra de forma vertical y horizontal en base a la cantidad de ítems por fila que definas. En dispositivos móviles siempre se apilarán de forma vertical.

Para la opción Grilla, la(s) Imagen(es) se posicionará al lado izquierdo, mientras que el Contenido a la derecha. Este comportamiento cambiará de forma opuesta en los bloques pares (ej: 2, 4, 6, etc.) y sólo para dispositivos de escritorio. En dispositivos móviles la(s) imagen(es) siempre se posicionará primero.

Número de columnas en escritorio

Permite definir la forma en que las Características se desplegarán en dispositivos de escritorio, en base a las definiciones de la siguiente tabla:

Ancho de dispositivo	Cantidad de columnas
Igual o mayor a 992px	Cantidad definida
Igual o mayor a 768px	2 columnas
Menor a 767px	1 columna

Nota: Esta opción sólo aplicará si Tipo de sección es igual a Carrusel.

Opciones de color

Las siguientes opciones te permitirán personalizar ciertos colores dentro del componente:

Color de fondo: permite definir el color de fondo del componente.
Botón del bloque - Color de fondo: permite definir el color de fondo del botón para todos los bloques.
Botón del bloque - Color de fondo (hover): permite definir el color de fondo del botón para todos los bloques en estado hover.

Nota: El color del texto de los botones será ajustado de forma automática en base al contraste necesario que requieran.

Configuraciones del carrusel

Configuraciones del subcomponente

Tal como ya fue mencionado, el subcomponente del componente Características de la tienda se llama Característica, al cual nos referiremos como Bloque, y puedes todos los que requieras para proveer la información necesaria a tus clientes. Las opciones para este subcomponente son las siguientes:

Imagen (escritorio)

Permite subir una imagen para dispositivos de Escritorio que posean un ancho igual o mayor a 576px.

Imagen (móvil)

Permite subir una imagen para dispositivos Móviles que posean un ancho igual o menor a 575px.

Nota: Si subes sólo una de las imágenes, será utilizada en todos los dispositivos.

Título

Permite definir un título para el bloque, el cual se mostrará posterior a la(s) imagen(es).

Descripción

Permite agregar un text para dar más contexto sobre lo que trata el bloque. Se muestra bajo el Título.

Enlace a página

Permite agregar un enlace a cualquier contenido de la tienda, como por ejemplo categorías, productos, páginas, enlaces externos, etc.

Texto del enlace

Texto que se mostrará en el enlace.

Testimonios

Este componente te permite agregar Testimonios de tus clientes de forma manual y personalizada, los cuales pueden ser utilizados para aumentar la confianza entre tus clientes al proveed feedback y/o comentarios que hayas recibido sobre variados temas.

Funciona agregando múltiples subcomponentes, llamados Testimonio, a los cuales nos referiremos como Bloque(s), para efectos prácticos.

Configuraciones del componente

Tipo de visualización

Permite definir la forma en que los bloques serán mostrados en el componente, en base a las siguientes opciones:

Carrusel: los bloques se mostrarán dentro de un Carrusel, en el cual puedes controlar aspectos tales como la velocidad, reproducción automática o si quieres mostrar elementos de navegación en él.
Grilla: los bloques se mostrarán en columnas, una junta a la otra de forma vertical y horizontal en base a la cantidad de ítems por fila que definas. En dispositivos móviles siempre se apilarán de forma vertical.

Alineación de contenido

Permite definir la alineación de todos los bloques del componente.

Número de columnas en escritorio y móvil

Permite definir la cantidad de columnas en que los bloques se mostrarán para dispositivos de escritorio y móviles, lo cual variará dependiendo de la opción que elijas en Tipo de visualización, en base a las definiciones de la siguiente tabla:

Carrusel (todos los dispositivos)

Ancho de dispositivo	Cantidad de columnas
Igual o mayor a 992px	Cantidad definida para Escritorio
Igual o mayor a 768px	3 columnas
Igual o mayor a 415px	Cantidad definida para Móviles
Igual o menor a 414px	1 columna

Grilla

Número de columnas en escritorio aplicará para dispositivos con un ancho igual o mayor a 576px, mientras que Número de columnas en móvil aplicará para dispositivos con un ancho igual o menor a 575px.

Dispositivo de escritorio / Valor de opción	4 columnas	3 columnas	2 columnas	1 columna
Escritorio (Igual o mayor a 992px)	4 columnas por fila horizontal	3 columnas por fila horizontal	2 columnas por fila horizontal	1 columna, apiladas verticalmente
Tabletas (Igual o mayor a 576px)	3 columnas por fila horizontal	3 columnas por fila horizontal	2 columnas por fila horizontal	1 columna, apiladas verticalmente

Dispositivo móvil / Valor de opción	2 columnas	1 columna
Móvil (Igual o menor a 575px)	2 columnas, apiladas verticalmente	2 columnas, apiladas verticalmente	2 columnas, apiladas verticalmente
Móvil pequeño (Igual o menor a 414px)	1 columna, apiladas verticalmente	1 columna, apiladas verticalmente	1 columna, apiladas verticalmente

Tamaño de avatar

Permite definir el tamaño de la imagen o avatar que puedes subir en cada subcomponente, en base a las siguientes opciones:

Pequeño: la imagen se mostrará en una dimensión de 50x50 px.
Mediano: la imagen se mostrará en una dimensión de 75x75 px.
Grande: la imagen se mostrará en una dimensión de 100x100 px.

Mostrar ícono de cita

Permite desplegar un icono de cita (o comillas) antes del texto del bloque.

Aplicar estilo de tarjeta a testimonios

Permite aplicar un estilo de "tarjeta" o "caja" a todos los bloques. Las siguientes opciones se harán disponibles sólo si esto se habilita:

Habilitar borde en tarjeta: muestra un borde (o línea) alrededor de los bloques.
Opacidad borde de tarjeta: permite ajustar la opacidad (transparencia) del borde.
Colores del contenido de tarjeta: permite elegir el Pack de colores para todos los bloques.

Habilitar cabecera

Permite desplegar una Cabecera antes del contenido del componente. Puedes encontrar el listado de opciones en esta sección de la página.

Configuraciones del carrusel

Margen superior

Permite controlar el margen de la parte superior de la sección.

Margen inferior

Permite controlar el margen de la parte inferior de la sección.

Colores de contenido

Permite elegir el Pack de Colores para el componente.

Configuraciones del subcomponente

Tal como ya fue mencionado, el subcomponente del componente Testimonios se llama Testimonio y puedes agregar todos los que quieras para proveer la información necesaria a tus clientes. Las opciones para este subcomponente son las siguientes:

Cita

En este campo puedes agregar el comentario del cliente.

Autor

Opcional. Permite agregar el nombre del cliente, o básicamente cualquier cosa que desees.

Imagen

Opcional. Permite subir una imagen (avatar) en cada bloque.

Nota: la dimensión de la imaegn a subir será en base a lo que hayas seleccionado en la opción Tamaño de avatar en la configuración del componente principal. Te sugerimos que no subas una imagen mayor que dichas dimensiones, para evitar posibles problemas con la velocidad de carga de la tienda.

Bloque de Texto

Este componente te permite desplegar una sección básicamente con tan sólo texto y un enlace. Puede ser muy útil como una sección complementaria en conjunto con otros componentes del tema o por ejemplo como una sección Cabecera. Las opciones para que puedas personalizar este componente son las siguientes:

Ancho

Permite definir el ancho al cual se reestringirá el contenido del componente.

Nota: Puedes leer más sobre como cada opción aquí se comporta en esta sección, en la parte Otros tamaños de ancho.

Alineación de contenido

Permite definir la alineación de todo el contenido dentro del componente.

Nota: This will be applied for todos los dispositivos.

Posición horizontal del contenido

Permite definir la posición en el eje “x” (horizontal).

Nota: Esto no será visible si seleccionaste Ancho completo en la opción Ancho.

Subtítulo

Permite agregar un texto antes del Título del component, el cual tendrá un tamaño más pequeño.

Título

Permite agregar un título en el componente.

Nota: El tamaño de este título será determinado en base a la opción definida dentro de Configuración del tema > Cabeceras > Tamaño de los títulos.

Texto

Permite agregar un texto o descripción para entregar más contexto sobre qué trata la sección.

Enlace

Permite agregar un enlace-botón a cualquier contenido de la tienda, como por ejemplo categorías, productos, páginas, enlaces externos, etc.</p>

Texto del enlace

Texto que se mostrará en el enlace-botón.

Usar estilo de contorno del botón

Permite mostrar el enlace/botón con un borde alrededor.</li>

Mostrar flecha en botón

Permite mostrar una flecha al lado derecho del texto del botón.</li>

Habilitar como enlace externo

Al habilitar, el enlace se abrirá en una nueva pestaña del navegador.

Margen superior

Permite controlar el margen de la parte superior de la sección.

Margen inferior

Permite controlar el margen de la parte inferior de la sección.

Colores de contenido

Permite elegir el Pack de colores para el componente.

Barra de Confianza

Este componente te permite desplegar información sobre tu tienda que desees resaltar o que sea relevante para tus clientes, lo cual puede ser utilizado por ejemplo en temas como tus Métodos de pago, Opciones de envío, entre otro tipo de contenido que pueda ser necesario para ti.

Funciona agregando múltiples subcomponentes llamados Bloque de confianza, a los cuales nos referiremos -para efectos prácticos- como Bloque.

Configuraciones del componente

Tipo de visualización

Permite definir la forma en que los bloques serán mostrados en el componente, en base a las siguientes opciones:

Carrusel: los bloques se mostrarán dentro de un Carrusel, en el cual puedes controlar aspectos tales como la velocidad, reproducción automática o si quieres mostrar elementos de navegación en él.
Grilla: los bloques se mostrarán en columnas, una junta a la otra de forma vertical y horizontal en base a la cantidad de ítems por fila que definas. En dispositivos móviles siempre se apilarán de forma vertical.

Número de columnas en escritorio y móvil

Permite definir la cantidad de columnas en que los bloques se mostrarán para dispositivos de escritorio y móviles, las cuales variarán dependiendo de la opción que selecciones en Tipo de visualización, en base a las definiciones de las siguientes tablas:

Carrusel (todos los dispositivos)

Ancho de dispositivo	Cantidad de columnas
Igual o mayor a 992px	Cantidad definida for Escritorio
Igual o mayor a 768px	3 columnas
Igual o mayor a 415px	Cantidad definida para Móviles
Igual o menor a 414px	1 columna

Grilla

Número de columnas en escritorio será aplicada para dispositivos con un ancho igual o mayor a 576px, mientras que Número de columnas en móvil aplicará a dispositivos con ancho igual o menor a 575px.

Dispositivo de escritorio / Valor de opción	4 columnas	3 columnas	2 columnas	1 columna
Escritorio (Igual o mayor a 992px)	4 columnas por fila horizontal	3 columnas por fila horizontal	2 columnas por fila horizontal	1 columna, apiladas verticalmente
Tabletas (Igual o mayor a 576px)	3 columnas por fila horizontal	3 columnas por fila horizontal	2 columnas por fila horizontal	1 columna, apiladas verticalmente

Dispositivo móvil / Valor de opción	2 columnas	1 columna
Móvil (Igual o menor a 575px)	2 columnas, apiladas verticalmente	2 columnas, apiladas verticalmente	2 columnas, apiladas verticalmente
Móvil pequeño (Igual o menor a 414px)	1 columna, apiladas verticalmente	1 columna, apiladas verticalmente	1 columna, apiladas verticalmente

Alineación de contenido

Permite definir la alineación para todos los bloques del componente.

Nota: Si seleccionas Centro y el bloque posee un ícono, este será posicionado sobre/antes de todo el contenido.

Mostrar íconos

Permite definir si se mostrarán los iconos en todos los bloques.

Nota: Si deshabilitas esta opción, no importará si agregaste un ícono en cualquiera de los bloques.

Configuraciones del carrusel

Margen superior

Permite controlar el margen de la parte superior de la sección.

Margen inferior

Permite controlar el margen de la parte inferior de la sección.

Colores de contenido

Permite elegir el Pack de Colores para el componente.

Configuraciones del subcomponente

Tal como ya fue mencionado, el subcomponente del componente Barra de Confianza se llama Bloque de confianza y puedes agregar todos los que quieras para proveer la información necesaria para tus clientes. Las opciones para este subcomponente son las siguientes:

Icono

Permite agregar un ícono en el bloque. Su posición será determinada en base a lo que selecciones en la opción Alineación del contenido en la configuración del componente.

Título

Permite agregar un título en el bloque.

Texto

Permite agregar un texto bajo el título para proveer mayor contexto sobre qué trata el bloque.

Enlace

Permite agregar un enlace a cualquier contenido de la tienda, como por ejemplo categorías, productos, páginas, enlaces externos, etc.

Texto del enlace

Texto que se mostrará en el enlace.

Mostrar flecha en enlace

Permite mostrar una flecha al lado derecho del texto del enlace.

Habilitar como enlace externo

Al habilitar, el enlace se abrirá en una nueva pestaña del navegador.

Video

Este componente te permite mostrar un video de YouTube o Vimeo en una sección independiente, con varias opciones para que personalizarlo, las cuales son las siguientes:

Código del video

En este campo debes agregar el código de incrustación que cada plataforma provee, dentro de las opciones para compartir videos. Si lo dejas en blanco, mostrará un imagen “falsa”.

Video ratio

Permite definir la forma o dimensión que el video tendrá, en base a las siguientes opciones:

Apaisado: un formato horizontal o ancho, comúnmente utilizado para pantallas de video y TV tradicionales, que aplica una proporción de 16:9.
Retrato: un formato vertical o alto, ideal especialmente para pantallas de dispositivos móviles, que aplica una proporción de 3:4.
Rectangular: una variación más alta de la opción Apaisado, que aplica una proporción de 4:3.
Cuadrado: un formato cuadrado perfecto, que se ve a menudo en plataformas de redes sociales como Instagram, que aplica una proporción de 1:1.

Ancho

Permite definir el ancho al cual se reestringirá el video dentro del componente.

Nota: Puedes leer más sobre como cada opción aquí se comporta en esta sección, en la parte Otros tamaños de ancho.

Posición horizontal del contenido

Permite definir la posición en que el video se ubicará dentro del eje “x” (horizontal).

Nota: Esto no será visible si seleccionaste Ancho completo en la opción Ancho.

Margen superior

Permite controlar el margen de la parte superior de la sección.

Margen inferior

Permite controlar el margen de la parte inferior de la sección.

Colores de contenido

Permite elegir el Pack de colores para el componente, el cual será aplicado básicamente el color de fondo detrás del video.

Uso de imágenes en el tema

En esta sección explicamos varios aspectos sobre la utilización de las imágenes dentro del tema, desde tópicos como por ejemplo formatos, tamaños, entre otras cosas que puedan ser útiles saber.

En lo que respecta a tamaños y dimensiones, esto variará dependiendo del componente y las opciones disponibles en su configuración. A continuación te entregamos, con el mayor detalle posible, las definiciones para tamaños ideales de imágenes para varios componentes y secciones dentro del tema.

Formatos de imagen

Para cualquiera de las imágenes que puedes subir, como por ejemplo dentro de un Slide o Banner, sugerimos algunos formatos que puedes considerar utilizar para mejorar la experiencia de los visitantes de tu tienda:

WebP

Utilizar el formato de imagen WebP puede mejorar significativamente tanto el rendimiento de tu sitio web como la experiencia de usuario. Entre sus beneficios podemos destacar los siguientes:

Tamaños de archivo más pequeños con alta calidad: el formato ofrece una compresión superior en comparación con los formatos de imagen tradicionales como JPEG y PNG. Esto significa que las imágenes WebP suelen tener un tamaño de archivo más pequeño y, al mismo tiempo, mantienen una calidad de imagen similar o incluso mejor. Los tamaños de archivo más pequeños dan como resultado tiempos de carga de página más rápidos, lo que mejora la experiencia general del usuario.
Mejoras en Velocidad de página y SEO: este tipo de imágenes cargan más rápido debido a sus tamaños de archivo reducidos, lo que contribuye a mejorar la velocidad de la página, que es un factor crítico para el SEO. Los sitios web que cargan más rápido, tienden a tener una clasificación más alta en los resultados de los motores de búsqueda, lo que puede generar más tráfico a tu sitio.
Compatibilidad con transparencia y animaciones: permiten aplicar transparencia (como PNG) y animaciones (como GIF) dentro del mismo formato. Esto significa que puedes usar WebP para una amplia gama de necesidades de imágenes, desde imágenes estáticas con fondos transparentes hasta imágenes animadas, y aún así poseer un tamaño de archivo más pequeño.
Compatibilidad entre navegadores: actualmente son ampliamente compatibles con la mayoría de los navegadores modernos, incluidos Chrome, Firefox, Edge y Safari. Gracias a esto, puedes usar imágenes WebP sin problemas en tu tienda, puesto que la mayoría de los usuarios se beneficiarán de las mejoras de rendimiento sin problemas de compatibilidad.
Mejor experiencia de usuario en móviles: dado que las imágenes WebP se cargan más rápido y consumen menos datos, brindan una experiencia más fluida en dispositivos móviles. Los tiempos de carga más rápidos y el consumo de datos reducido son especialmente importantes para los visitantes de dispositivos móviles, que pueden tener conexiones a Internet más lentas o límites de datos.

Si no posees un software que te permita editar o exportar tus imágenes a WebP, puedes utilizar servicios gratuitos en línea como TinyPNG para comprimirlas o convertirlas en tan sólo un par de clicks.

JPG / JPEG

JPG es una opción sólida para imágenes web, especialmente para fotos complejas con muchos colores y degradados. Tiene un amplio soporte y ofrece una compresión decente para lograr una buena calidad y tamaños de archivo más pequeños. Sin embargo, su compresión con pérdida, la falta de compatibilidad con transparencia y el potencial de degradación de la calidad lo hacen menos adecuado para ciertos casos de uso, especialmente en comparación con formatos más nuevos como WebP.

Si trabajas principalmente con fotos, JPG puede seguir siendo una excelente opción. Pero para otros tipos de imágenes o cuando necesitas el mejor rendimiento, es posible que desees explorar otras alternativas.

PNG

PNG es una excelente opción para imágenes que requieren alta calidad, nitidez y transparencia, como logotipos, íconos y gráficos simples. Su compresión sin pérdida garantiza que tus imágenes conserven sus detalles originales sin ninguna degradación. Sin embargo, los tamaños de archivo más grandes y la ineficiencia para las fotos lo hacen menos adecuado para todo tipo de imágenes web, especialmente cuando quieres optimizas para mejorar la velocidad y el rendimiento.

Si necesitas transparencia o calidad perfecta, PNG es el formato ideal. Pero para otros casos de uso, especialmente donde el tamaño del archivo y la velocidad de carga son críticos, es posible que desee considerar alternativas como WebP o JPG.

SVG

SVG es un formato de imagen increíblemente versátil y potente, especialmente para el diseño web. Es perfecto para logotipos, íconos, ilustraciones y cualquier gráfico que necesite ser escalable y que no dependa de la resolución. La capacidad de editar, animar y aplicar estilo a los SVGs con código lo convierte en uno de los favoritos entre los desarrolladores.

Sin embargo, SVG no es ideal para imágenes complejas como fotos y requiere un poco más de conocimiento técnico para trabajar con ellas de manera efectiva. Si necesitas imágenes nítidas y escalables con tamaños de archivo pequeños y potencial de interactividad, SVG es una opción fantástica. Para imágenes detalladas o casos de uso más simples, los formatos tradicionales como JPG o PNG pueden ser más adecuados, según lo que desees lograr.

Tamaños para Slide

Para el caso de un Slide, subcomponente de Slider, las dimensiones sugeridas listadas abajo variarán dependiendo de lo que elijas en la opción Tipo de contenido de la configuración del componente:

Imagen + Contenido

La siguiente tabla provee las dimensiones de imágenes óptimas, al elegir Imagen + Contenido en la opción Tipo de contenido de la configuración del Slider.

Ancho	Altura	Dimensión para Escritorio (en pixeles)	Dimensión para Móvil (en pixeles)
Grilla	Pequeño	1320 x 420	551 x 420
Grilla	Mediano	1320 x 560	551 x 560
Grilla	Grande	1320 x 720	551 x 720
Grilla	Navegador	1320 x (variable)	551 x (variable)
Grilla	Ajustar al contenido	1320 x (variable)	551 x (variable)
Mediano	Pequeño	1620 x 420	575 x 420
Mediano	Mediano	1620 x 560	575 x 560
Mediano	Grande	1620 x 720	575 x 720
Mediano	Navegador	1620 x (variable)	575 x (variable)
Mediano	Ajustar al contenido	1620 x (variable)	575 x (variable)
Grande	Pequeño	1920 x 420	575 x 420
Grande	Mediano	1920 x 560	575 x 420
Grande	Grande	1920 x 720	575 x 720
Grande	Navegador	1920 x (variable)	575 x (variable)
Grande	Ajustar al contenido	1920 x (variable)	575 x (variable)
Extra Grande	Pequeño	2220 x 420	575 x 420
Extra Grande	Mediano	2220 x 560	575 x 560
Extra Grande	Grande	2220 x 720	575 x 720
Extra Grande	Navegador	2220 x (variable)	575 x (variable)
Extra Grande	Ajustar al contenido	2220 x (variable)	575 x (variable)
Ancho completo	Pequeño	Ancho: 2400 px mínimo sugerido / Altura: 420 px	575 x 420
Ancho completo	Mediano	Ancho: 2400 px mínimo sugerido / Altura: 560 px	575 x 560
Ancho completo	Grande	Ancho: 2400 px mínimo sugerido / Altura: 720 px	575 x 720
Ancho completo	Navegador	Ancho: 2400 px mínimo sugerido / Altura: variable	575 x (variable)
Ancho completo	Ajustar al contenido	Ancho: 2400 px mínimo sugerido / Altura: variable	575 x (variable)

Nota 1: Al elegir Navegador dentro de la opción Altura del componente, la dimensión necesaria debería ser un mínimo de ciertos pixeles considerando dispositivos bien grandes, de forma tal que pueda ser visualizado correctamente.

Nota 2: Al elegir Ajustar al contenido dentro de la opción Altura del componente, la dimensión necesaria debería ser consederando la altura del Slide más alto.

Sólo imagen

La siguiente tabla provee las dimensiones de imágenes óptimas, al elegir Sólo imagen en la opción Tipo de contenido de la configuración del Slider.

También, sólo hacemos referencia al Ancho de la imagen en este tabla, puesto que su Altura dependerá de que tan altas quieras que sean tus imágenes.

Ancho	Imagen para escritorio (en pixeles)	Imagen para móvil (en pixeles)
Grilla	Mínimo sugerido: 1320	Máximo sugerido: 551
Mediano	Mínimo sugerido: 1620	Máximo sugerido: 575
Grande	Mínimo sugerido: 1920	Máximo sugerido: 575
Extra Grande	Mínimo sugerido: 2220	Máximo sugerido: 575
Ancho completo	Mínimo sugerido: 2400	Máximo sugerido: 575

Nota: La opción Altura dentro de la configuración del Slider no será considerada al elegir Sólo imagen, por ende, no verás ningún cambio visible al seleccionar cualquiera de sus valores.

Para el caso de un Banner, subcomponente de Banners, las dimensiones sugeridas en las tablas de abajo variarán dependiendo de la combinación de lo que elijas en las opciones Tipo de contenido, Número de columnas en escritorio y Número de columnas en móvil, en la configuración del componente:

Imagen + Contenido

Al elegir esta opción la dimensión de las imágenes también dependerán de lo que selecciones en la opción Proporción de imagen, en la configuración del componente. Considera que las siguientes dimensiones son una sugerencia en base a una medida mínima:

Escritorio

Proporción / Número de columnas	4 columnas	3 columnas	2 columnas	1 columna
Apaisado	306 x 172 px	416 x 234 px	636 x 358 px	1296 x 729 px
Retrato	306 x 408 px	416 x 555 px	636 x 848 px	1296 x 1728 px
Rectangular	306 x 230 px	416 x 312 px	636 x 477 px	1296 x 972 px
Cuadrado	306 x 306 px	416 x 416 px	636 x 636 px	1296 x 1296 px

Móvil

Proporción / Número de columnas	2 columnas	1 columna
Apaisado	366 x 206 px	527 x 297 px
Retrato	366 x 488 px	527 x 703 px
Rectangular	366 x 275 px	527 x 396 px
Cuadrado	366 x 366 px	527 x 527 px

Sólo imagen

Al elegir esta opción sólo especificamos el Ancho mínimo sugerido, puesto que la Altura para cada Banner dependerá de cómo quieras que se vean y presenten:

Escritorio

Proporción / Número de columnas	4 columnas	3 columnas	2 columnas	1 columna
Apaisado	306 px	416 px	636 px	1296 px
Retrato	306 px	416 px	636 px	1296 px
Rectangular	306 px	416 px	636 px	1296 px
Cuadrado	306 px	416 px	636 px	1296 px

Móvil

Proporción / Número de columnas	2 columnas	1 columna
Apaisado	366 px	527 px
Retrato	366 px	527 px
Rectangular	366 px	527 px
Cuadrado	366 px	527 px

Para el caso del componente Banner Grande, las dimensiones sugeridas mínimas en las tablas a continuación, variarán dependiendo de la combinación de las opciones Ancho y Altura en la configuración:

La dimensión para dispositivos de Escritorio considerará los que tengan un ancho igual o mayor a 576px, mientras que para dispositivos Móviles los que posean un ancho igual o menor a 575px:

Ancho: Grilla

Opción de Altura	Dimensión imagen para escritorio	Dimensión imagen para móvil
Ajustar al contenido	1320 x 300 px	575 x 320 px
Pequeño	1320 x 420 px	575 x 420 px
Mediano	1320 x 560 px	575 x 560 px
Grande	1320 x 720 px	575 x 720 px
Navegador	1320 x 850 px	575 x 820 px

Ancho: Mediano

Opción de Altura	Dimensión imagen para escritorio	Dimensión imagen para móvil
Ajustar al contenido	1620 x 300 px	575 x 320 px
Pequeño	1620 x 420 px	575 x 420 px
Mediano	1620 x 560 px	575 x 560 px
Grande	1620 x 720 px	575 x 720 px
Navegador	1620 x 850 px	575 x 820 px

Ancho: Grande

Opción de Altura	Dimensión imagen para escritorio	Dimensión imagen para móvil
Ajustar al contenido	1920 x 300 px	575 x 320 px
Pequeño	1920 x 420 px	575 x 420 px
Mediano	1920 x 560 px	575 x 560 px
Grande	1920 x 720 px	575 x 720 px
Navegador	1920 x 850 px	575 x 820 px

Ancho: Extra Grande

Opción de Altura	Dimensión imagen para escritorio	Dimensión imagen para móvil
Ajustar al contenido	2220 x 300 px	575 x 320 px
Pequeño	2220 x 420 px	575 x 420 px
Mediano	2220 x 560 px	575 x 560 px
Grande	2220 x 720 px	575 x 720 px
Navegador	2220 x 850 px	575 x 820 px

Ancho: Navegador

Opción de Altura	Dimensión imagen para escritorio	Dimensión imagen para móvil
Ajustar al contenido	2800 x 300 px	575 x 320 px
Pequeño	2800 x 420 px	575 x 420 px
Mediano	2800 x 560 px	575 x 560 px
Grande	2800 x 720 px	575 x 720 px
Navegador	2800 x 850 px	575 x 820 px

Nota: Al definir Navegador dentro de las opciones Ancho y Altura, sugerimos que puedas probar cómo se ven las imágenes en distintos dispositivos, para asegurar que no se pixelen.

Tamaño de Imágenes en Página de producto

En el caso de los tamaños de las imágenes en la plantilla de producto (o página), estas variarán en base a lo que elijas en la opción Dimensión de imagen, la cual puedes encontrar dentro del componente Plantilla de producto. También, el tema cargará de forma automática diferentes tamaños de imagen dependiendo del ancho de la ventana del navegador en que se esté visitando la tienda, de forma tal que puedan ser optimizadas para distintos tipos de dispositivos.

Adicionalmente, necesitas considerar que al activar la opción de Zoom, probablemente debas subir imágenes un poco más grandes que los tamaños mencionados más abajo, para que no se pixelen al hacer zoom.

A continuación, detallamos las dimensiones sugeridas mínimas en que puedes subir las imágenes de tus productos. Los valores de la siguiente tabla consideran sólo los dispositivos de escritorio, ya que serán los que posean la mayor dimensión de todos:

Opción de dimensión	Tamaño de imagen normal	Tamaño de imagen en zoom
Apaisado	719 x 404 px	1000 x 563 px
Retrato	719 x 959 px	1000 x 1333 px
Rectangular	719 x 539 px	1000 x 750 px
Cuadrado	719 x 719 px	1500 x 1500 px

Nota: Las imágenes serán automáticamente redimensionadas o recortadas en base a lo que elijas en la opción Visualización de imágenes, dentro de la configuración del componente.

Componentes de temas de Jumpseller

Definiciones generales

¿Qué es un Componente?

¿Qué es un Subcomponente?

Plantillas del Tema

Conceptos básicos

Slider/Carrusel

Grupos de Colores

Dispositivos

Ancho

Hover

Overlay

Animaciones

Cabeceras

Listado de componentes and subcomponentes

Cabecera

Pie de Página

Acordeón

Banners

Banner Grande

Formulario de contacto

Información de contacto

Mapa de contacto

Categorías

Contador

Código Personalizado

Código Personalizado (next-gen)

Medios con texto

Categoría Destacada

Productos Destacados

Reseñas Destacadas

Productos Seleccionados

Imagen

Instagram

Últimas Publicaciones del Blog

Últimos productos

Línea divisoria

Ubicaciones

Galería de logotipos

Newsletter

Plantilla de producto

Producto seleccionado

Slider

Características de la tienda

Testimonios

Bloque de Texto

Barra de Confianza

Video

Uso de imágenes en el tema

Formatos de imagen

Tamaños para Slide

Tamaños para Banner

Tamaños para Banner Grande

Tamaño de Imágenes en Página de producto

Artículos Relacionados

Cómo configurar los Ajustes Generales y de Marca en tu sitio web

Cómo personalizar tu tema de Jumpseller

Guía sobre cómo personalizar tu tienda con el Editor Visual de Temas

Nuestras directrices para crear un tema HTML personalizado

Create a Custom Online Store

¡Comienza tu viaje con nosotros!

Código Personalizado `(next-gen)`