Configurando las secciones principales de un tema

Cabecera

La Cabecera es la que se encuentra ubicada en la parte superior de cada tema de Jumpseller y es una de las secciones más importantes para una tienda E-commerce. Provee acceso a muchos de los elementos claves que le permitirán a los clientes navegar en tu tienda, como es el caso del Logo (o Nombre de tienda), Monedas e Idiomas, el ítem de Carro, entre otros que serán explicados en este artículo.

En cuanto al Editor Visual de tu tienda, incluso cuando la Cabecera en sí también es un Componente, no puede ser movida o re-posicionada como el resto, ya que debe mostrarse y aparecer en la parte superior de cada Plantilla (por ejemplo, Inicio, Categoría, Producto, etc.) para entregar una funcionalidad y presentación consistentes.

A continuación, puedes encontrar el listado de opciones que te permitirán personalizarla, así como también los Subcomponentes que forman parte de ella.

Configuración de la Cabecera

Ancho

Permite definir el ancho del contenido interno de la Cabecera, entre las siguientes opciones predefinidas:

• Grilla: restringe el contenido en base al mismo ancho que posee el tema en la mayoría de sus secciones, el cual es de 1296px.
• Mediano: expande el contenido a un ancho máximo de 1440px.
• Large: expande el contenido a un ancho máximo de 1600px.
• Extra large: expande el contenido a un ancho máximo de 2400px.
• Full width: expande el contenido al ancho máximo del navegador en que se esté visualizando la tienda.

Fijar Cabecera

Permite fijar la Cabecera a la parte superior del navegador, de forma tal que acompañe a los usuarios cuando suban y bajen en la tienda.

Logo

Permite subir un Logo en la Cabecera.

Logo (móvil)

Permite subir un Logo específicamente para dispositivos móviles. Este se mostrará en dispositivos que posean un ancho igual o menor a 575px.

Nota: Si no subes ninguno de los anteriores, la Cabecera mostrará el Logo que haya sido definido en tu panel de administración en Configuración > General > Marca. Si no subiste uno allí, se mostrará el Nombre de la tienda que haya sido definido en Configuración > General > Preferencias.

Altura del Logo (escritorio)

Permite definir la altura de cualquiera de los Logos que sean subidos o mostrados en la Cabecera, para dispositivos de escritorio con un ancho igual o mayor a 576px.

Altura del Logo (móvil)

Permite definir la altura de cualquiera de los Logos que sean subidos o mostrados en la Cabecera, para dispositivos móviles con un ancho igual o menor a 575px.

Nota: De no subir este Logo, el anterior se mostrará en todos los dispositivos.

Mostrar borde inferior

Permite mostrar un borde en la parte inferior de la Cabecera. Esto puede ayudar para crear una separación visual entre la Cabecera y el resto del contenido que se encuentre debajo en el tema.

Items de menú de primer nivel en mayúsculas

Permite mostrar todos ítems de navegación de primer nivel en mayúsculas, incluso cuando no los hayas escrito de dicha forma en el panel de administración o en la configuración de la Navegación. Esto afectará tanto al Menú de Escritorio como también al Menú Móvil del tema.

Mostrar redes sociales en Menú Móvil

Permite mostrar todos los enlaces (y sus iconos) que puedes agregar en tu panel de administración en Configuración > General > Preferencias > Redes sociales, en el Menú Móvil.

Colores de contenido

Pemite seleccionar el Pack de colores a utilizar en la Cabecera.

---

Menú de Escritorio

El Menú de Escritorio es un subcomponente de la Cabecera y permite desplegar los ítems de navegación definidos en Personalización > Navegación > Menú principal para dispositivos de escritorio que posean un ancho igual o mayor a 992px.

Este menú se esconderá en dispositivos que posean un ancho igual o menor a 991px, y cuando aquello ocurra, se mostrará un ítem a la izquierda de la Cabecera, el cual permitirá abrir el Menú Móvil al hacer click. Este ítem también se mostrará si decides esconder el Menú de Escritorio. Puedes encontrar más detalles sobre esto en esta sección de la documentación.

Las opciones disponibles para personalizar el Menú de Escritorio son las siguientes:

Mostrar borde superior

Permite mostrar un borde en la parte superior del Menú de Escritorio, para separar esta sección con el resto del contenido que se encuentra arriba en la Cabecera.

Alineación del menú

Permite definir la alineación de los ítems presentes en el Menú de Escritorio.

Evento apertura de submenus

Permite definir el evento del cursor que abrirá el menú desplegable para los ítems de primer nivel que posean sub-ítems dentro de ellos. En base a lo que selecciones, cambiará la funcionalidad de los ítems de primer nivel, por lo que debes considerar lo siguiente:

Estilo de submenus

Permite definir el diseño de los menús desplegables en base a dos opciones:

---

Menú de Carro

El Menú de Carro también es un subcomponente de la Cabecera y muestra lo siguiente:

• Los productos que los clientes agregan al carro, en donde pueden modificar la cantidad y/o eliminarlos.
• El Resumen del pedido, con información como por ejemplo Subtotal, Envío, Descuentos, etc.
• Botones de acciones, como por ejemplo Proceder al pago e Ir al Carro.

Este componente posee las siguientes opciones para personalizarlo:

Título del menú

Permite modificar el título que se muestra en la parte superior de la secion, el cual por defecto será “Resumen del pedido”.

Mostrar ícono

Permite definir si se mostrará o no un ícono junto al título.

Prioridad de botones

Permite definir cuál de los botones disponibles en esta sección tendrá prioridad. El que escojas poseerá un estilo de fondo relleno, mientras que el otro se presentará con un borde.

Texto de acciones

Permite desplegar un texto que se muestra antes de los botones y es útil para entregar información a los clientes antes que vayan a cualquiera de los siguientes pasos del proceso de compra.

Si no es necesario o relevante para ti, puedes dejar el campo vacío.

---

Barra Superior

Este subcomponente de la Cabecera permite agregar múltiples ítems, llamados Slide de Barra Superior, a los cuáles nos referiremos para efectos de esta documentación como Slides. Estos serán desplegados siempre dentro de un carrusel.

Las opciones para que puedas personalizarlo son las siguientes:

Fijar Barra Superior

Permite fijar la Barra Superior a la parte superior de la ventana del navegador de forma tal que acompañe a los usuario al subir y bajar en la tienda. Esto sólo será aplicado en dispositivos de escritorio que posean un ancho igual o mayor a 575px. En dispositivos con un anchor menor a dicha dimensión, la Barra Superior se posicionará bajo la Cabecera.

Habilitar reproducción automática

De habilitar, los Slides pasarán de forma automática de uno a otro en base a la velocidad definida en la opción siguiente.

Velocidad

Permite definir el tiempo en que el carrusel esperará para pasar de un Slide al siguiente.

---

Slide de Barra Superior

Este es el ítem que se puede agregar al subcomponente Barra Superior que fue mencionado anteriormente y posee las siguientes opciones:

Icono

Permite mostrar un ícono a la izquierda del texto del Slide.

Texto

Aquí puedes agregar el texto que se mostrará en el Slide.

Enlace

Permite agregar un enlace a cualquier contenido de la tienda, cómo por ejemplo Categorías, Productos, Páginas, etc.

Texto del enlace

Obligatorio. Texto que se mostrará en el enlace.

Habilitar como enlace externo

Permite definir si cuando un cliente haga click en el enlace, este será abierto en una nueva pestaña del navegador.

Colores de contenido

Pemite seleccionar el Pack de colores a utilizar en el Slide.

---

Menú Móvil

The Mobile Menu, even when it’s not a subcomponent available inside the Cabecera of the theme, it’s an element that will display and be accessible in the following contexts:

El Menú Móvil, incluso cuando no es un subcomponente que esté disponible dentro de la Cabecera del tema, es una sección que se mostrará y será accesible en los siguientes contextos:

1.- Menú de Escritorio escondido

Si optas por esconder el Menú de Escritorio, se desplegará un ítem al lado izquierdo de la Cabecera del tema y permitirá abrir el Menú Móvil, para todos los dispositivos (escritorio y móvil).

Ejemplo de cómo se verá la Cabecera al esconder el Menú de Escritorio.

2.- Tablets y dispositivos móviles

A pesar de que usualmente nos referimos sólo a dispositivos móviles en esta documentación, de igual forma -inherentemente- incluye dispositivos Tablet. El Menú Móvil será accesible de forma automática en dispositivos que posean un ancho igual o menor a 991 pixeles, y por ende, el Menú de Escritorio se esconderá en dichos dispositivos.

---

---

Pie de página

El Pie de página, al igual que la Cabecera, es una de las secciones importantes para una tienda de E-commerce y se ubica en la parte inferior de cada tema de Jumpseller. Su función principal es que sirva como la sección final de un sitio web, proporcionando información esencial a los usuarios y elementos de navegación que permiten mejorar su experiencia. Un Pie de página bien diseñado puede mejorar la fiabilidad de los usuarios, generar confianza, y asegurarles que puedan encontrar recursos importantes de forma sencilla, incluso cuando lleguen al final de una página.

Esta sección también esta conformada por subcomponentes, los cuales puedes mover y reordenar para definir la posición en que quieras desplegar y presentar la información. Estos son distribuidos en base a columnas, en donde la primera (Acerca de Pie de página) posee un ancho fijo de 4 columnas, mientras que el resto se adaptará en base al espacio disponible restante en el Pie de página. En dispositivos móviles, se apiliarán uno debajo del otro.

A continuación, puedes encontrar el listado de opciones que te permitirán personalizarlo, así como también todos los subcomponentes que forman parte de él.

Configuración del Pie de página

Ancho

Permite definir el ancho del contenido interno del Pie de página, entre las siguientes opciones predefinidas:

• Grilla: restringe el contenido en base al mismo ancho que posee el tema en la mayoría de sus secciones, el cual es de 1296px.
• Mediano: expande el contenido a un ancho máximo de 1440px.
• Large: expande el contenido a un ancho máximo de 1600px.
• Extra large: expande el contenido a un ancho máximo de 2400px.
• Full width: expande el contenido al ancho máximo del navegador en que se esté visualizando la tienda.

Alineación del contenido en escritorio

Permite definir la alineación del contenido del Pie de página en dispositivos de escritorio que posean un ancho igual o mayor a 768px.

Alineación del contenido en móvil

Permite definir la alineación del contenido del Pie de página en dispositivos móviles que posean un ancho igual o menor a 767px.

Mostrar logos de métodos de pago

Permite mostrar cualquier de las opciones que se detallan a continuación.

Mostrar logo de transferencia bancaria

Permite mostrar un logo (o icono) el cual le informa a los clientes que pueden pagar en tu tienda mediante transferencia electrónica bancaria.

Nota: Si habilitas esta opción, asegúrate de agregar un método de pago manual o automático que permita esto en la configuración de pagos del panel de aadministración en Configuración > Checkout > Pagos.

Listado de métodos de pago

Permite mostrar logos de todos los métodos de pago disponibles en Jumpseller.

Colores de contenido

Pemite seleccionar el Pack de colores a utilizar en el Pie de página.

---

Acerca de Pie de página

Este subcomponent permite mostrar información relevante de tu tienda, mediante las siguientes opciones disponibles:

Logo

Permite subir un logo específicamente para el Pie de página.

Nota: Si no subes este Logo, el Pie de página mostrará el que hayas definido en tu panel de administración en Configuración > General > Marcaa. Si no subiste uno allí, se mostrará el Nombre de la tienda definido en Configuración > General > Preferencias.

Altura del Logo

Permite definir la altura de cualquiera de los logos que se muestren en el Pie de página.

Descripción

Permite agregar un texto o descripción bajo el Logo (o Nombre de tienda). Te sugerimos agregar algo breve y que contenga palabras clave, para mejorar el SEO orgánico de tu tienda.

Mostrar enlaces de redes sociales

Permite mostrar todos los enlaces (y sus iconos) que puedes agregar en tu panel de administración en Configuración > General > Preferencias > Redes sociales.

---

Menú de pie de página 1

This subcomponent allows you to display the navigation items added at ´Personalización > Navegación > Footer menu 1´. You can change the title of this menu within its settings.

Este subcomponente permite mostrar los ítems de navegación que se hayan agregando en ´Personalización > Navegación > Menú de pie de página 1´. Puedes modificar el título de esta sección dentro de su configuración.

---

Menú de pie de página 2

Este subcomponente permite mostrar los ítems de navegación que se hayan agregando en ´Personalización > Navegación > Menú de pie de página 2´. Puedes modificar el título de esta sección dentro de su configuración.

---

Información de contacto

Este subcomponente permite mostrar detalles de contacto de tu tienda, lo cual considerará la información de la ubicación por defecto del listado de ubicaciones que puedes agregar en el panel de administración en Configuración > Checkout > Ubicaciones.

Las opciones para personalizar este subcomponente son las siguientes:

Título

Permite modificar el título, el cual será “Contáctanos” por defecto.

Mostrar correo de contacto

Permite mostrar o esconder el correo agregado en la ubicación.

Mostrar núemro de WhatsApp

Permite mostrar o esconder el número que puede ser agregado en el panel de administración en Configuración > General > Preferencias > Redes sociales.

Mostrar teléfono de contacto

Permite mostrar o esconder el teléfono agregado en la ubicación.

Mostrar dirección

Permite mostrar o esconder la dirección agregada en la ubicación.

---

---

Configuración del tema

Esta sección es la que se puede encontrar en la parte superior, en el panel lateral izquierdo del Editor Visual de tu tienda, y contiene varias opciones para que puedas personalizar tu tema, mediante subsecciones tales como Diseño, Colores, Fuentes, entre muchas otras.

A continuación explicamos en detalle estas secciones, junto a las opciones que forman parte de cada una de ellas.

Colores

Esta sección contiene lo que llamamos Packs de colores, los cuales son grupos de colores relacionados y aplicados a múltiples elementos dentro del tema. A continuación, detallamos algunos aspectos de ellos para que puedas sacarle el mayor provecho posible a esta funcionalidad.

Packs

El tema posee 3 packs pre-instalados, los cuales son aplicados a los múltiples componentes disponibles para ser utilizados.

Colores sugeridos

También dentro de cada Pack de colores, posterior a las opciones del pack, encontrarás una sección con varios conjuntos de colores predefinidos que puedes utilizar, los cuales hemos creado manualmente en base al buen uso de contraste de color, así como también prácticas estándar dentro del ecosistema de E-commerce.

Otros colores

Dentro de esta misma sección, encontrarás otros colores que son aplicados a distintos elementos a través del tema:

Nota: La funcionalidad de Reseñas de Productos en Jumpseller sólo está disponible desde el plan Pro en adelante. Para mayor información sobre esta funcionalidad, por favor visita el siguiente artículo.

---

Fuentes

Esta sección te permite personalizar las fuentes del tema y está conectado con la librería de Google Fonts, la cual te permite acceder al catálogo completo de más de 1.700 fuentes. A continuación, te explicamos en detalle como cada opción se aplica dentro del tema.

Tamaño base de fuente

Permite definir y modificar el tamaño “general” de las fuentes. El tema fue diseñado utilizando unidades escalables, lo cual significa que una vez que aumentes o disminuyas la cantidad de pixeles de esta opción, todos los títulos y textos se verán afectados inmediatamente por aquello.

Fuente principal

Esta fuente se aplica a todos los Títulos dentro del tema. Ejemplos de esto son:

• Títulos de componentes como Slide, Banner, Productos destacados, Encabezado de la plantilla, Testimonios, Contenido dinámico, etc.
• El Nombre de producto que se encuentra dentro del subcomponente Título.

Fuente secundaria

Esta fuente se aplica a todo el resto de textos a través del tema. Ejemplos de esto son:

• Textos y enlaces presentes en la Cabecera, el Menú de Escritorio y el Menú Móvil.
• Descripción en un suncomponente Slide y/o Banner.
• El texto presente en el componente Contenido dinámico.
• La desripción de producto en el subcompontente que lleva el mismo nombre.
• Texto o descripción disponibles en componentes como por ejemplo Productos destacados, Productos recientes, entre otros.

Nombre de tienda

Esta fuente se aplica en todos los lugares donde se muestra el Nombre de la tienda y es útil en caso que no poseas un Logo para subir. Secciones en donde el nombre de tu tienda aparecerá son las siguientes:

• En la Cabecera y el Menú Móvil, cuando no se ha subido un Logo en Configuración > General > Marca o dentro de la configuración del componente Cabecera.
• En el Pie de página, cuando no se ha subido un Logo en Configuración > General > Marca o dentro de la configuración del componente Pie de página.
• En la Cabecera de las páginas del proceso de compra (ej: Carro, Checkout), cuando no se ha subido un Logo en Configuración > General > Marca o dentro de la sección respectiva en Temas > Editor Visual > Configuración del tema > Proceso de compra.

Fuente de botones

Esta fuente se aplica a todos los botones del tema.

---

Diseño

Esta sección te permite modificar y ajustar varias configuraciones de diseño del tema.

Nombre de tienda

Permite definir y mostrar un nombre distinto al que se puede agregar en tu panel de administración dentro de Configuración > General > Preferencias > Nombre de la Tienda. Por ejemplo, si no subiste un Logo en algunas de las instancias mencionadas anteriormente, lo que agregues en este campo se mostrará en todas aquellas secciones.

Tamaño de nombre de tienda

Permite definir el tamaño del Nombre de la tienda, lo cual se aplicará en todas las secciones donde se muestre.

Note: el tamaño será aplicado al nombre agregado en este campo o al definido en Configuración > General > Preferencias > Nombre de la Tienda.

Grosor de nombre de tienda

Permite modificar y ajustar el grosor del nombre de la tienda.

Note: el grosor dependerá de las variables disponibles para la fuente seleccionada en la opción Nombre de tienda, dentro de Configuración del tema > Fuentes.

Estilo de las esquinas

Esta opción permite modificar el estilo de todas las esquinas de secciones del tema. Se pueden notar ejemplos de cómo esto es aplicado en:

• Un componente Slider cuando se ha definido su Ancho como Grilla.
• Un Bloque de producto y la imagen en la Página de producto.
• La imagen de un componente Contenido dinámico.

Estilo de los botones

Permite modificar el estilo de la mayoría de los botones del tema.

Estilo de íconos

Los iconos utilizados en la nueva generación de temas de Jumpseller son de la librería Phosphor Icons, la cual tiene más de 9.000 iconos entre los cuales escoger. Esta opción te permitirá definir el estilo de la mayoría de los íconos utilizados en el tema. Los estilos disponibles son los siguientes:

• Bold
• Fill
• Light
• Regular
• Thin

Icono de carro

Esta opción permite definir el ícono de “Carro” que será utilizado a través del tema. Las secciones en que este ícono será visible son las siguientes:

• Al lado derecho de la Cabecera, junto con la cantidad de unidades agregadas al carro.
• En el subcomponente Menú de Carro que es parte de la Cabecera, sólo si en su configuración se ha definido mostrar el icono.
• En los botones Agregar al carro en bloques de producto y página de producto, si has definido mostrar el icono en la opción que sigue.

Mostrar ícono de carro en botones

Tal como fue mencionado anteriormente, esta opción permite mostrar el Icono de carro en los botones de Agregar al carro en los bloques de producto y las páginas de producto.

---

Breadcrumbs

El Breadcrumbs es la sección que puede ser mostrada al inicio de las plantillas de Categoría, Producto y Página, y le permite a los usuarios saber la ruta que siguieron para llegar a una página específica.

Las opciones para que personalizarlo son las siguientes:

Visualización de Breadcrumbs

Esta opción permite definir en qué instancias se mostrará la sección:

• Todos los dispositivos: se mostrará en todos los tipos de dispositivos.
• Sólo en escritorio: se mostrará en dispositivos que posean un ancho igual o mayor a 768px.
• Sólo en móvil: se mostrará en dispositivos que posean un ancho igual o menor 767px.
• No mostrar: no se mostrará la sección en ningún dispositivo.

Alineación

Permite definir la alineación del listado dentro de la sección.

Margen superior

Permite definir el margen (o espacio) interior superior de la sección.

Margen inferior

Permite definir el margen (o espacio) interior inferior de la sección.

Colores de contenido

Pemite seleccionar el Pack de colores a utilizar en el Breadcrumbs.

---

Cabeceras

Las Cabeceras son las secciones que se muestran en la mayoría de los componentes dentro del tema, y por lo general cuentan con los siguientes elementos en su interior:

• Un subtítulo
• Un título
• Una descripción
• En algunos casos un botón o enlace.

Las opciones en esta sección de la Configuración del tema afectarán todos los lugares donde una Cabecera esté presente:

Alineación en escritorio

Permite definir la alineación para dispositivos de escritorio con un ancho igual o mayor a 768px.

Alineación en móvil

Permite definir la alineación para dispositivos móviles con un ancho igual o menor a 767px.

Tamaño de los títulos

Permite definir el tamaño de todos los títulos en las Cabeceras del tema.

Nota: Las opciones disponibles para el Tamaño serán directamente afectadas en base a lo definido en la opción Tamaño base de fuente dentro de Configuración del tema > Fuentes.

Grosor de los títulos

Permite definir el grosor de todos los títulos en las Cabeceras del tema.

Nota: El grosor dependerá de las variables disponibles de la fuente seleccionada que hayas definido en la opción Fuente principal dentro de Configuración del tema > Fuentes.

Espacio entre letras de títulos

Permite ajustar el espacio entre las letras de todos los títulos en las Cabeceras del tema.

Mostrar títulos en mayúsculas

Permite forzar los títulos de todas las Cabeceras para que sean mostrados en mayúsculas, incluso cuando no hayan sido escritos así.

Tamaño de descripción

Permite definir el tamaño de todas las descripciones o textos que pueden mostrarse bajo el título de una Cabecera en el tema.

Nota: Las opciones disponibles para el Tamaño serán directamente afectadas en base a lo definido en la opción Tamaño base de fuente dentro de Configuración del tema > Fuentes.

---

Filtros

Esta sección provee varias opciones para personalizar como se muestran los Filtros en el tema. Para saber más sobre cómo funcionan los filtrod en Jumpseller, por favor visita este enlace.

Nota: La funcionalidad de Filtros sólo está disponible desde el plan Premium en adelante.

Las opciones disponibles en esta sección son las siguientes:

Mostrar filtros en escritorio

Permite mostrar el listado de filtros a la izquierda del subcomponente Feed de productos que puede ser utilizado en las plantillas de Categoría y Resultados de Búsqueda, cómo se puede ver en la imagen al principio de esta sección.

Esto sólo se verá reflejado en dispositivos de escritorio que posean un ancho igual o mayor a 768px. Para dispositivos con un ancho igual o menor a 767px, los filtros estarán disponibles dentro de un panel lateral, el cual puede ser abierto a través de un botón que será desplegado en la sección Cabecera.

Nota: Si se deshabilita esta opción, el comportamiento será el mismo que en dispositivos móviles.

Ejemplo del panel lateral de Filtros abierto en un dispositivo de escritorio, cuando se ha deshabilitado de ser ubicado junto al componente Feed de producto.

Mostrar ordenar por

Permite mostrar o esconder el selector con el cual los clientes pueden reordenar productos en base a las siguientes opciones:

Mostrar subcategorías

Permite definir si las subcategorías de una categoría serán mostradas junto al resto de los filtros.

Nota: Esto sólo se verá reflejado en plantillas de Categoría.

Mostar filtrar por precio

Permite mostrar o no los campos con los cuales los clientes pueden filtrar los productos en base a rango mínimo y rango máximo de precios. Los posibles rangos de precios serán determinados en base al listado de productos de una colección en una plantilla de Categoría y/o Resultados de búsqueda.

---

Bloque de producto

Un Bloque de producto es el “bloque” - o también conocido como “tarjeta”- de un producto que puede ser desplegado en varias plantillas de tu tema. Contiene múltiple información sobre cada uno, de forma tal que los clientes puedan ver detalles sobre ellos -por ende, previsualizarlos-.

A continuación, te explicamos todas las posibles opciones para que los personalices:

Alineación de contenido

Ejemplo de las distintas alineaciones: Izquierda, Derecha y Centro respectivamente.

Permite definir la alineación del contenido dentro del bloque, lo cual son todos los detalles que van bajo la imagen del producto, como por ejemplo los Atributos (SKU y Marca), Nombre, Precio, entre otros.

Grosor del nombre

Permite ajustar el grosor de la fuente del nombre de producto del bloque.

Nota: El grosor dependerá de las variables disponibles de la fuente seleccionada que hayas definido en la opción Fuente principal dentro de Configuración del tema > Fuentes.

Mostrar nombre en mayúsculas

Permite forzar que el nombre del producto sea en mayúsculas en todos los bloques, incluso cuando no hayan sido escritos así.

Productos por fila en escritorio

Permite definir la cantidad de productos por fila horizontal que se mostrarán en dispositivos de escritorio. La forma en que esta opción afecta a los productos, será en base a los detalles de la siguiente tabla:

Valor de opción	Ancho de dispositivo	Productos por fila
5	> 1200px	5
5	> 991px	4
5	> 768px	3
5	> 576px	2
4	> 1200px	4
4	> 991px	4
4	> 768px	3
4	> 576px	2

Productos por fila en móvil

Permite definir la cantidad de productos a mostrar por fila horizontal en dispositivos móviles que posean un ancho igual o menor a 575px.

Nota: Independiente de si seleccionas mostrar 2 productos por fila horizontal, en dispositivos móviles con un ancho menor a 414 pixeles, sólo se mostrará un producto para permitir una mejor visualización de los detalles del producto.

Dimensión de imagen

Permite definir la dimensión de la imagen de todos los bloques de producto a través del tema. Las opciones disponibles están definidas en base a proporciones, las cuales se detallan a continuación:

Opción	Proporción	Imagen en pixeles (dimensión más grande desplegada)
Apaisado	16:9	527 x 296 px
Retrato	3:4	527 x 702 px
Rectangular	4:3	527 x 395 px
Cuadrado	1:1	527 x 527 px

Visualización de imágenes

Permite definir cómo se adaptarán las imágenes de tus productos al espacio disponible en base a la dimensión definida anteriormente.

Transición de imagen

Permite definir qué transición será aplicada a las imágenes de los bloques de producto cuando los usuarios pasen el mouse sobre ellos:

Mostrar SKU del producto

Permite mostrar el SKU del producto, entre la imagen y el nombre. No se mostrará nada si el producto posee el campo vacío.

Mostrar marca del producto

Permite mostrar la Marca del producto, entre la imagen y el nombre. No se mostrará nada si el producto posee el campo vacío.

Nota: El orden de estos dos atributos será primero SKU y después Marca, y serán separados por una línea vertical. Esta línea no se mostrará si el producto no posee alguno de los atributos.

Mostrar botón de Agregar al Carro

Permite mostrar un botón de Agregar al carro junto con un selector de Cantidad en la parte baja del bloque.

Mostrar selector de cantidad

Permite mostrar o no el selector con el cual los clientes pueden escoger la cantidad de unidades que desean agregar al carro para cada producto.

Nota: Para productos que posean opciones (ej: Color, Tamaño) se mostrará un botón con el texto “Ver opciones”, el cual llevará a la página de producto.

Mostrar botones de estado de producto

Permite mostrar un botón para los productos que posean estado de No disponible o Agotado, en la parte baja del bloque.

Mostrar opción de color

Permite mostrar la primera opción de tipo Color y sus variantes, sobre y en la parte inferior de la imagen del producto.

Nota: Si un product posee 2 o más opciones de tipo Color, sólo se mostrará la primera del listado de opciones.

Mostrar valoraciones de producto

It allows you to display the Rating stars and Rating score for products that have customer reviews. This will show after the product price.

Permite mostrar las estrellas de valoración y la calificación promedio para los productos que posean reseñas de clientes. Esto se mostrará posterior al precio del producto.

Nota: La funcionalidad de Reseñas de Productos en Jumpseller sólo está disponible desde el plan Pro en adelante. Para mayor información sobre esta funcionalidad, por favor visita el siguiente artículo.

Alineación de precios

Permite definir cómo se mostrarán los precios en los bloques en base a las siguientes condiciones:

• cuando haya un descuento (promoción) disponible y visible y/o;
• cuando un producto poseaa variantes y se haya definido una visualización de Rango.

Las opciones disponibles son las siguientes:

Mostrar texto "desde/hasta" para variantes

Permite mostrar un texto antes de los precios cuando un producto posea variantes (ej: Color, Tamaño), como por ejemplo: desde $200.000.

Visualización de precios de variantes

Permite definir cómo se mostrarán los precios para los productos que posean variantes y cuando estas posean distintos precios.

Posición de etiquetas

Permite definir donde se mostrarán las etiquetas de los productos sobre la imagen. Las etiquetas que esta opción considera son las siguientes:

• Descuento
• Nuevo
• Estado de Agotado o No disponible

Texto etiqueta de descuento

Permite mostrar un texto después del porcentaje de descuento en la etiqueta (ej: -20% OFF).

Nota: Este texto también será aplicado en la etiqueta se puede estar visible en la página de producto, junto al precio. Si no deseas mostrar un texto, sólo deja el campo vacío.

Umbral para mostrar etiqueta Nuevo

Permite definir la cantidad de días en que un producto se considerará como “nuevo”, y por ende, mostrar la etiqueta respectiva.

Nota: Si no quieres mostrar esta etiqueta, sólo debes definir definir cero (0).

Texto para etiqueta Nuevo

Permite modificar el texto que será mostrado en esta etiqueta.

Etiqueta Nuevo - Color de fondo y texto

Permite definir los colores del fondo y el texto para la etiqueta Nuevo.

Etiqueta de estado - Color de fondo y texto

Permite definir los colores del fondo y el texto para la etiqueta que se mostrará en productos que posean estado No disponible o Agotado.

Aplicar estilo de tarjeta

Permite aplicar un estilo de “Tarjeta” o “caja” a todos los bloques de producto del tema. Al habilitar esto, todas las opciones a continuación serán disponibles para ser utilizadas.

---

Formulario de producto

Las opciones en esta sección aplican mayoritariamente el subcomponente Formulario de producto que está disponible dentro de los componentes Plantilla de producto y Producto único del tema.

Visualización de opciones de producto

Permite definir cómo se mostrarán las variantes de una opción de producto de tipo opción:

Esconder etiqueta de disponibilidad para stock de producto

Esta opción está relacionada al subcomponente Stock que está disponible en los componentes Plantilla de producto y Producto único del tema.

Permite mostrar o esconder la etiqueta que hace referencia a la “disponibilidad” de un producto. El texto dentro de ella será en base a lo siguiente:

• Disponible en stock para variantes que cuentan con unidades.
• Agotado para productos que poseen cero unidades (0).

Mostrar cantidad exacta de stock

Permite cambiar el comportamiento de la etiqueta de Stock mencionada anteriormente y en vez de un texto, se mostrará el número de unidades de la variante, como por ejemplo: 10 unidades en stock.

Nota: Para variantes que posean la opción Stock ilimitado habilitada, se mostrará siempre el texto “Disponible en stock”.

Esconder variantes sin stock

Esta opción permite esconder todas las variantes que no posean stock, del listado de opciones de producto del tema, por ende, no podrán ser seleccionadas.

Esconder ubicaciones sin stock

This option allows you to hide the Locations that don’t have stock, that are visible within the Stock locations panel that’s displayed when clicking on its respective button.

Esta opción permite esconder las Ubicaciones que no posean stock, las cuales son visibles en el panel de Stock en múltiples ubicaciones que se despliega al hacer click en su botón respectivo.

Nota: Para más información sobre la funcionalidad de Inventario en múltiples ubicaciones, puedes leer este artículo.

Título y texto mensaje Agotado

Estos dos campos permiten personalizar el contenido del mensaje que se muestra para productos que estén Agotados.

Título y texto mensaje No disponible

Estos dos campos permiten personalizar el contenido del mensaje que se muestra para productos que posean estado No disponible.

Habilitar botón de Contacto

Permite mostrar o esconder el botón en el mensaje que se mostrará en productos que estén Agotados o posean estado No disponible, el cual llevará a los clientes a la página de contacto de tu tienda.

Activar botón de WhatsApp

Permite mostrar o esconder un botón en el mensaje que se mostrará en productos que estén Agotados o posean estado No disponibles. Al hacer click en este botón abrirá la Aplicación de WhatsApp en un dispositivo móvil o WhatsApp Desktop en un dispositivo de escritorio.

Nota: El número de WhatsApp conectado a este botón será el que haya sido agregago en el panel de administración, dentro de Configuración > General > Preferencias > Redes Sociales.

---

Botón de WhatsApp

Esta sección permite mostrar un botón flotante de WhatsApp en todas las plantillas del tema. Las opciones disponibles para personalizarlo son las siguientes:

Activar botón de WhatsApp

Permite mostrar o no el botón.

Posición del botón

Permite definir la posición en que se mostrará el botón en el navegdor. Esta siempre será en alguna de las esquinas.

Colores

Encontrarás las siguientes opciones de color para personalizar el botón:

Mensaje de llamado a la acción

Permite mostrar un texto a la izquierda o derecha del botón para incentivar a los clientes a hacer click en él o para que posea mayor presencia. La ubicación de este texto dependerá de lo que selecciones en la opción Posición del botón.

Ocultar mensaje después de cerrarlo

Permite definir la cantidad de días que transcurrirán para mostrar nuevamente el mensaje, para un usuario que haya optado por cerrarlo.

Colores del mensaje

Las siguientes opciones te permiten personalizar los colores de este mensaje:

---

Notificación de Agregar al Carro

Esta sección permite mostrar un mensaje notificando a los clientes que los productos que agregan son efectivamente añadidos al carro de compras.

Este mensaje anulará cualquier comportamiento y/u opciones de redireccionamiento que hayan sido definidas en el panel de administración, dentro de Configuración > Checkout > Preferencias.

Habilitar notificación

Permite habilitar la notificación. Si se deshabilita, considerará las siguientes opciones al hacer click en el botón de Agregar al carro:

Posición de notificación

Permite definir la posición en que se mostrará la notificación. Esta siempre será al lado derecho de la ventana del navegador.

---

Popup de verificacición de edad

Esta sección permite mostrar un mensaje de estilo Popup el cual estará centrado verticalmente y horizontalmente en el navegador. Incluso cuando su nombre está relacionado y hace referencia a los mensajes usuales de verificación de edad, puedes utilizarlo eventualmente para lo que estimes conveniente.

Las opciones para que puedas personalizar este mensaje son las siguientes:

Habilitar mensaje Popup

Permite habilitar el mensaje popup. Al hacerlo, se mostrará en todas las páginas de la tienda.

Título

Títlo que se mostrará el inicio del mensaje.

Descripción

Texto que se muestra bajo el título del mensaje y previo a los botones.

Botón aceptar

Texto del botón con el cual los clientes pueden aceptar el mensaje.

Botón rechazar

Texto del botón con el cual los clientes pueden rechazar o declinar el mensaje.

Enlace de redireccionamiento

Permite agregar un enlace para redireccionar a los clientes a otra página cuando hagan click en el botón Rechazar.

Opciones de color

The following colors allow you to customize the style of the message:

Los siguientes colores te permitirán personalizar el estilo del mensaje:

Nota: El color de texto de los botones serán ajustados automáticamente en base al contraste que requieran.

---

Blog

Esta sección permite personalizar ciertos aspectos relacionados al Blog y los Artículos del Blog dentro del tema.

Mostrar fecha en artículos

Permite mostrar la fecha de publicación para todos los artículos del Blog, antes del título.

Formato de fecha

Permite definir el formato en que se mostrará la fecha de haber sido habilitada, en base a las siguientes opciones:

• dd-mm-yyyy: Día - Mes - Año, ej: 31-10-2024
• mm-dd-yyyy: Mes - Día - Año, ej: 10-31-2024
• yyyy-mm-dd: Año - Mes - Día, ej: 2024-10-31

Mostrar descripción breve en artículos

Permite mostrar un breve extracto del contenido de cada artículo del Blog, lo cual considerará una cantidad máxima de 50 palabras, eliminando imágenes, videos o cualquier otro elemento de ese tipo.

Mostrar enlace/botón en artículos

Permite mostrar un enlace/botón al final (abajo) de cada artículo. Si se deshabilita, la imagen y el título serán clickeables de igual forma para que los clientes puedan ir y leer el artículo.

Usar estilo de contorno en enlace/botón

Al habilitar, el enlace/botón se mostrará un borde alrededor. Si se deshabilita, el botón tendrá un color de fondo relleno.

---

Proceso de compra

Esta sección te permite personalizar ciertos aspectos aplicados a las páginas del proceso de compra: Carro, Checkout, Revisón del pedido y Compra exitosa.

Logo

Permite subir un Logo a la sección Cabecera que se muestra al principio de todas estas páginas. Si no subes un Logo aquí, se mostrará el que hayas definido en Configuración > General > Marca. Si ninguno de estos ha sido subido, se mostrará el Nombre de la tienda.

Altura del logo (escritorio)

It allows you to define the height of any of the Logos that can be uploaded and/or displayed in the Header, for Desktop devices with a width equal or higher than 576px.

Permite definir la altura de cualquier de los Logos que hayan sido subidos o que se muestren en la Cabecera, para dispositivos de escritorio con un ancho igual o mayor a 576px.

Altura del logo (móvil)

Permite definir la altura de cualquier de los Logos que hayan sido subidos o que se muestren en la Cabecera, para dispositivos móviles con un ancho igual o menor a 575px.

Mostrar mensaje en página de éxito

Permite mostrar un mensaje adicional en la página final del proceso de compra (último paso).

Texto del mensaje

Permite definir el texto que se mostrará en el mensaje.

Enlace del mensaje

Permite mostrar un acción bajo el texto del mensaje para que los clientes interactúen con él, en base a las siguientes opciones:

• Correo de ubicación principal: Mostrará el correo de la Ubicación que haya sido definida cómo Principal / Por defecto dentro de Configuración > General > Ubicaciones.
• Correo general: Mostrará el correo que se haya definido en el panel de administración, dentro de Configuración > General > Emails, al final de dicha sección.
• Enlace a página de contacto: Mostrará un enlace con estilo de botón, el cual llevará a los clientes a la página de contacto de tu tienda al hacer click.
• No mostrar: No se mostrará ningún tipo de enlace o acción bajo el texto del mensaje.

Colores de contenido

Pemite seleccionar el Pack de colores a utilizar en todas las páginas del proceso de compra.

---

Códigos personalizados

Esta sección y sus opciones te permiten agregar códigos especiales o externos en el tema, de forma tal que no tengas necesariamente que editar su código de forma manual. Esto es útil y comúnmente utilizado para scripts o herramientas como por ejemplo:

• Google Analytics
• Google Tag Manager
• Integración manual de Mailchimp
• El Pixel de Facebook
• El Pixel de TikTok
• Otras herramientas de rendimiento y/o métricas como Hotjar, CrazyEgg, etc.

Nota: Para instalar, agregar y/o utilizar herramientas como Google Analytics, Reseñas de Clientes de Google, Pixel de Facebook y Pixel de TikTok, Jumpseller ya posee los campos necesarios en el panel de administración, dentro de Configuración > General > Preferencias > Configuración de Analytics.

Las opciones disponibles son las siguientes:

Código head superior

Permite agregar código externo al principio de la apertura de la etiqueta <head> del código del tema.

Código head inferior

Permite agregar código externo al final del cierre de la etiqueta <head> del código del tema.

Código body superior

Permite agregar código externo al principio de la apertura de la etiqueta <body> del código del tema.

Código body inferior

Permite agregar código externo al final del cierre de la etiqueta <body> del código del tema.

Nota: estos campos no soportan el uso de etiquetas liquid. Por ende, si deseas utilizar algo así, necesariamente tendrá que ser editando directamente el códido del tema.

---

Deshabilitar funciones de compra

Esta sección te permote controlar el comportamiento de ciertas funcionalidades a través del tema relacionadas a opciones de compra para tus clientes.

Deshabilitar precios de productos

Permite esconder los precops para todos los productos a través del tema.

Nota: Si no deshabilitas la siguiente opción, los clientes podrán comprar productos incluso cuando los precios no sean visibles.

Deshabilitar todas las funcionalidades de compra

This option allows you disable all the shopping features across the theme, like the following:

Esta opción permite deshabilitar todos las funcionalidades de compra a través del tema, como por ejemplo las siguientes:

• Item de Carro en Cabecera: el que está disponible en la parte derecha de la Cabecera del tema.
• Botones de Agregar al carro: en la página de producto, así como también botones en bloques de producto, incluso cuando hayan sido habilitados para ser mostrados en su configuración respectiva.

Nota: Al habilitar esta opción, se mostrará v en las páginas de producto de la tienda, el cual podrás personalizar con las opciones que se encuentran abajo.

Deshabilitar compras - Título

Este campo permite definir el título del mensaje que aparecerá al deshabilitar las funcionalidades de compra del tema.

Deshabilitar compras - Texto

Este campo permite definir el título del mensaje.

Mostrar botón de contacto en mensaje

Permite mostrar o esconder un botón que llevará a los clientes a la página de contacto de la tienda al hacer click.

Mostrar botón de WhatsApp en mensaje

Permite mostrar o esconder un botón que puede ser desplegado en el mensaje. Al hacer click en este botón abrirá la Aplicación de WhatsApp en un dispositivo móvil o WhatsApp Desktop en un dispositivo de escritorio.

Nota: El número de WhatsApp conectado a este botón será el que haya sido agregago en el panel de administración, dentro de Configuración > General > Preferencias > Redes Sociales.