Configuración principal del tema

Te recomendamos que también visites el artículo sobre cómo funcionan los componentes dentro de nuestros temas.

Esta sección, a la que puedes acceder desde el panel lateral superior izquierdo del Editor Visual, contiene varias opciones para personalizar tu tema, con subsecciones como Diseño, Colores, Fuentes, entre otras.

Muchas de las opciones dentro de ella se aplican de forma general a los componentes y subcomponentes del tema, y en algunos casos pueden ser reemplazadas por opciones adicionales dentro de ellos.

A continuación detallamos todas estas secciones, qué hacen y qué puedes lograr con ellas.

Colores

Esta sección contiene lo que llamamos Paquetes de colores, que son grupos de colores relacionados y aplicados a múltiples elementos dentro del tema.

A continuación detallamos algunos aspectos sobre ellos para que sepas cómo sacarle el máximo provecho a esta función.

Paquetes

El tema viene con 3 paquetes preinstalados, que se aplican en los múltiples componentes disponibles para usar.

Contenido

El primero se llama Contenido y se utiliza -casi- en todos los componentes del tema por defecto.

Por lo tanto, si por ejemplo deseas cambiar el diseño de tu tienda para que tenga un aspecto muy “oscuro”, este es el paquete que necesitas modificar y adaptar los colores, para que se aplique en todas las secciones.

Oscuro

Este paquete se usa principalmente en subcomponentes del tema como los siguientes:

• Diapositiva → subcomponente de Barra superior
• Diapositiva → subcomponente de Slider
• Banner → subcomponente de Banners
• Banner grande

Su propósito principal dentro del tema es proporcionar un estilo “oscuro”, con sus respectivos colores de contraste de contenido, que es el caso de subcomponentes como Diapositiva, donde hay una imagen que actúa como fondo con contenido encima de ella.

Claro

Este paquete se usa, por ejemplo, en el componente Pie de Página de algunos temas y también se aplica por defecto en los siguientes componentes y/o secciones:

• Newsletter
• Reseñas de productos
• Migas de pan

Opciones de los paquetes

Dentro de cada Paquete de colores encontrarás las siguientes opciones:

• Fondo: Define el color de fondo de la sección donde se aplica.
• Texto principal: Define el color para los elementos de mayor relevancia dentro del tema, como los títulos.
• Texto secundario: Define el color para los elementos de relevancia secundaria dentro del tema, como descripciones, textos, entre otros.
• Enlaces: Define el color para los elementos de tipo enlace, como por ejemplo uno dentro del cuerpo de texto de una página.
• Fondo del botón principal: Define el color de fondo para los botones con mayor prioridad dentro del tema, como el de Añadir al carrito.
• Texto del botón principal: Define el color del texto para los botones con mayor prioridad dentro del tema.
• Fondo del botón secundario: Define el color de fondo para los botones de relevancia secundaria dentro del tema, como por ejemplo el que se muestra en un producto con estado Agotado, que muestra el texto “Ver detalles”.
• Texto del botón secundario: Define el color del texto para los botones de relevancia secundaria dentro del tema.

Colores sugeridos

También dentro de cada Paquete de colores, después de todas sus opciones, encontrarás una sección con múltiples conjuntos de colores predefinidos que puedes usar, creados manualmente por nosotros basándonos en un buen uso del contraste de colores y prácticas estándar conocidas dentro del ecosistema de comercio electrónico.

Lista de deseos

Dentro de este grupo encontrarás otros colores que se aplican a diferentes elementos de la lista de deseos:

• Ícono: Este color se aplica al pasar el cursor sobre el ícono para agregar productos a la Lista de deseos.
• Ícono (activo): Este color se aplica cuando un producto ya está en la Lista de deseos.
• Fondo: Este color se aplica al fondo del ícono para agregar productos a la Lista de deseos.

Otros colores

Dentro de este grupo encontrarás otros colores que se aplican a diferentes elementos del tema:

• Descuento: Este color se aplica a todas las instancias relacionadas con un descuento (promoción) dentro del tema, como por ejemplo las siguientes:
  • Precio del producto con descuento aplicado en bloques de productos y páginas de productos.
  • Etiqueta de oferta que se muestra sobre la imagen de un bloque de producto cuando tiene un descuento aplicado.
• Texto de la etiqueta de descuento: Este color se aplica al texto de la etiqueta de oferta mencionada anteriormente.
• Valoraciones: Este color se aplica a las estrellas de valoración de los productos que tienen reseñas de clientes en la tienda.

Nota: La función de Reseñas de productos en Jumpseller solo está disponible para planes Pro y superiores. Para más información sobre esta función, puedes visitar el siguiente artículo.

Fuentes

Esta sección te permite personalizar las fuentes del tema, que está conectada a la biblioteca de Google Fonts y te dará acceso a más de 1.700 fuentes.

A continuación, explicamos en detalle cómo se aplica cada opción dentro del tema.

Selección de fuente

Dentro de este grupo podrás definir las fuentes para varios elementos generales del tema:

Principal

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

• Títulos de componentes como Diapositiva, Banner, Productos destacados, Encabezado de plantilla, Testimonios, Contenido multimedia con texto, etc.
• El nombre del producto que está dentro del subcomponente Título del producto.

Secundaria

Esta fuente se aplica a todos los textos restantes del tema. Ejemplos de esto son:

• Textos y enlaces dentro del Encabezado, Menú de escritorio y Menú móvil.
• Descripción en un subcomponente Diapositiva y/o Banner.
• Texto en un componente Contenido multimedia con texto.
• Descripción del producto en el subcomponente con el mismo nombre.
• Texto o descripción disponibles en componentes como Productos destacados, Últimos productos, entre otros.

Nombre de la tienda

Esta fuente se aplica a todos los lugares donde se muestra el Nombre de la tienda, que será visible si no has subido un Logotipo a través de las opciones disponibles en los componentes Encabezado y Pie de página o en el panel de administración de tu tienda en Configuración > General > Marca.

Las secciones donde aparecerá el nombre de la tienda son las siguientes:

• Encabezado y Menú móvil.
• Pie de página.
• Encabezado de las páginas del proceso de compra (ej. Carrito, Caja), cuando no se ha subido ningún logotipo en la sección Marca o dentro de la sección del Proceso de compra.

Fuente de los botones

Esta fuente se aplica a todos los botones del tema.

Tamaños

Tamaño base de fuente

Esta opción te permite definir y modificar el tamaño de fuente “general” del tema.

Los temas están diseñados usando unidades escalables, lo que significa que una vez que aumentes o disminuyas la cantidad de píxeles en esta opción, varios elementos serán afectados inmediatamente por ello.

Diseño

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

Nombre de la tienda

Nombre personalizado

Esta opción te permite definir y mostrar un nombre diferente al definido en el panel de administración de la tienda en Configuración > General > Preferencias > Nombre de la tienda.

Por lo tanto, si por ejemplo no has subido un logotipo en ninguna de las instancias descritas anteriormente, lo que agregues en este campo se mostrará en todas esas secciones.

Tamaño

Esta opción te permite definir el tamaño para el Nombre de la tienda, que se aplicará en todas las secciones donde se muestre.

Nota: el tamaño se aplicará al nombre agregado dentro de este campo o al definido en Configuración > General > Preferencias > Nombre de la tienda.

Peso

Esta opción te permite modificar y ajustar el peso del Nombre de la tienda.

Nota: El peso dependerá de las variables disponibles de la fuente que hayas definido para la opción Nombre de la tienda, dentro de Configuración del tema > Fuentes.

Estilos del tema

Ancho máximo del contenedor

Esta opción te permite definir el ancho máximo que tendrá el contenedor del tema.

El contenedor es una sección que envuelve todo el contenido de una página y/o componente, y determina cómo se mostrarán y organizarán los elementos que están dentro.

Al cambiar su ancho, las dimensiones de elementos como por ejemplo las imágenes variarán, lo que tendrá un efecto en los tamaños -óptimos- que necesitarás subir.

Los tamaños disponibles para esta opción son los siguientes:

• Pequeño: el contenedor tendrá un ancho máximo de 1320px.
• Mediano: el contenedor tendrá un ancho máximo de 1620px.
• Grande: el contenedor tendrá un ancho máximo de 1920px.
• Extra grande: el contenedor tendrá un ancho máximo de 2220px.
• Ancho del navegador: el contenedor se extenderá al ancho máximo disponible del navegador en el que se visualiza la tienda.

Todos los componentes del tema se verán afectados por lo que elijas aquí, pero encontrarás algunos con su propia configuración de Ancho, que al instalar el tema vienen con la opción Predeterminado seleccionada, en cuyo caso respetará inicialmente el valor seleccionado aquí. Puedes cambiar la opción Ancho en ellos para que se comporten de manera diferente.

Espaciado

Esta opción permite definir si los componentes y su contenido mostrarán un espacio o separación entre ellos, o si no deseas que tengan ninguno.

Esto afectará, por ejemplo, el espacio derecho e izquierdo entre el contenido del componente y los lados del navegador.

Además, algunos bloques también se comportarán de manera diferente según lo que elijas aquí. Por ejemplo, si defines Ninguno, los Banners, Productos, etc., se verán y aparecerán muy juntos, lo que te permite generar un tipo de diseño diferente.

Esquinas redondeadas

Esta opción te permite definir si las secciones y elementos tendrán esquinas redondeadas o no.

Ejemplos de cómo se aplica esto se pueden notar en:

• Un componente Slider.
• Una imagen de bloque de producto y página de producto.
• Una imagen de un componente Contenido multimedia con texto.
• Banners y Banner grande.

Botones

Tamaño de fuente

Encontrarás dos opciones para definir el tamaño del texto para la mayoría de los botones del tema, tanto para dispositivos de escritorio como móviles.

Estilo

Esta opción te permite modificar el estilo de la mayoría de los botones del tema.

Formato del texto

Esta opción te permite definir cómo se mostrará el texto de todos los botones del tema, basándose en lo siguiente:

• Original: los textos se mostrarán tal como están escritos originalmente.
• TODO EN MAYÚSCULAS: los textos se forzarán a mostrarse en mayúsculas, ej. TEXTO DEL BOTÓN.
• Texto con mayúsculas iniciales: los textos se forzarán a mostrarse con la primera letra de cada palabra en mayúscula, ej. Este Es El Texto Del Botón.
• minúsculas: los textos se forzarán a mostrarse siempre en minúsculas, ej. este es el texto del botón.

Transición

Esta opción permite habilitar una transición para todos los botones del tema, lo que hará visibles nuevas opciones para personalizarla:

• Estilo: te permite definir qué transición aplicar:
  • Borde: el botón aumentará el borde a su alrededor para hacerlo parecer más grande.
  • Ancho: el botón aumentará los lados izquierdo y derecho.
  • Sombra: se mostrará una sombra en la parte posterior del botón.
  • Ripple: el color de fondo para el estado “hover” aparecerá desde el lado izquierdo del botón.
• Tamaño: te permite definir el tamaño de la transición, que dependerá del Estilo que elijas primero.

Bordes

Este grupo de opciones te permite personalizar el diseño y apariencia de las líneas dentro del tema. Estas se pueden encontrar, por ejemplo, en las siguientes secciones y/o componentes:

• Borde que puede habilitarse dentro de los componentes Encabezado y Menú de escritorio.
• Componente Divisor de línea que puede agregarse en cualquier diseño del tema, así como en el Pie de página.
• Estilos de borde que pueden habilitarse en subcomponentes como un Banner o Bloque de confianza.

Las opciones para personalizar estos elementos son las siguientes:

Estilo

Permite definir el estilo para todas las líneas, bordes y separadores dentro del tema.

Grosor

Permite determinar el grosor para todas las líneas y bordes dentro del tema:

• Fino: tendrá un grosor de 1px.
• Grueso: tendrá un grosor de 2px.

Carruseles de la tienda

Este grupo de opciones te permite definir el estilo de los elementos de navegación de un Carrusel en todo el tema.

Estilo de puntos del tema

Permite definir el estilo de los “puntos de navegación” (o marcadores) con los que los usuarios pueden navegar y controlar un Carrusel dentro del tema.

Tamaño de flechas y puntos

Permite definir el tamaño de las flechas y los puntos de navegación (o marcadores) para todos los carruseles del tema.

Íconos de la tienda

Los íconos utilizados en los temas de Jumpseller desde la versión 4.0.0 en adelante provienen de la biblioteca Phosphor Icons, que tiene más de 9.000 íconos para elegir.

Este grupo de opciones te permitirá controlar y definir cómo se ven y cómo se aplican dentro del tema.

Estilo

Esta opción te permitirá definir el estilo para la mayoría de los íconos usados en el tema. Los estilos disponibles son los siguientes:

• Negrita
• Relleno
• Ligero
• Regular
• Fino

Ícono del carrito

Esta opción te permite definir el ícono de “Carrito” que se usará en todo el tema. Las secciones en las que este ícono puede ser visible son las siguientes:

• En el lado derecho del Encabezado, junto con el número de productos.
• En el subcomponente Menú del carrito que forma parte del Encabezado, solo si dentro de sus configuraciones has habilitado mostrar el ícono.
• En los botones Añadir al carrito en los bloques de productos y la página de producto, si has habilitado mostrar el ícono en la opción detallada a continuación.

Mostrar ícono del carrito en botones

Como se mencionó anteriormente, esta opción te permite mostrar el ícono del carrito en los botones Añadir al carrito dentro de los bloques de productos y las páginas de productos.

Animaciones

Este grupo de opciones te permite habilitar una animación para la mayoría -si no todas- las secciones y componentes del tema, con el fin de añadir movimiento al diseño de tu tienda y hacerla más atractiva para tus clientes.

Habilitar animaciones

Al habilitar esto, las siguientes opciones estarán disponibles para que las personalices:

• Tipo de animación: permite definir la posición desde la que el componente se animará y aparecerá.
• Hacer la animación una sola vez: cuando está habilitado, la animación solo ocurrirá cuando hagas scroll hacia abajo en la página y el componente aparezca. Por el contrario, cuando está deshabilitado, la animación ocurrirá cada vez que hagas scroll hacia abajo y hacia arriba en la página.
• Retraso de la animación: permite definir el tiempo (en milisegundos) que tardará en ocurrir la animación, una vez que el componente entra en el área visible (ventana del navegador).

También encontrarás una opción dentro de los componentes llamada Personalizar opciones, muy probablemente dentro del grupo Apariencia, con la que podrás personalizar las transiciones específicamente para ellos y anularán las de esta sección.

Nota: Si deshabilitas la opción Habilitar animaciones del tema, afectará a todos los componentes del tema. Por lo tanto, incluso cuando en uno o más componentes hayas habilitado la opción Personalizar opciones de animación, las animaciones no tendrán ningún efecto, ya que la opción aquí en Configuración del tema las controla todas.

Lista de deseos

Nota: Esta función solo está disponible para tiendas suscritas al plan Pro y superiores. Para más información puedes visitar el siguiente artículo.

Al marcar la opción Habilitar Lista de deseos, la función Lista de deseos se habilitará en todo el tema.

Al hacerlo, el grupo de opciones Mostrar en estará disponible para usar, para que puedas definir en qué secciones se mostrará:

Encabezado

Muestra los enlaces de la Lista de deseos en el Encabezado del tema, para que los usuarios puedan navegar directamente a la sección correspondiente en su página de Cuenta de cliente.

Bloques de productos

Muestra el ícono de Lista de deseos en los bloques de productos. Esto dará a los usuarios la posibilidad de agregar rápidamente productos a su Lista de deseos, sin necesidad de acceder a la página de ninguno de ellos.

Página del producto

Muestra el botón de Lista de deseos (ícono y texto) en la página del producto.

Esto forma parte del subcomponente Lista de deseos, que es hijo del componente Plantilla de producto, ubicado en el diseño Producto del tema.

Nota: Los usuarios podrán agregar un producto a la Lista de deseos solo cuando hayan iniciado sesión.

Puedes leer más sobre esto en este artículo.

Migas de pan

Las Migas de pan son la sección que puede mostrarse al inicio de diseños como por ejemplo Categorías, Productos, Páginas y Página de contacto.

Permite a los usuarios conocer el camino que han seguido para llegar a una determinada página. Las opciones para personalizarlas son las siguientes:

Mostrar en

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

• Todos los dispositivos: en todo tipo de dispositivos.
• Solo escritorio: en dispositivos con un ancho igual o mayor a 768px.
• Solo móvil: en dispositivos con un ancho igual o menor a 767px.
• No mostrar: no mostrará la sección en ningún tipo de dispositivo.

Alineación

Encontrarás dos opciones para definir la alineación de la lista para dispositivos de escritorio y móviles.

Márgenes

Encontrarás dos opciones para definir el margen interno superior e inferior (espacio) de la sección.

Colores del contenido

Permite elegir el Paquete de colores para las Migas de pan.

Encabezados

El Encabezado es una sección que se muestra en casi todos los componentes del tema, y generalmente está compuesta por los siguientes elementos:

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

Las opciones dentro de esta sección de la Configuración del tema afectarán a todos los lugares donde haya un Encabezado presente o disponible para mostrarse:

Alineación

Encontrarás dos opciones para definir la alineación de la lista para dispositivos de escritorio y móviles.

Títulos

Este grupo de opciones te permite definir el diseño y apariencia de los títulos para todas las secciones de Encabezado del tema:

Tamaño

Define el tamaño para todos los títulos dentro de los Encabezados del tema, basándose en cálculos predefinidos directamente afectados por la opción Tamaño base de fuente ubicada en Configuración del tema > Fuentes > Tamaños.

Al elegir Personalizado, podrás ajustar manualmente el tamaño para dispositivos de escritorio y móviles de forma independiente.

Peso

Define el peso para todos los títulos dentro de los Encabezados del tema.

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

Espaciado entre letras

Permite ajustar el espacio entre letras.

Todo en mayúsculas

Permite forzar que todos los títulos de los Encabezados se muestren en letras mayúsculas, incluso cuando no fueron escritos así: ej. TÍTULO.

Mostrar línea debajo

Muestra una línea o borde debajo de los títulos, para generar una división más clara con el contenido que viene debajo.

Subtítulos

Este grupo de opciones proporciona las mismas opciones de diseño que los Títulos.

La diferencia aquí es que las opciones para definir el tamaño de estos solo se mostrarán si eliges Personalizado en la opción de tamaño para Títulos.

Al hacerlo, se mostrarán dos opciones para definir el tamaño para dispositivos de escritorio y móviles. Para cualquier otra opción diferente a Personalizado, los subtítulos se calcularán basándose en porcentajes relacionados con el tamaño de los títulos, de la siguiente manera:

• 40% del tamaño del título en dispositivos de escritorio.
• 30% del tamaño del título en dispositivos móviles.

Descripciones

Aquí solo encontrarás la opción para controlar el Tamaño de las descripciones, que también muestra opciones para controlarlo en dispositivos de escritorio y móviles al elegir Personalizado.

Aspectos como el peso y las mayúsculas se pueden agregar y ajustar a través de los respectivos campos en los que puedes añadir una descripción en una sección de Encabezado.

Nota: El tamaño de las descripciones también se verá directamente afectado por el Tamaño base de fuente definido en Configuración del tema > Fuentes > Tamaños.

Filtros

Esta sección proporciona varias opciones para que personalices y definas cómo funcionan los Filtros dentro del tema.

Para saber más sobre cómo funcionan los filtros en Jumpseller, visita este enlace.

Nota: La función de Filtros solo está disponible para planes Premium o superiores.

Visualización

Mostrar en escritorio

Define si la lista de filtros debe mostrarse en el lado izquierdo del subcomponente Feed de productos, que está disponible para usar en los diseños de Categoría y Resultados de búsqueda, como puede verse en la imagen al inicio de esta sección.

Esto solo se reflejará en dispositivos Desktop con 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, que puede abrirse a través de un botón que se mostrará dentro de la sección Encabezado.

Nota: Si esta opción está deshabilitada, el comportamiento sería el mismo que en dispositivos Móviles.

Ejemplo del panel lateral de Filtros abierto en un dispositivo Desktop, cuando se ha deshabilitado su visualización junto al Feed de productos.

Aplicar filtros al hacer clic

Esta opción se mostrará cuando la anterior esté habilitada y permite aplicar los filtros instantáneamente cuando los usuarios hacen clic en ellos. Por lo tanto, la página se recargará automáticamente.

Al habilitarlo, habrá ciertos aspectos que cambiarán dentro de la página que debes conocer:

• Al hacer clic en un filtro, la página se recargará automáticamente.
• Los botones Aplicar filtros se ocultarán.
• Se mostrará un nuevo botón en la sección donde aparece la subsección Filtrar por precio, que solo funcionará para estos.

Nota: lo mencionado en la lista anterior solo ocurrirá en dispositivos Desktop. Para dispositivos Móviles, la funcionalidad de los filtros permanecerá igual, teniendo que hacer clic en el botón Aplicar filtros dentro del panel lateral.

Tipos

Dentro de este grupo encontrarás opciones para mostrar u ocultar diferentes tipos de filtros.

Mostrar filtro ‘Ordenar por’

Esta opción te permite mostrar u ocultar el selector con el que los clientes pueden reordenar la lista de productos, basándose en lo siguiente:

• Posición: El orden está determinado por la posición en la que los productos están listados dentro de una Categoría. En el caso de la página de Resultados de búsqueda, se determinará según el orden en que los productos coincidan con la palabra clave de búsqueda utilizada.
• Nombre: A a Z: El orden de los productos se determinará de forma descendente.
• Nombre: Z a A: El orden de los productos se determinará de forma ascendente.
• Precio: De menor a mayor: Mostrará primero los productos con precios más bajos. Esto solo considerará los precios originales y no los descuentos.
• Precio: De mayor a menor: Mostrará primero los productos con precios más altos. Esto solo considerará los precios originales y no los descuentos.
• Fecha: Más recientes primero: Reordenará los productos mostrando los más recientes añadidos a una categoría. En el caso de los Resultados de búsqueda, mostrará primero los productos más recientes añadidos a la tienda.

Nota: para las categorías, puedes elegir la opción predeterminada de este selector yendo a la sección Propiedades, dentro de sus respectivas configuraciones en Productos > Categorías.

Mostrar subcategorías

Define si las subcategorías (niveles internos) de una categoría se mostrarán junto con el resto de los filtros.

Nota: Esto solo se reflejará en los diseños de Categoría.

Mostrar filtro por precio

Permite mostrar o no los campos con los que los clientes pueden filtrar productos según un rango de precio mínimo y máximo.

Los rangos de precios posibles se determinarán según la colección de productos listados dentro de un diseño de Categoría y/o Resultados de búsqueda.

Otras opciones

Mostrar contador de filtros

Permite mostrar la cantidad de productos de cada filtro entre paréntesis, ej. Rojo (2).

Limitar cantidad de ítems en filtros

Esta opción te permite limitar la cantidad de ítems dentro de todos los grupos de filtros.

Esto es útil si la lista dentro de tus filtros es demasiado larga y quieres mostrar solo algunos de sus ítems primero.

Al habilitar esta opción, se mostrará un enlace + Ver más al final de cada grupo de filtros.

Al hacer clic, el grupo se expandirá mostrando todos los ítems restantes, y el texto del enlace cambiará a - Ver menos. En un segundo clic, el grupo volverá a colapsar y ocultará los ítems.

Nota: esto no afectará al filtro Ordenar por.

Cantidad de ítems visibles

Al habilitar la opción anterior, esta aparecerá.

Permite definir la cantidad inicial de ítems de filtros a mostrar dentro de los grupos.

Por ejemplo, si uno de tus filtros tiene un total de 12 ítems y dentro de esta opción defines 5, los 7 ítems restantes se ocultarán hasta que el usuario haga clic en el enlace + Ver más.

Habilitar filtros colapsables

Esta opción hace que toda la lista de filtros funcione como un Acordeón, haciéndolos colapsables y permitiendo que se abran al hacer clic.

Al habilitarla, se mostrará una nueva opción llamada Visualización colapsable predeterminada, que tendrá las siguientes dos opciones:

1. Todos abiertos: al cargar la página, todos los filtros aparecerán abiertos y los usuarios podrán cerrarlos uno a uno.
2. Todos cerrados: al cargar la página, todos los filtros aparecerán cerrados y los usuarios deberán hacer clic en sus títulos para abrirlos.

Bloque de producto

Un Bloque de producto es la “tarjeta” de vista previa de un producto que puede mostrarse en múltiples diseños de tu tema. Contiene información variada sobre cada producto, para que los clientes conozcan los detalles sobre ellos.

A continuación, explicamos todas las opciones posibles para personalizarlos.

Apariencia

Dentro de este grupo encontrarás opciones para personalizar el diseño general y aspecto de todos los bloques de productos del tema y en las diferentes secciones y componentes que los muestran.

Orden del contenido

Define el orden de los elementos que se muestran dentro del área de contenido, que es la que va justo debajo o después de la imagen del producto.

Aquí puedes reordenar las opciones arrastrándolas hacia arriba y hacia abajo, para definir la posición que te parezca mejor.

Algunas cosas a considerar son:

• Los Atributos se mostrarán si un producto tiene un SKU y/o Marca definidos, y si ambos están habilitados dentro del grupo Información que se encuentra más adelante.
• El Precio se mostrará siempre que Deshabilitar precios de productos esté desmarcado.
• Los Colores se mostrarán si un producto tiene opciones o variantes de tipo color.
• La Valoración se mostrará si tu tienda tiene el plan que permite Reseñas y si un producto tiene más de una reseña publicada.

Productos por fila en escritorio

Define la cantidad de productos por fila horizontal que se mostrarán para dispositivos Desktop.

La forma en que esto afecta a los productos se basa en los detalles de la siguiente tabla:

Valor de la opción	Ancho del 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
3	≥ 576px	3

Productos por fila en móvil

Define la cantidad de productos por fila horizontal que se mostrarán para dispositivos Móviles con un ancho igual o menor a 575px.

Nota: al elegir 2 productos, el tamaño de los elementos de contenido como nombre, precio, etc., disminuirá ligeramente para preservar el diseño de la información en dispositivos móviles más pequeños.

Alineación del contenido

Ejemplo de diferentes alineaciones: Izquierda, Centro y Derecha respectivamente

Define la alineación de todos los elementos dentro del área de contenido de los bloques.

Espacio entre

Permite definir si los bloques de productos tendrán un espacio o separación entre ellos.

La cantidad de espacio se determinará según lo que elijas dentro de Configuración del tema > Diseño > Estilos del tema > Espaciado.

Nota: Esta opción no será visible si Espaciado es igual a Ninguno.

Esquinas redondeadas

Permite definir si los bloques de productos tendrán esquinas redondeadas o no. La forma en que esto se aplica variará según:

• Si el Estilo de tarjeta para bloques de productos está habilitado, las esquinas se aplicarán a todo el bloque.
  • Si la opción Relleno de imagen está deshabilitada, la imagen también presentará esquinas redondeadas.
• Si el Estilo de tarjeta está deshabilitado, las esquinas solo se aplicarán a la imagen.

Habilitar Vista rápida

Permite habilitar la función Vista rápida, que se explica en esta sección.

Al habilitarlo, se mostrará un ícono en el área de imagen de los bloques de productos, que se revelará cuando los usuarios “pasen el cursor” sobre él en dispositivos de escritorio. En dispositivos móviles, siempre será visible.

Opciones del nombre

Este grupo proporciona opciones para personalizar cómo se ve el nombre de los productos dentro de los bloques.

Tamaño

Al elegir Tamaño base, el tamaño del nombre se determinará por lo definido en la opción Tamaño base de fuente.

Al elegir Personalizado, podrás ajustar manualmente el tamaño para dispositivos de escritorio y móviles, respectivamente.

Peso

Permite ajustar el peso del nombre del producto dentro de los bloques.

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

Espaciado entre letras

Permite ajustar el espacio entre letras para todos los nombres de bloques de productos.

Todo en mayúsculas

Permite forzar que todos los nombres de bloques de productos se muestren en letras mayúsculas, incluso cuando no fueron escritos así: ej. NOMBRE DEL PRODUCTO.

Opciones de imagen

Dimensión

Define la dimensión para todas las imágenes de bloques de productos del tema. Las opciones disponibles se definen según proporciones de aspecto, que se ejemplifican a continuación:

Opción	Proporción de aspecto	Ejemplo de imagen en píxeles
Horizontal	16:9	527 x 296
Vertical	3:4	527 x 702
Rectangular	4:3	527 x 395
Cuadrado	1:1	527 x 527

Visualización

Define cómo las imágenes del producto se adaptarán al espacio disponible relacionado con la dimensión seleccionada anteriormente.

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

Transición

Permite definir si se aplicará una transición a la imagen del bloque de producto cuando los usuarios pasen el cursor (mouseover) sobre ellas:

• Escala de grises al pasar el cursor: la imagen se presentará con su color original al inicio, y hará la transición a una versión en blanco y negro al pasar el cursor.
• Escala de grises al inicio: la imagen se presentará con un estilo en blanco y negro al inicio, y hará la transición a sus colores originales al pasar el cursor.
• Mostrar segunda imagen: La primera imagen añadida a cada producto se presentará en el estado inicial. Al pasar el cursor sobre el bloque de producto, se mostrará la segunda imagen de la lista de imágenes del producto.
• Zoom: la imagen aumentará un 10% de su dimensión original.
• Ninguna: Los productos no tendrán ninguna transición al pasar el cursor.

Nota: Mostrar segunda imagen solo funcionará si el producto tiene al menos 2 imágenes añadidas. Si no, cuando un usuario pase el cursor sobre un producto, no habrá ninguna transición.

Información

El siguiente grupo de opciones te permite definir qué detalles del producto se mostrarán en el área de contenido de los bloques.

SKU

Muestra el SKU de los productos. No se mostrará si el campo SKU está vacío en la configuración de un producto.

Marca

Muestra la Marca de los productos. No se mostrará si el campo Marca está vacío en la configuración de un producto.

Nota: El orden para estos dos atributos será primero SKU y luego Marca, y estarán separados por una línea vertical. Esta línea no se mostrará si un producto no tiene uno de los dos.

Valoraciones

Muestra las estrellas de valoración y el puntaje promedio de valoración para los productos que tienen reseñas de clientes.

Nota: La función de Reseñas de productos en Jumpseller solo está disponible para planes Pro y superiores. Para más información sobre esta función, puedes visitar el siguiente artículo.

Opciones de color

Muestra la primera opción de tipo Color junto con sus variantes.

Nota: Si un producto tiene 2 o más opciones de tipo Color, solo se mostrará la primera de la lista de opciones.

Al habilitarlo, se mostrará un grupo secundario de opciones llamado Estilos de colores con las siguientes opciones dentro:

• Posición: define la posición en la que se mostrarán los colores.
• Esquinas: define los estilos de las cajas de colores.
• Mostrar imagen en lugar del color: permite decidir mostrar la imagen de cada color (si está asignada), en lugar del “cuadro de color”.

Acciones y botones

Este grupo de opciones incluye una opción llamada Mostrar botón 'Añadir al carrito', que cuando está habilitada mostrará el botón para añadir productos al carrito desde cualquier página de la tienda, sin necesidad de acceder a sus páginas individuales (página de producto) para hacerlo.

Los productos podrán añadirse al carrito siempre que:

• No tengan estado de No disponible o Agotado.
• No tengan opciones, ej. talla, color, etc. Para los que sí las tienen, se mostrará un botón con el texto “Ver opciones” que llevará a los usuarios a la página del producto.

Además, un conjunto de opciones adicionales estará disponible para personalizar aún más esta sección:

Mostrar selector de cantidad

Muestra el selector (o campo) con el que los clientes pueden elegir las unidades que quieren añadir al carrito para un producto determinado.

Mostrar botones de estado

Muestra un botón para los productos con estado de No disponible o Agotado en la parte inferior del bloque, que también lleva a la página del producto correspondiente.

Mostrar enlace ‘Comprar ahora’

Muestra un enlace Comprar ahora debajo del botón Añadir al carrito.

Esta opción es útil para agilizar el proceso de compra, permitiendo a los usuarios completar rápidamente su compra con el mínimo de pasos, mejorando la experiencia y potencialmente aumentando las conversiones.

Este enlace funciona de manera diferente al botón, ya que tiene su propia funcionalidad que se explica a continuación:

• Llevará a los usuarios directamente a la página del Carrito o Caja, según lo que hayas definido en el panel de administración de tu tienda en Configuración > Caja > Preferencias > Después de añadir un producto al carrito.
• Si un usuario ya tiene productos añadidos al carrito, este enlace creará un nuevo ID del Proceso de compra con solo el producto en el que se hizo clic.
• Si el usuario regresa a cualquier otra página (ej. Página de inicio) antes de finalizar el proceso de compra, los productos anteriores que se añadieron seguirán estando allí.

Mostrar botón ‘Añadir al carrito’ al pasar el cursor

Esta opción permite mostrar el botón Añadir al carrito, junto con los demás elementos que se pueden habilitar, solo cuando los usuarios “pasan el cursor” sobre el bloque de producto.

Nota: Esto solo se aplicará en dispositivos Desktop. En dispositivos Móviles, el botón siempre será visible.

Opciones de precio

Este grupo de opciones te permite definir cómo se presentarán los precios en los bloques de productos.

Alineación

Define cómo se mostrarán los precios dentro de los bloques según las siguientes condiciones:

• cuando hay un descuento (promoción) disponible y visible aplicado y/o;
• cuando un producto tiene variantes y se ha definido una opción de Rango.

Las opciones disponibles son las siguientes:

• Horizontal: Los precios se alinearán uno al lado del otro, horizontalmente.
• Apilado: Los precios se apilarán uno debajo del otro, verticalmente.

Mostrar texto ‘desde/hasta’ para variantes

Muestra un texto antes de los precios cuando un producto tiene variantes (ej. Color, Talla), como por ejemplo: desde $200.

Visualización del precio de variantes

Define cómo se mostrarán los precios para los productos que tienen variantes y cuando estas variantes tienen precios diferentes.

• Mínimo: Mostrará el precio más bajo entre todas las variantes.
• Máximo: Mostrará el precio más alto entre todas las variantes.
• Rango: Mostrará simultáneamente el precio más bajo y el más alto. La forma en que se muestran se definirá por la opción Alineación de precios mencionada anteriormente.

Mostrar indicador de impuesto

Muestra un texto junto al precio indicando que el precio final es “más impuesto”. Si la configuración de impuestos en la caja indica que los productos ya incluyen impuesto, este texto no se mostrará.

Al habilitarlo, las siguientes opciones también estarán visibles:

• Mostrar etiqueta en mayúsculas: fuerza que el “texto de impuesto” se muestre en letras mayúsculas, ej. + IMP.
• Mostrar etiqueta solo en precio máximo: Si Visualización del precio de variantes es igual a Rango, la etiqueta se mostrará solo para el precio más alto.

Apariencia de etiquetas

Las opciones dentro de este grupo te permiten definir cómo se presentarán las etiquetas dentro de los bloques de productos. Esto solo se aplicará para las siguientes:

• Nueva, si está habilitada.
• Estados Agotado o No disponible.

Las opciones son las siguientes:

Tamaño

Al elegir Tamaño base, el tamaño del texto de las etiquetas se determinará por lo definido en la opción Tamaño base de fuente.

Al elegir Personalizado, podrás ajustar manualmente el tamaño para dispositivos de escritorio y móviles, respectivamente.

Posición

Te permite definir dónde se posicionarán las etiquetas del producto sobre la imagen.

Forma

Define la forma con la que se presentarán las etiquetas.

Etiqueta de descuento

Este grupo de opciones permite definir cómo se presentará la Etiqueta de descuento, que solo se mostrará en los siguientes casos:

• Si un producto tiene una promoción visible.
• Si la promoción no está condicionada por un Código. En caso de que lo esté, la etiqueta se mostrará si el cliente ha ingresado el código en la página del carrito.
• Si la etiqueta no está condicionada por grupos de clientes. En caso de que lo esté, la etiqueta se mostrará cuando el cliente haya iniciado sesión.

Visualización

Define la forma en que se presentará la etiqueta, de la siguiente manera:

• Ninguna: no se mostrará en ningún caso.
• Ambas: mostrará tanto el texto como el porcentaje de descuento, ej. -10% OFF.
• Porcentaje: mostrará solo el porcentaje, ej. -10%.
• Texto: mostrará solo el texto, sin considerar el porcentaje, ej. OFF.

Si deseas cambiar el texto de esta etiqueta, puedes hacerlo en el grupo Traducciones del tema, en el campo Texto de la etiqueta de descuento.

Nota: Este texto también se aplicará para la etiqueta que puede mostrarse dentro de las páginas de productos, junto al precio. Si no deseas mostrar un texto, simplemente deja el campo vacío.

Forma

Define la forma que tendrá esta etiqueta en los bloques de productos.

Etiqueta de estado

Al marcar la opción Mostrar, estarán disponibles dos opciones para definir el color de fondo y del texto.

Esta etiqueta se mostrará para los productos con estado No disponible o Agotado.

Etiqueta ‘Nuevo’

Este grupo de opciones te permite personalizar una etiqueta para los productos considerados como “nuevos”.

Al habilitar la opción Mostrar, las siguientes estarán disponibles:

Umbral

Define la cantidad de días durante los cuales un producto se considerará como “nuevo”.

Colores

Encontrarás dos opciones para definir el color de fondo y el color del texto de la etiqueta.

Opciones de tarjeta

Al habilitar Estilo de tarjeta, todos los bloques de productos del tema se presentarán con un estilo de “tarjeta” o “caja”. Además, las siguientes opciones estarán disponibles:

Sombra al pasar el cursor

Aplica una sombra en la parte posterior de los bloques cuando se pasa el cursor sobre ellos.

Relleno de imagen

Crea una separación entre el borde del fondo del bloque y la imagen.

Borde

Muestra un borde en todos los lados del bloque, para crear una diferencia más visible entre los productos, así como con el contenido que los rodea.

Opacidad del borde

Permite ajustar la opacidad (transparencia) del borde, si está habilitado.

Colores del contenido

Permite elegir el Paquete de colores para todos los bloques de productos.

Estilo de botones de acción

Este grupo de opciones se aplica a los botones de Vista rápida y Lista de deseos que pueden habilitarse dentro de los bloques de productos.

Tamaño de fuente

Permite definir el tamaño de los botones, con las siguientes opciones:

• Tamaño base: el tamaño se basará en cálculos predefinidos directamente afectados por la opción Tamaño base de fuente ubicada en Configuración del tema > Fuentes > Tamaños.
• Personalizado: permite ajustar manualmente el tamaño para dispositivos de escritorio y móviles.

Vista rápida del producto

Esta función permite a tus clientes previsualizar los detalles del producto sin salir de la página en la que se encuentran, haciendo que la experiencia de navegación sea más rápida y fácil.

Funcionará y será visible siempre que:

• La opción Habilitar Vista rápida esté habilitada en la configuración del Bloque de producto.
• La opción Habilitar Vista rápida esté habilitada en la configuración del componente Mapeo de productos.

Las opciones para personalizar cómo se verá y se comportará son las siguientes.

Visualización

Define cómo y dónde se mostrarán los detalles del producto, según las siguientes opciones:

• Barra lateral: los detalles se presentarán en un panel lateral que aparecerá desde el lado derecho del navegador.
• Modal: los detalles se presentarán dentro de una ventana emergente/modal sobre el contenido de la tienda, centrada vertical y horizontalmente.

Mostrar SKU

Muestra el SKU del producto. No se mostrará si el campo SKU está vacío en la configuración de un producto.

Mostrar Marca

Muestra la Marca del producto. No se mostrará si el campo Marca está vacío en la configuración de un producto.

Nota: El orden para estos dos atributos será primero SKU y luego Marca, y estarán separados por una línea vertical. Esta línea no se mostrará si un producto no tiene uno de los dos.

Mostrar reseñas

Muestra las estrellas de valoración y el puntaje promedio de valoración para los productos que tienen reseñas de clientes.

Nota: La función de Reseñas de productos en Jumpseller solo está disponible para planes Pro y superiores. Para más información sobre esta función, puedes visitar el siguiente artículo.

Mostrar stock

Muestra la disponibilidad o estado de stock de un producto.

Mostrar botón de lista de deseos

Muestra la función Lista de deseos. Puedes leer más sobre ella en esta sección.

Nota: Esta función solo está disponible para tiendas suscritas al plan Pro y superiores. Para más información puedes visitar el siguiente artículo.

Mostrar descripción

Muestra la descripción del producto con todo su contenido.

Texto del botón

Texto que se muestra en el botón que abre la Lista de deseos. Este texto no se presentará junto al ícono, pero es útil para el navegador y las tecnologías de asistencia.

Colores del contenido

Permite elegir un Paquete de colores para la Vista rápida.

Formulario del producto

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

También se aplica a la función de Vista rápida, para cualquiera de sus opciones de Visualización.

Acciones del formulario

Selector de cantidad

Si está habilitado, el selector de cantidad del producto será visible junto con los botones del formulario.

Botón ‘Comprar ahora’

Muestra un botón Comprar ahora junto al de Añadir al carrito, dentro del formulario del producto.

Esta opción es muy útil para agilizar el proceso de compra, permitiendo a los usuarios completar rápidamente su compra con el mínimo de pasos, mejorando la experiencia y potencialmente aumentando las conversiones.

Funciona de manera diferente al de Añadir al carrito, ya que tiene su propia funcionalidad que se explica a continuación:

• Llevará a los usuarios directamente a la página del Carrito o Caja, según lo que hayas definido en el panel de administración de tu tienda en Configuración > Caja > Preferencias > Después de añadir un producto al carrito.
• Si un usuario ya tiene productos añadidos al carrito, este enlace creará un nuevo ID del Proceso de compra con solo el producto en el que se hizo clic.
• Si el usuario regresa a cualquier otra página (ej. Página de inicio) antes de finalizar el proceso de compra, los productos anteriores que se añadieron seguirán estando allí.

Al habilitar esta opción, las siguientes estarán disponibles:

• Establecer ‘Comprar ahora’ como principal: hace que este botón sea más relevante que el de Añadir al carrito, por lo tanto, los estilos cambiarán entre ambos.
• Ocultar ‘Comprar ahora’ cuando esté deshabilitado: oculta automáticamente el botón Comprar ahora cuando la acción no es posible de realizar, como por ejemplo cuando un producto tiene variantes y una de ellas está Agotada.

Opciones y variantes

Este grupo de opciones permite controlar aspectos relacionados con las opciones del producto y sus variantes dentro del formulario.

Empezar en la primera imagen de la galería

Si está habilitado, la galería de productos comenzará en la primera imagen en lugar de la imagen asociada con la primera variante de producto seleccionada.

Visualización de opciones

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

Botones: Las variantes se mostrarán con un estilo de “botón” o “píldora”. El estilo variará según el estado de cada variante:

• No seleccionada: tendrá un borde alrededor.
• Seleccionada: tendrá un color de fondo relleno.
• Agotada: mostrará una línea diagonal a través y sobre el nombre de la variante, junto con una opacidad reducida.

Selector

Las variantes se mostrarán dentro de un selector de lista.

Nota: Las opciones de tipo Color siempre se mostrarán con estilo de “botón”.

Etiqueta de disponibilidad para stock del producto

Esta opción está relacionada con el subcomponente Stock disponible dentro de los componentes Plantilla de producto y Producto único.

Te permite mostrar u ocultar la etiqueta que puede mostrarse mencionando la “disponibilidad” de un producto. El texto será el siguiente:

• Disponible en stock para variantes que tienen stock.
• Agotado para productos con stock igual a cero (0).

Cantidad exacta de stock

Cambia el comportamiento de la etiqueta Stock mencionada anteriormente y, en lugar de un texto, se mostrará la cantidad de stock de la variante, como por ejemplo: 10 unidades en stock.

Nota: Para variantes donde el Stock ilimitado está habilitado, siempre mostrará el texto “Disponible en stock”.

Ocultar variantes sin stock

Oculta todas las variantes que no tienen stock de la lista de opciones del producto en el tema, por lo tanto, no podrán ser seleccionadas por los usuarios.

Ocultar ubicaciones sin stock

Oculta todas las Ubicaciones que no tienen stock, que son visibles dentro del panel de Ubicaciones de stock que se muestra al hacer clic en su respectivo botón.

Nota: Para más información sobre la función de Ubicaciones de Stock, puedes leer el siguiente artículo.

Estados

Estilo del mensaje de stock bajo

Esta opción permite definir el estilo del mensaje relacionado con la opción de administración Umbrales de stock bajo para productos, sobre la que puedes leer más en este artículo.

Botón de contacto

Muestra un botón que lleva a la Página de contacto de la tienda, dentro del mensaje que se muestra para los productos con estados Agotado o No disponible.

Botón de WhatsApp

Muestra un botón que lleva a la aplicación de WhatsApp en dispositivos móviles y a WhatsApp web en escritorio.

Este botón también se muestra dentro del mensaje para los productos con estados Agotado o No disponible.

Nota: El número de WhatsApp conectado a este botón será el añadido en el panel de administración de tu tienda, dentro de Configuración > General > Preferencias > Redes sociales.

Precio e impuestos

Mostrar indicador de impuesto

Muestra un texto junto al precio indicando que el monto final considera el impuesto.

Si la configuración de impuestos en la caja indica que los productos ya incluyen impuesto, este texto no se mostrará.

Al habilitarlo, se mostrará la opción Indicador en mayúsculas que te permite forzar que el texto se muestre en letras mayúsculas, ej. + IMP.

Mostrar precio sin impuesto

Permite mostrar el precio del producto sin incluir impuestos.

Citas

Las siguientes opciones solo funcionarán para productos de tipo Cita.

Mostrar duración

Muestra los detalles de Duración definidos en la configuración de la cita, antes del calendario.

Mostrar ubicación

Muestra los detalles de Ubicación definidos en la configuración de la cita, antes del calendario y después de la Duración (si está habilitada).

Botón de WhatsApp

Esta sección te permite mostrar un botón flotante de WhatsApp en todos los diseños del tema.

Al habilitar la opción Habilitar botón, se mostrarán las siguientes configuraciones para que lo personalices.

Nota: El botón se mostrará siempre que lo habilites aquí y si has definido un número de WhatsApp en el panel de administración de tu tienda en Configuración > General > Preferencias > Redes sociales.

Apariencia

Posición

Define la posición en la que el botón se mostrará dentro de la ventana del navegador.

Animación

Muestra una animación de “inclinación” en la parte posterior del botón, basada en el color de fondo definido para él.

Colores

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

• Color del ícono: Color para el ícono o logo de WhatsApp.
• Color de fondo: Color para el fondo del botón.
• Color de fondo (al pasar el cursor): Color para el fondo del botón en estado “hover” (al pasar el cursor sobre él).

Llamada a la acción

Este grupo de opciones te permite mostrar un mensaje junto al botón para animar a los clientes a hacer clic en él o para que tenga más presencia.

Al rellenar el campo de opción Mensaje, las siguientes estarán disponibles.

Nota: La ubicación de este texto dependerá de lo que elijas en la opción Posición del botón.

Días para permanecer cerrado

Define la cantidad de días durante los cuales este mensaje no será visible una vez que los usuarios opten por cerrarlo.

Colores

Encontrarás dos opciones para definir el color del fondo y del texto.

Mensajes

Este grupo de opciones te permite definir textos predefinidos que aparecerán en la aplicación de WhatsApp (móvil) y en WhatsApp web (escritorio), dependiendo de la página en la que estén los usuarios cuando hagan clic en el botón.

Contacto

Este texto se mostrará cuando los usuarios hagan clic en el botón en cualquier página, excepto en la página del producto.

Página del producto

Este texto se mostrará cuando los usuarios hagan clic en el botón mientras se encuentran en la página del producto de la tienda.

Notificación de añadir al carrito

Esta sección te permite mostrar un mensaje notificando a los clientes que los productos que añadieron fueron efectivamente agregados al carrito.

Este mensaje anulará cualquier comportamiento y/o opciones de redirección definidas en el panel de administración de la tienda en Configuración > Caja > Preferencias.

Al marcar la opción Habilitar, se mostrarán notificaciones cuando un cliente añada un producto.

Si está deshabilitado, se considerarán las siguientes opciones del panel de administración:

• Permanecer en la misma página: la página se recargará y el producto se añadirá al carrito.
• Redirigir al Carrito: la página se cargará y llevará al cliente directamente a la Página del carrito de tu tienda (primer paso del proceso de compra).
• Redirigir a la Caja: la página se cargará y llevará al cliente directamente a la Página de caja de tu tienda (segundo paso del proceso de compra).

Al habilitarlo, se mostrará la opción Posición que te permite elegir la ubicación en la que se mostrarán las notificaciones. Esto siempre estará en el lado derecho de la ventana del navegador.

Ventana emergente de verificación de edad

Esta sección te permite mostrar una ventana emergente que estará centrada vertical y horizontalmente dentro del navegador.

Aunque su nombre hace referencia a los habituales mensajes de verificación de edad, puedes utilizarlo para lo que quieras.

Al marcar la opción Habilitar, las siguientes estarán disponibles para que lo personalices.

Opciones de contenido

Dentro de este grupo encontrarás dos opciones para añadir un Título y un Texto, que se mostrarán al inicio del mensaje.

Botones

Este grupo proporciona opciones para que personalices los botones del mensaje.

Botón Aceptar

Texto para el botón con el que los clientes pueden aceptar.

Botón Rechazar

Texto para el botón con el que los clientes pueden rechazar o declinar.

Enlace de redirección

Te permite añadir un enlace para que los clientes sean redirigidos una vez que hagan clic en el botón Rechazar.

Apariencia

El siguiente grupo proporciona opciones de color para que personalices el mensaje.

• Color del botón Aceptar: color de fondo para el botón Aceptar.
• Color del botón Rechazar: color de fondo para el botón Rechazar.
• Color de fondo de la ventana emergente: color de fondo del mensaje.

Nota: El color del texto de los botones se ajustará automáticamente según el contraste.

Artículos

Esta sección te permite personalizar ciertas configuraciones relacionadas con los Artículos (páginas) dentro del tema.

Los Artículos son los bloques de vista previa que muestran la imagen y el contenido de una página.

Nota: nos referiremos como Contenido a la información como Fecha, Título, Extracto y Enlace/Botón.

Apariencia

Dentro de este grupo encontrarás opciones para personalizar el diseño y aspecto de ellos dentro del tema.

Orden del contenido

Define el orden de los elementos que se muestran dentro del área de contenido, que es la que va justo debajo o después de la imagen del artículo.

Aquí puedes reordenar las opciones arrastrándolas hacia arriba y hacia abajo, para definir la posición que te parezca mejor.

Algunas cosas a considerar son:

• La Fecha y el Extracto se mostrarán si has habilitado sus respectivas opciones dentro del grupo Información que se encuentra más adelante.
• Las Categorías se mostrarán si has habilitado la opción Mostrar categorías dentro del grupo Categorías que se encuentra más adelante.
• El Enlace (o botón) se mostrará si has habilitado la opción Mostrar dentro del grupo Enlace que se encuentra más adelante.

Estilo

Define el estilo para todos los Artículos dentro del tema, basándose en las siguientes opciones:

Clásico: El contenido de todos los artículos se apilará verticalmente, uno debajo del otro y después de la imagen del artículo.

Minimalista: El contenido de todos los artículos se colocará sobre la imagen. Además, se mostrará un elemento de Superposición entre la imagen y el contenido para generar un contraste entre ambos.

Mostrar imagen

Define si la imagen de los artículos debe mostrarse o no.

Para el caso del estilo Minimalista, el color del fondo y los elementos se determinará según el Paquete de colores que elijas dentro de la opción Colores del contenido.

Espacio entre

Permite definir si los artículos tendrán un espacio o separación entre ellos.

La cantidad de espacio se determinará según lo que elijas dentro de Configuración del tema > Diseño > Estilos del tema > Espaciado.

Nota: Esta opción no será visible si Espaciado es igual a Ninguno.

Esquinas redondeadas

Permite definir si los artículos tendrán esquinas redondeadas o no. La forma en que esto se aplica variará según:

• Para la versión Clásica, se aplicará solo en la imagen.
  • Si el Estilo de tarjeta está habilitado, se aplicará tanto a la tarjeta como a la imagen.
  • Si el Estilo de tarjeta está habilitado y el Relleno de imagen está deshabilitado, solo se aplicará a la tarjeta.
• Para la versión Minimalista, se aplicará a todo el bloque, así como al elemento de Superposición.

Estilo de tarjeta

Al habilitar esta opción, todos los artículos del tema se presentarán con un estilo de “tarjeta” o “caja”.

Además, las siguientes opciones estarán disponibles:

• Sombra al pasar el cursor: Aplica una sombra en la parte posterior de los bloques cuando se pasa el cursor sobre ellos.
• Relleno de imagen: Crea una separación entre el borde del fondo del bloque y la imagen.
• Borde: Muestra un borde en todos los lados del bloque, para crear una diferencia más visible entre los artículos, así como con el contenido que los rodea.
• Opacidad del borde: Permite ajustar la opacidad (transparencia) del borde, si está habilitado.

Colores del contenido

Permite definir un Paquete de colores para todos los Artículos del tema.

Título

Este grupo de opciones te permite personalizar el diseño de todos los títulos de los artículos.

Tamaño

Define el tamaño para todos los títulos basándose en cálculos predefinidos directamente afectados por la opción Tamaño base de fuente ubicada en Configuración del tema > Fuentes > Tamaños.

Al elegir Personalizado, podrás ajustar manualmente el tamaño para dispositivos de escritorio y móviles de forma independiente.

Peso

Define el peso para todos los títulos.

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

Espaciado entre letras

Permite ajustar el espacio entre letras.

Todo en mayúsculas

Permite forzar que todos los títulos se muestren en letras mayúsculas, incluso cuando no fueron escritos así: ej. TÍTULO.

Información

Fecha

Muestra la fecha en la que se crearon los artículos.

También se mostrará la opción Formato de fecha, para que puedas definir el que mejor te convenga:

• Abreviado: ej. Mar 9, 2025
• Básico: ej. 3/9/2025
• Fecha y hora: ej. 9 de marzo de 2025 a las 4:05 am
• En fecha: ej. el 9 de marzo de 2025
• Estándar: ej. 9 de marzo de 2025

Extracto

Muestra una versión más corta del contenido del artículo.

Al habilitarlo, la opción Longitud de caracteres estará disponible, con la que puedes definir la cantidad de caracteres a los que se limitará la descripción.

Categorías

Mostrar categorías

Al habilitar la opción Mostrar categorías, se mostrará la lista de categorías de páginas relacionadas con cada artículo.

Las siguientes opciones también estarán disponibles para usar:

• Tipo de ícono: permite definir el aspecto del texto para cada categoría.
• Aplicar estilo de insignia: permite aplicar un estilo de “insignia” o “etiqueta” a todas ellas.

Mostrar fecha en los artículos

Te permite mostrar la fecha de publicación de todos los artículos antes del título.

Al habilitar esta opción, la siguiente estará disponible:

Enlace

Mostrar como botón

Muestra el enlace de cada artículo como un botón dentro del área de contenido de cada artículo.

Si está deshabilitado, la imagen y el título seguirán siendo clicables para que los clientes puedan ir a leerlo.

Las siguientes opciones también estarán disponibles:

• Estilo de contorno: el botón se presentará con un borde alrededor. Si está deshabilitado, el botón tendrá un color de fondo relleno.
• Habilitar flecha en el botón: muestra una flecha junto al texto del botón.

Enlace externo

Al hacer clic en un artículo, el enlace a su página individual se abrirá en una nueva pestaña del navegador.

Proceso de compra

Esta sección te permite personalizar el diseño y ciertas configuraciones que se aplican a las páginas del proceso de compra: Carrito, Caja, Revisión y Éxito.

Las opciones dentro de esta sección tendrán efecto en todas las páginas del proceso si has seleccionado Clásico dentro de Caja > Formulario de caja.

Para el caso de la versión Estándar, las opciones aquí solo se aplicarán a la página del Carrito.

Colores del contenido

Esta opción te permite elegir un Paquete de colores para las páginas del proceso de compra.

Logotipo

Este grupo te permite añadir un logotipo específicamente para estas páginas a través de la opción Logotipo personalizado, que anulará el añadido en Configuración > General > Marca, si se ha subido uno allí.

Si no se sube ningún logotipo, se mostrará el Nombre de la tienda.

Alturas

Encontrarás dos opciones para ajustar la altura de cualquier instancia de un logotipo para dispositivos de escritorio y móviles.

Barra lateral del carrito

La Barra lateral del carrito es un panel lateral que muestra el resumen del pedido de un cliente, que incluye lo siguiente:

• Lista de productos que los clientes añaden al carrito, donde pueden cambiar la cantidad y/o eliminarlos.
• El Resumen del pedido, como Subtotal, Envío, Descuentos, etc.
• Botones de acción, como Ir a la caja e Ir al carrito.

Al habilitar la opción Mostrar barra lateral, las siguientes estarán disponibles:

• Mostrar ícono: Permite mostrar un ícono junto al título de la barra lateral.
• Prioridad de botones: Define cuál de los botones disponibles en esta sección tendrá mayor prioridad. El que elijas tendrá un estilo de fondo relleno, mientras que el otro tendrá un estilo de contorno.

Página de éxito

Las opciones dentro de este grupo te permiten definir aspectos de la página final del proceso de compra.

Nota: Solo tendrá efecto para la versión del formulario de caja Clásico.

Mostrar mensaje

Añade un mensaje adicional debajo del principal que ya se muestra por defecto.

Al habilitar esta opción, las siguientes estarán disponibles:

• Texto: Define un texto para el mensaje.
• Enlace: Muestra una acción después del texto para que los clientes interactúen, basándose en las siguientes opciones:
  • Email de la ubicación predeterminada: Mostrará el email de la Ubicación definida como Principal/Predeterminada dentro de ***Configuración > General > Ubicaciones***.
  • Email general: Mostrará el email definido en el panel de administración de la tienda dentro de ***Configuración > General > Emails***, al final de esa sección.
  • Enlace a la página de contacto: Mostrará un enlace con estilo de botón que llevará a los clientes a la página de contacto de tu tienda al hacer clic.
  • No mostrar nada: No mostrará nada después del texto del mensaje.

Tabla de productos en la página de éxito

Muestra la lista de productos que un cliente compró, al final de la página.

Nota: en algunos países esto es obligatorio por leyes y regulaciones.

Códigos personalizados

Esta sección y sus opciones te permiten añadir códigos personalizados y/o externos al tema, para que no tengas necesariamente que editar su código.

Esto es útil y se usa principalmente para scripts o herramientas como:

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

Nota: Para instalar, añadir y/o usar herramientas como Google Analytics, Google Customer Reviews, Facebook pixel y TikTok pixel, Jumpseller ya cuenta con los campos necesarios dentro del panel de administración de la tienda en Configuración > General > Preferencias > Configuración de Analytics.

Las opciones disponibles son las siguientes:

Código superior de head

Te permite añadir un código externo al inicio de la etiqueta de apertura <head> del código del tema.

Código inferior de head

Te permite añadir un código externo al final/cierre de la etiqueta <head> del código del tema.

Código superior de body

Te permite añadir un código externo al inicio de la etiqueta de apertura <body> del código del tema.

Código inferior de body

Te permite añadir un código externo al final/cierre de la etiqueta <body> del código del tema.

Nota: estos campos no admiten el uso de etiquetas liquid. Por lo tanto, si necesitas usar algo así, necesariamente tendrá que hacerse directamente dentro del código del tema a través del Editor de código.

Deshabilitar funciones de compra

Esta sección te permite controlar el comportamiento de algunas funciones del tema, relacionadas con las opciones de compra para tus clientes.

Deshabilitar precios de productos

Oculta los precios de todos los productos del tema.

Nota: Si no deshabilitas la siguiente opción, los comerciantes aún podrían comprar productos aunque los precios no sean visibles.

Deshabilitar todas las funciones de compra

Esta opción te permite deshabilitar todas las funciones de compra del tema, como las siguientes:

• Ítem del carrito en el Encabezado: el que está disponible en el lado derecho del Encabezado del tema.
• Botones de añadir al carrito: en la página del producto, así como los botones de los bloques de productos, incluso cuando están habilitados para mostrarse dentro de sus respectivas configuraciones.

Mensaje

Al habilitar la opción anterior, se mostrará un mensaje en todas las Páginas de producto de la tienda, que podrás personalizar con las opciones que se encuentran a continuación.

• Título: define el título del mensaje.
• Texto: define el texto del mensaje.
• Mostrar botón de contacto: Muestra un botón que llevará a los clientes a la página de contacto de la tienda al hacer clic.
• Mostrar botón de WhatsApp: Muestra un botón que abrirá la aplicación de WhatsApp en un dispositivo Móvil o WhatsApp web en un dispositivo de escritorio.

Nota: El número de WhatsApp conectado a este botón será el añadido en el panel de administración de tu tienda, dentro de Configuración > General > Preferencias > Redes sociales. Si no se añade ningún número allí, este botón no se mostrará.

Traducciones del tema

Dentro de esta sección encontrarás varios grupos y campos que te permitirán traducir textos dentro del tema.

Esto puede abarcar desde textos en mensajes hasta textos dentro de botones y enlaces.

Estos están divididos en grupos, como por ejemplo los siguientes:

• Acciones de compra: contiene campos relacionados con contextos de compra, como por ejemplo el botón Añadir al carrito y el enlace Comprar ahora.
• Mensajes de información y estado: contiene campos relacionados con precios, información y estados de productos.
• Relacionados con la cuenta: contiene campos relacionados con los clientes.
• Carrito y pedido: contiene campos relacionados con el proceso de compra del carrito.
• Estados de error o vacíos: contiene campos relacionados con mensajes cuando, por ejemplo, no hay coincidencias en un resultado de búsqueda, una categoría o la lista de deseos está vacía.