Cómo configurar los Ajustes Generales y de Marca en tu sitio web
Desde tu panel de administración, puedes empezar a configurar algunos ajustes básicos para tu tienda online. Selecciona los colores de marca para t...
Los Componentes son una de las partes fundamentales dentro de la construcción y estructura de un tema. Pueden incluir cabeceras
, pies de página
, videos
, banners
, sliders
, entre otras secciones que son utilizadas para construir y diseñar páginas en un sitio web. Estos pueden ser agregados, editados, y eliminados en el panel de Componentes del Editor Visual, y pueden ser reutilizados a través de diferentes plantillas y páginas para mantener una consistencia tanto su el diseño como funcionalidad.
Al utilizar Componentes, los diseñadores de sitios web pueden crear diseños complejos y características de forma eficiente con poca o cero conocimiento de código, puesto que los componentes pueden ser manipulados y reorganizados fácilmente. Esto también permite una mantención sencilla del sitio web, debido a que los cambios en un componente se verán reflejados a través de todas las plantillas donde un componente específico se esté utilizando.
Puedes ajustar de forma fácil los Componentes mediante las Ayudas de Edición, lo cual te permitirá editar configuraciones, así como también duplicar, esconder, eliminar y también reordenar componentes directamente en la vista previa.
También puedes hacer click en el botón “Agregar componente” para agregar uno en el lugar y posición que desees.
Cada componente posee sus propias configuraciones generales y alguno de ellos incluyen lo que denominamos Subcomponentes, los cuales permiten construir un segundo nivel de contenido, el cual también puede ser configurado y personalizado de forma individual.
Todas las plantillas poseen 2 componentes obligatorios que no pueden ser eliminados ni escondidos, los cuales son Cabecera y Pie de Página. Estos se despliegan al inicio y al final de cada plantillla, respectivamente, los cuales cubriremos en detalle más abajo en esta página.
Un Subcomponente es un ítem que puede ser agregado dentro de un Componente. Por ejemplo, el subcomponente de un Slider
es un Slide
, mientras que el subcomponente de Galería de logotipos
es un Logo
, y así de la misma forma con otros en un tema de Jumpseller.
Todos ellos poseen opciones individuales que puedes personalizar, también puedes agregar los que consideres necesarios, reordenarlos, esconderlos y eliminarlos. Cuando duplicas o reutilizas un componente, sus Subcomponentes también serán duplicados.
Para que puedas entender como administrarlos, revisa el siguiente listado:
flecha
al lado izquierdo de su nombre. Aquello significa que posee o puede poseer subcomponentes en su interior.hover
, la flecha rotará y al hacer click en él, el listado de componentes se abrirá, permitiéndote visualizarlos todos.flecha
para cerrarlo.En cada subcomponente, al pasar el cursor sobre su nombre, aparecerán 3 opciones al lado derecho, las cuales te permitirán realizar las siguientes acciones:
Duplicar
Permite duplicar el subcomponente y crear uno nuevo, el cual incluirá la misma información y contenido.
Eliminar
Permite eliminar el subcomponente del listado.
Nota: Los cambios no serán aplicados en tu tienda hasta que guardes los cambios. Por ejemplo, si eliminaste un subcomponente por error, puedes hacer click en el botón Rehacer que está disponible en la esquina superior derecha del Editor Visual para volver a agregarlo.
Esconder
Allows you to hide the subcomponent on the storefront.
Te permite esconder el subcomponente en la tienda, sin necesariamente tener que eliminarlo.
Una Plantilla es el contenedor en el cual todo el diseño de una sección se ubica. Las plantillas disponibles en Jumpseller son las siguientes:
Inicio
Esta es la página inicial y principal que se muestra cuando un visitante ingresa al dominio de tu tienda, como por ejemplo tu-dominio.jumpseller.com
o tu-dominio.com
.
Producto
Muestra toda la información de los productos de tu tienda. Puedes crear todas las plantillas que quieras para mostrar la información de varias formas para distintos tipos de productos.
Categoría
Está enfocada en desplegar las colecciones de productos de las categorías que puedes crear en el panel de administración de tu tienda, lo cual puedes realizar al ir a Productos > Categorías
. Aquí también puedes crear nueva plantillas y aplicarlas a categorías para diferenciarlas.
Página
Los temas de Jumpseller vienen con 3 plantillas de página preinstaladas que puedes utilizar, y de la misma forma que con Productos
y Categorías
, también puedes crear muchas más y aplicarlas a tus páginas.
Las plantillas de página preinstaladas en un tema son las siguientes:
Blog
Despliega todas las páginas categorizadas como Post.
Nota: Puedes crear cuantas categorías de página necesites y relacionarlas a diferentes páginas, como por ejemplo Noticias, Consejos, etc.
Post
Despliega la información de un Post.
Default
Esta es la plantilla por defecto para el contenido de tus páginas genéricas. Páginas Legales como por ejemplo Términos y Condiciones, Políticas de Privacidad y Políticas de despacho, utilizarán de forma automática esta plantilla.
Búsqueda
Despliega todos los productos que coincidan cuando un cliente realice una búsqueda en tu tienda.
Contacto
Puede desplegar varios detalles sobre tu tienda, como por ejemplo información de contacto, enlaces de redes sociales, un mapa y un formulario de contacto.
Error
Se utiliza cuando un visitante llega a una página que no está disponible, como por ejemplo al ingresar una URL incorrecta o una página que ya no exista. También se utiliza por ejemplo cuando se produce algún problema en el proceso de compra de tu tienda.
A continuación, explicamos algunos tópicos, palabras y conceptos que serán utilizados en este artículo.
Slider/Carrusel
Un Slider o Carrusel es un tipo de elemento que ampliamente utilizado en los Componentes, y el cual básicamente despliega Ítems o Subcomponentes en una sección donde se muestran más o menos dependiendo del tipo de dispositivo en donde se esté visitando la tienda. Los elementos que se esconden -o no son visibles- en la ventana del navegador, podrán ser visibles mediante objetos de navegación como flechas y puntos, o al arrastar el contenido de forma horizontal.
Grupos de Colores
La mayoría de los componentes poseen su propia configuración para personalizar colores. Con los Grupos de Colores podrás cambiar el look de todo un componente en un sólo click. Estos cambios se aplican a elementos tales como el fondo, textos, enlaces y botones. Puedes editar, reutilizar, clonar o crear cuantos grupos desees. Cuando modificas el color de un grupo, este será aplicado en cada lugar donde dicho grupo esté siendo utilizado.
Nota: No todos los componentes están disponibles en todos los temas de Jumpseller, así como también no todas las opciones para cada componente o subcomponente son las mismas en todos los temas. Sin embargo, el comportamiento principal de ellos es similar y esta documentación te ayudará a configurarlos de forma exitosa.
Dispositivos
A través de este artículo verás que utilizamos frecuentemente los conceptos de Desktop (Escritorio) y Mobile (Móvil o Móviles). Incluso cuando mayoritariamente hacemos referencia a estos dos, es importante considerar la existencia de dispositivos Tablet (Tabletas).
En la siguiente table puedes encontrar el detalle de las dimensiones con las cuales consideramos cada dispositivo:
Dispositivo | Equivalencia del ancho |
---|---|
Móvil pequeño | Igual o menor a 414 px |
Móvil | Igual o menor a 575 px |
Tableta | Entre 575 px y 991 px |
Escritorio | Igual o mayor a 992 px |
Escritorio grande | Igual o mayor a 1200 px |
Nota: Esto considera principalmente la visualización vertical para dispositivos Móviles y Tabletas. Por ende, puede suceder que al cambiar o rotar un dispositivo de forma horizontal, el ancho cambie y la equivalencia en pixeles sea distinta a la mencionada en la tabla anterior.
Ancho
En el artículo encontrarás la palabra Ancho mencionada varias veces y es ya que en varios componentes tendrás la posibilidad de definir y cambiar el ancho de las secciones, de forma que puedas crear diseños bien dinámicos. Las convenciones de nomenclatura más comunes que encontrarás son, por ejemplo, las siguientes:
Ancho de Grilla
Los temas son construidos y codificados con un diseño que reestringe y ajusta el contenido de varias secciones a un ancho específico, de forma tal que todos se vean y comporten similarmente y posean un diseño sólido. Para esto, utilizamos un diseño en todas todas las secciones pueden ser divididas en 12 columnas.
En este caso, Grilla significa que el contenido se expandirá al espacio máximo disponible de esta, por ende 12 columnas, lo cual es aproximadamente 1320 pixeles.
Navegador o Ancho completo
Esto significa que el contenido se expandirá, adaptará y cambiará de tamaño al ancho máximo disponible del navegador donde tu tienda esté siendo visualizada o visitada.
Otros tamaños de ancho
En varios componentes encontrás opciones para el ancho que te permitirán elegir entre:
Nota: En algunos componentes también encontrarás la opción Extra Grande, la cual variará y cambiará las dimensiones mencionadas anteriormente dependiendo del caso de uso, opciones y contexto del componente en que se encuentre disponible. Para dispositivos Móviles el contenido se expandirá al ancho completo disponible.
Hover
En este artículo utilizaremos el término hover
de forma frecuente, lo cual básicamente significa la acción en la cual un usuario posa el mouse/cursor sobre un elemento, objecto o sección.
Overlay
En varios componentes encontrarás una opción que hace referencia a Overlay
. Este elemento es básicamente una capa que se posiciona entre el contenido y la imagen de una sección y permite generar un mayor contraste entre ambos. Puedes encontrar esta opción en componentes (o subcomponentes) como por ejemplo Slides
, Banners
, Banner Grande
.
El componente Cabecera está presente en la mayoría de las plantillas, mientras que algunos temas no lo mostrarán en las páginas del proceso de compra (Carro, Checkout, Revisión del pedido y Compra exitosa).
Este componente se ubica al principio del diseño de cada plantilla. La Cabecera incluye en todos los casos, una Barra de búsqueda y el Menú de navegación principal.
Algunos temas poseen configuraciones avanzadas y opciones como por ejemplo las siguientes:
Para revisar las personalizaciones individuales de cada tema, por favor visita su documentación respectiva.
El componente Pie de Página está presente en la mayoría de las plantillas, y al igual que la Cabecera, algunos temas no lo muestran en las páginas del proceso de compra.
Este componente se ubica en la parte inferior del diseño de cada plantilla, y usualmente se utiliza para mostrar algunos de los siguientes elementos:
Para revisar las personalizaciones individuales de cada tema, por favor visita su documentación respectiva.
Este componente se utiliza para desplegar información bien diversa y detallada sobre tópicos o asuntos como descripciones respecto de ciertas características de tu tienda, preguentas frecuentes, detalles de producto, etc.
Configuraciones del componente
Al hacer click en el nombre del componente encontrarás opciones generales para personalizarlo, las cuales determinarán como se verá y comportará la sección. Las opciones disponibles para este componente son las siguientes:
Ancho
Permite definir el ancho del contenido del componente, en base a las siguientes opciones:
Alineación de contenido
Permite definir la posición horizontal en qué se ubicará el acordeón.
Nota: No habrá ningún cambio visible si definiste Ancho de grilla en la opción anterior.
Habilitar ítems colapsables
Al habilitar esta opción, cuando un usuario haga click en alguno de los ítems del acordeón los demás se cerrarán. De forma opuesta, al deshabilitarla, todos los ítems permanecerán abiertos al hacer click.
Primer ítem abierto
Permite definir que el primer ítem del acordeón esté abierto por defecto al cargar la página. Cómo o cuándo este ítem se cierre dependerá en el comportamiento de la opción anterior.
Habilitar cabecera
Permite desplegar una sección de la Cabecera antes del acordeón, en la cual puedes agregar los siguientes elementos mediantes sus opciones respectivas:
Margen superior
Permite controlar el margen de la parte superior de la sección.
Margen inferior
Permite controlar el margen de la parte inferior de la sección.
Colores de contenido
Permite elegir el Pack de Colores para el componente.
Configuraciones del subcomponente
El subcomponente de un Acordeón
se llama Item de Acordeón
y puedes agregar todos los que quieras para entregar la información necesaria a tus clientes. Las opciones para este subcomponente son las siguientes:
Título
Título o nombre para el ítem de acordeón.
Nota: Este campo es obligatorio.
Contenido
Aquí puedes agregar un texto o descripción para el ítem de acordeón.
Nota: Este campo es obligatorio.
Imagen
Permite agregar una imagen que se muestre junto al contenido del ítem de acordeón.
Tamaño de la imagen
Permite definir el ancho que tendrá la imagen desde un 10% a un 100%. Estos porcentajes dependerán del ancho del ítem, el cual es definido en base a ancho del acordeón.
Posición de la imagen
Permite definir si la imagen se mostrará antes o después del contenido del ítem.
El propósito de este componente es para que puedasa destacar ciertas características o información respecto de tu tienda, con contenido que puede ser por ejemplo promociones, categorías y/o productos destacados, entre otras, mediante el uso de imágenes y enlaces.
Configuraciones del componente
Al hacer click en el nombre del componente encontrarás opciones generales para personalizarlo, las cuales determinarán como la sección se verá y comportará, así como también sus subcomponentes (Banners). Las opciones disponibles para este componente son las siguientes:
Tipo de visualización
Permite definir la forma en que los Banners serán mostrados en el componente, en base a las siguientes opciones:
Carrusel
, en el cual puedes controlar aspectos tales como la velocidad, reproducción automática o si quieres mostrar elementos de navegación en él.Tipo de contenido
Permite definir la forma en que cada Banner se verá y qué opciones serán consideradas respecto de las opciones de sus subcomponentes respectivos. Las opciones disponibles son las siguientes:
Banner
funcionarán como fondo y el contenido (p.e. Título) será posicionado sobre este.Proporción de imagen
Permite elegir la forma de las imágenes de tus banners. Esto funciona en base a lo que se conoce Relación de aspecto, lo cual permite que todas las imágenes se vean proporcionalmente iguales de forma tal que puedas mostrar un diseño consistente entre ellas. Las opciones disponibles son las siguientes:
16:9
.3:4
.4:3
.1:1
.Nota: Las imágenes que subas se adaptarán a la forma definida y llenarán el espacio disponible posicionándolas al centro de forma horizontal y vertical. Esta opción sólo será considerada si definiste
Imagen + Contenido
en la opciónTipo de contenido
.
Número de columnas en escritorio
Permite definir la cantidad de Banners que serán desplegados en una fila horizontal individual, para dispositivos de Escritorio que posean un ancho igual o mayor a 768px.
Nota: Al elegir la opción de
4 columnas
, la cantidad de Banners en dispositivos de escritorio pequeños cambiará de forma automática a 2 columnas, para preservar una visualización óptima del contenido dentro de ellos.
Número de columnas en móvil
Permite definir la cantidad de Banners que serán desplegados en una fila horizontal individual, para dispositivos Móviles que posean un ancho igual o menor a 767px.
Nota: puedes encontrar las dimensiones ideales en que necesitarás subir las imágenes para Banners en esta sección de la página.
Habilitar cabecera
Permite desplegar una sección de Cabecera antes de los banners, en la cual puedes agregar los siguientes elementos mediantes sus opciones respectivas:
Configuraciones del Carrusel
Las siguientes opciones sólo serán consideradas y aplicadas si seleccionaste Carrusel
en la opción Tipo de visualización
:
Margen superior
Permite controlar el margen de la parte superior de la sección.
Margen inferior
Permite controlar el margen de la parte inferior de la sección.
Colores de contenido
Permite elegir el Pack de Colores para el componente.
Configuraciones del subcomponente
El subcomponente de un componente Banners
se llama Banner
, y puedes agregar todos los que quieras. Las opciones para este subcomponente son las siguientes:
Colores de contenido
Permite elegir el Pack de Colores para cada Banner
.
Imagen (escritorio)
Permite subir una imagen para dispositivos de Escritorio que posean un ancho igual o mayor a 576px.
Imagen (móvil)
Permite subir una imagen para dispositivos Móviles que posean un ancho igual o menor a 575px.
Nota: Si subes sólo una de las imágenes, será utilizada en todos los dispositivos.
Overlay de la imagen
Permite definir la opacidad (transparencia) para el elemento Overlay
.
Posición horizontal de la imagen
Permite definir la posición horizontal para cualquiera de las imágenes anteriores, sólo cuando Tipo de contenido
sea igual a Imagen + Contenido
en la configuración del componente principal.
Posición vertical de la imagen
Permite definir la posición vertical para cualquiera de las imágenes anteriores, sólo cuando Tipo de contenido
sea igual a Imagen + Contenido
en la configuración del componente principal.
Nota: La posición horizontal y vertical será más notoria cuando las imágenes sean más grandes o amplias que la
Proporción de imagen
definida, como por ejemplo si optas por una forma proporcional deRetrato
y la imagen que subas posea una dimensión rectangular.
Posición horizontal del contenido
Permite definir la forma en que el contenido de los banners se posicionará en el eje x (horizontal).
Posición vertical del contenido
Permite definir la forma en que el contenido de los banners se posicionará en el eje y (vertical).
Opciones de contenido
A continuación, encontrarás varias opciones para agregar contenido a un banner:
Nota: Subtítulo, Título y Enlace como botón sólo se mostrarán y serán visibles si la opción
Tipo de contenido
es igual aImagen + Contenido
. Para el caso de la opciónSólo imagen
, sólo necesitarás considerar las opciones deImagen
(escritorio y móvil),Enlace
yTexto del enlace
.
Este componente te permite mostrar una sección en la cual su propósito es destacar algo respecto de tu tienda, como puede ser por ejemplo:
Al hacer click en el nombre del componente encontrarás opciones generales para personalizarlo, las cuales determinarán como se verá y comportará la sección. Las opciones disponibles para este componente son las siguientes:
Colores de contenido
Permite elegir el Pack de Colores del componente. Esto determinará básicamente los colores de los textos dentro de él, como por ejemplo el Título.
Ancho
Permite definir el ancho para todo el componente, en base a las siguientes opciones:
Altura
Permite definir la altura de todo el componente, en base a las siguientes opciones:
Nota: We refer to a minimum, because the height of the section will vary depending on the amount and/or length of the content you add within the component.
Nota: Hacemos referencia a un mínimo, ya que la altura de la sección variará dependiendo de la cantidad y/o que tan extenso sea el contenido que agregues en el componente.
Imagen (escritorio)
Permite subir una imagen para dispositivos de Escritorio que posean un ancho igual o mayor a 576px.
Imagen (móvil)
Permite subir una imagen para dispositivos Móviles que posean un ancho igual o menor a 575px.
Nota: Si subes sólo una de las imágenes, será utilizada en todos los dispositivos.
Overlay de la imagen
Permite definir la opacidad (transparencia) para el elemento Overlay
.
Posición horizontal de la imagen
Permite definir la posición horizontal dentro del espacio disponible para cualquiera de las imágenes anteriores.
Posición vertical de la imagen
Permite definir la posición vertical dentro del espacio disponible para cualquiera de las imágenes anteriores.
Nota: La posición vertical y horizontal es más notoriamente visible cuando las imágenes son mayores o más grandes que la dimensión de la sección.
Alineación de contenido
Permite definir la alineación para el contenido del componente.
Posición horizontal del contenido
Permite definir la posición del contenido del componente en el eje x.
Opciones de contenido
A continuación, encontrarás varias opciones para agregar contenido al componente:
Margen superior
Permite controlar el margen de la parte superior de la sección.
Margen inferior
Permite controlar el margen de la parte inferior de la sección.
Nota: Las dimensiones sugeridas ideales para la o las imágenes que es posible subir puedes encontrarlas en esta sección
Este componente te permite desplegar el Formulario de contacto
de tu tienda en distintas plantillas y páginas del tema. Hay ciertas consideraciones que debes tener en mente al utilizarlo:
Página de contacto
de tu tienda, por lo cual debes cerciorarte de que este componente también esté agregado y sea visible en dicha plantilla.Al hacer click en el nombre del componente encontrarás opciones generales para personalizarlo, las cuales determinarán como se verá y comportará la sección. Las opciones disponibles para este componente son las siguientes:
Habilitar cabecera
Permite desplegar una sección de Cabecera antes del formulario de contacto, en la cual puedes agregar los siguientes elementos mediantes sus opciones respectivas:
Margen superior
Permite controlar el margen de la parte superior de la sección.
Margen inferior
Permite controlar el margen de la parte inferior de la sección.
Colores de contenido
Permite elegir el Pack de Colores para el componente.
Este componente te permite mostrar una sección con datos de contacto de la ubicación definida como Principal/Default
en el panel de administración de tu tienda, la cual puedes configurar yendo a Configuración > Checkout > Ubicaciones
.
Al hacer click en el nombre del componente encontrarás opciones generales para personalizarlo, las cuales determinarán como se verá y comportará la sección. Las opciones disponibles para este componente son las siguientes:
Habilitar cabecera
Permite desplegar una sección de Cabecera antes de contact details, en la cual puedes agregar los siguientes elementos mediantes sus opciones respectivas:
Alineación de contenido
Permite definir la alineación de los datos de contacto del componente. La alineación para la sección Cabecera
del componente se define en tu panel de administración, yendo a Temas > Editor Visual > Configuración del tema > Cabeceras
.
Mostrar correo de contacto
Permite mostrar el correo de la ubicación.
Mostrar teléfono de contacto
Permite mostrar el número de teléfono de la ubicación.
Mostrar número de WhatsApp
Permite mostrar el número WhatsApp definido en el panel de administración de tu tienda, yendo a Configuración > General > Preferencias > Redes Sociales
.
Mostrar dirección principal de la tienda
Permite mostrar la dirección de la ubicación. Esta será un enlace a Google Maps, el cual se abrirá en una nueva pestaña del navegador en dispositivos de Escritorio o la aplicación de Google Maps en dispositivos móviles.
Mostrar enlaces de redes sociales
Permite mostrar los enlaces de redes sociales que pueden ser agregados en el panel de administración de tu tienda, yendo a Configuración > General > Preferencias > Redes Sociales
.
Margen superior
Permite controlar el margen de la parte superior de la sección.
Margen inferior
Permite controlar el margen de la parte inferior de la sección.
Colores de contenido
Permite elegir el Pack de Colores para el componente.
Este componente te permite desplegar un Mapa
con diseño y estilo de Google Maps, el cual mostrará la dirección de la ubicación definida como Principal/Default
en el panel de administración de tu tienda, la cual puedes configurar yendo a Configuración > Checkout > Ubicaciones
.
Al hacer click en el nombre del componente encontrarás opciones generales para personalizarlo, las cuales determinarán como se verá y comportará la sección. Las opciones disponibles para este componente son las siguientes:
Habilitar cabecera
Permite desplegar una sección de Cabecera antes del Mapa, en la cual puedes agregar los siguientes elementos mediantes sus opciones respectivas:
Tamaño del mapa
Te permite definir el ancho del Mapa
, en base a las siguientes opciones:
Posición del mapa
Te permite definir la posición horizontal en que el Mapa
se ubicará.
Nota: Esto no tendrá efecto alguno si se definió
Ancho de grilla
en la opción anterior.
Margen superior
Permite controlar el margen de la parte superior de la sección.
Margen inferior
Permite controlar el margen de la parte inferior de la sección.
Colores de contenido
Permite elegir el Pack de Colores para el componente.
Este componente te permite agregar varios ítems
o bloques
, los cuales pueden ser categorías de tu tienda, y en donde puedes personalizar atributos y opciones para cada uno de ellos.
Configuraciones del componente
Al hacer click en el nombre del componente encontrarás opciones generales para personalizarlo, las cuales determinarán como se verá y comportará la sección. Las opciones disponibles para este componente son las siguientes:
Subtítulo
Opcional. Permite mostrar un subtítulo al principio de la sección, antes del Título.
Título
Permite mostrar un título en la sección.
Descripción
Permite mostrar un texto después del Título para dar más contexto sobre que trata la sección.
Enlace
Permite agregar un enlace a cualquier contenido de la tienda, como por ejemplo categorías, productos, páginas, enlaces externos, etc.
Texto del enlace
Texto que se mostrará en el enlace.
Tipo de sección
Te permite definir como los ítems serán mostrados en el componente, en base a las siguientes opciones:
Bloques a mostrar
Permite definir cuantos ítems se mostrarán en dispositivos de Escritorio, los cuales variarán en base a lo que hayas seleccionado en la opción Tipo de sección
. En ambos casos y para dispositivos como Tabletas y Móviles, la visualización cambiará de forma automática para mantener una correcta e ideal visualización del contenido dentro de ellos.
Si optas por elegir la opción Carrusel
, los ítems se mostrarán en base a las definiciones de la siguiente tabla:
Ancho de dispositivo | Cantidad de ítems |
---|---|
Igual o mayor a 1201px | Cantidad definida |
Igual o menor a 1200px | 6 ítems |
Igual o menor a 991px | 5 ítems |
Igual o menor a 767px | 4 ítems |
Igual o menor a 575px | 3 ítems |
Igual o menor a 414px | 2 ítems |
Igual o menor a 320px | 1 ítem |
Si optas por elegir la opción Grilla
, los ítems se mostrarán en base a las definiciones de la siguiente tabla:
Valor de opción | Móviles (Igual o menor a 575px) | Tabletas (Entre 576px y 767px) | Escritorio pequeño (Entre 768px y 991px) | Escritorio grande (Igual o mayor a 992px) |
---|---|---|---|---|
Igual o mayor a 5 | 1 columna | 2 columnas | 3 columnas | 6 columnas |
4 | 1 columna | 2 columnas | 4 columnas | 4 columnas |
3 | 1 columna | 2 columnas | 3 columnas | 3 columnas |
2 | 1 columna | 2 columnas | 2 columnas | 2 columnas |
Nota: al elegir
Grilla
en la configuración del componente, los valores de esta opción mayores a 7 no tendrán efecto visible alguno.
Configuraciones del Carrusel
Las siguientes opciones sólo serán consideradas y aplicadas si escogiste Carrusel
en la opción Tipo de sección
:
Configuraciones del subcomponente
El subcomponente para el componente Categorías
se llama Bloque de categoría
, y puedes agregar todos los que quieras. Las opciones para este subcomponente son las siguientes:
Categoría
Aquí debes elegir la categoría
para el ítem, lo cual automáticamente agregará atributos tales como nombre y enlace.
Título
Permite reemplazar el nombre original de la categoría seleccionada.
Icono imagen
Permite subir un icono imagen, el cual será posicionado dentro de una caja cuadrada que se muestra antes del título.
Nota: Sugerimos subir una imagen en formatos tales como
SVG
,WebP
oPNG
.
Imagen de fondo
Permite subir una imagen que funcionará como fondo de la caja cuadrada del bloque.
Nota: Esta imagen de fondo se posicionará detrás del ícono.
Habilitar overlay
Permite desplegar un elemento Overlay
entre el ícono y la imagen de fondo para generar contraste entre ambos.
Opciones de color
A continuación, puedes encontrar varias opciones para personalizar el look del ítem, en base a las siguientes:
hover
.Overlay
, de ser habilitado.Este componente te permite agregar una sección que mostrará un Reloj de cuenta regresiva o Reloj contador, el cual puede ser muy útil para por ejemplo:
Al hacer click en el nombre del componente encontrarás opciones generales para personalizarlo, las cuales determinarán como se verá y comportará la sección. Las opciones disponibles para este componente son las siguientes:
Fecha del contador
Obligatorio. Aquí debes definir la Fecha
en que el reloj se detendrá, por ejemplo 2023/06/30 (año / mes / día). Cuando el reloj llegue a cero (0), la sección se esconderá automáticamente y no será visible.
Nota: Las barras diagonales (/) NO deben tener o incluir espacios ni antes ni después.
Hora del contador
Opcional. Aquí puedes agregar, adicionalmente a la Fecha
anterior, una hora en qué el contador se detendrá. Ejemplo: 23:59:59 (hora : minutos : segundos).
Nota: Los dos puntos (:) NO deben incluir o tener espacios ni antes ni después.
Título del contador
Título que se muestra arriba del Reloj contador
. Por defecto mostrará el texto "Las ofertas terminan en".
Subtítulo
Opcional. Texto que se puede mostrar antes del Título de la sección (no del Título del contador).
Título
Opcional, pero ideal. Texto que puede desplegarse a la izquierda de la sección, junto y bajo el Subtítulo.
Enlace
Permite agregar un enlace (botón) a cualquier contenido de la tienda, como por ejemplo categorías, productos, páginas, enlaces externos, etc.
Nota: Considera agregar un enlace a alguna página, idealmente una categoría, en donde hayan efectivamente ofertas disponibles.
Texto del enlace
Texto que se muestra en el enlace (botón).
Nota: Considera agregar un texto que invite a los usuarios a hacer click en él.
Color de fondo
Permite definir el color de fondo de la sección.
Enlace - Color de fondo
Permite definir el color de fondo del enlace (botón).
Nota: Ambas opciones de color adaptarán de forma automática el color de los textos del componente, aplicando un contraste apropiado.
Utiliza este componente para aplicaciones externas o diseño personalizado, en él puedes incluir código, herramientas, aplicaciones, etc., que necesites desplegar en él.
Al hacer click en el nombre del componente encontrarás opciones generales para personalizarlo, las cuales determinarán como se verá y comportará la sección. Las opciones disponibles para este componente son las siguientes:
Código personalizado
En este campo puedes agregar el código que quieras desplegar en tu tienda.
Nota: Este campo no soporta ni permite el uso de etiquetas
liquid
.
(next-gen)
Nota: Este componente sólo está disponible en temas
Next-Gen
, como por ejemplo Simple.
Utiliza este componente para aplicaciones externas o diseño personalizado, en él puedes incluir código, herramientas, aplicaciones, etc., que necesites desplegar en él.
Al hacer click en el nombre del componente encontrarás opciones generales para personalizarlo, las cuales determinarán como se verá y comportará la sección. Las opciones disponibles para este componente son las siguientes:
Código
En este campo puedes agregar el código que quieras desplegar en tu tienda.
Nota: Este campo no soporta ni permite el uso de etiquetas
liquid
.
Ancho
Permite definir el ancho del contenido de la sección, en base a las siguientes opciones:
Margen superior
Permite controlar el margen de la parte superior de la sección.
Margen inferior
Permite controlar el margen de la parte inferior de la sección.
Este componente te permite crear diseños dinámicos en tu tienda mediante el uso de imágenes o videos y contenido, en los cuales puedes definir como estos se mostrarán dentro de la sección.
Para entender de mejor manera cómo funciona, nos referiremos a Contenido
respecto de las opciones Subtítulo, Título, Texto y Enlace; y nos referiremos a Multimedia
respecto de las Imágenes o el Video que puedes agregar en la configuración del componente.
Al hacer click en el nombre del componente encontrarás opciones generales para personalizarlo, las cuales determinarán como se verá y comportará la sección. Las opciones disponibles para este componente son las siguientes:
Orden de columnas
Permite definir el orden del Contenido
y Multimedia
, y cómo estos serán presentados dentro del componente para dispositivos de Escritorio, en base a las siguientes opciones:
Nota: ambas secciones utilizarán 6 columnas del total de 12 columnas de la grilla del tema.
Respetar orden de columnas en Móvil
Mientras que la opción anterior define el orden para dispositivos de Escritorio, esta permite respetar dicho orden también en dispositivos Móviles.
Imagen (escritorio)
Permite subir una imagen para dispositivos de Escritorio que posean un ancho igual o mayor a 576px.
Imagen (móvil)
Permite subir una imagen para dispositivos Móviles que posean un ancho igual o menor a 575px.
Nota: Si subes sólo una de las imágenes, será utilizada en todos los dispositivos.
Video
Permite agregar un video de YouTube o Vimeo al copiar y pegar el Código de incrustación
disponible en las opciones de cada plataforma.
Nota: Una vez que agregues un Video este tendrá predominancia, por ende, incluso cuando hayas subido cualquiera de las imágenes disponibles anteriormente, no se mostrarán.
Proporción del video
Permite definir la forma en que se mostrará el video, en base a las siguientes opciones:
Alineación de contenido
Permite definir la alineación del Contenido
del componente.
Posición vertical
Permite definir la forma en que el Contenido
y Multimedia
se alinearán en base al eje y, en el cual el que posea mayor altura determinará la posición del otro.
Opciones de contenido
A continuación, podrás encontrar varias opciones para el Contenido
del componente:
Margen superior
Permite controlar el margen de la parte superior de la sección.
Margen inferior
Permite controlar el margen de la parte inferior de la sección.
Colores de contenido
Permite elegir el Pack de Colores para el componente.
Este componente permite mostrar productos de cualquier categoría de tu tienda.
Al hacer click en el nombre del componente encontrarás opciones generales para personalizarlo, las cuales determinarán como se verá y comportará la sección. Las opciones disponibles para este componente son las siguientes:
Categoría Destacada
Obligatorio. Aquí debes elegir una categoría para que el componente pueda desplegar productos.
Cantidad de ítems a mostrar
Permite definir la cantidad de productos que serán desplegados en el componente. El orden en que los productos aparecerán será en base al orden que posean dentro de la configuración de la categoría, por lo que deberás editar el listado de productos en ella, considerando el límite que hayas definido en esta opción.
Puedes ver los productos que pertenecen a una categoría específica siguiendo cualquiera de los pasos detallados a continuación:
Opción 1
Productos > Todos los productos
para ver el listado de productos de tu tienda.Opción 2
Productos > Categorías
y selecciona la que quieras al hacer click en su nombre.Ver productos
, el cua lte llevará a la misma página de la Opción 1, pero ya aplicando un filtro en base a la categoría que seleccionaste.Tipo de visualización
Permite definir la forma en que los productos serán mostrados en el componente, en base a las siguientes opciones:
Carrusel
, en el cual puedes controlar aspectos tales como la velocidad, reproducción automática o si quieres mostrar elementos de navegación en él.Nota: La cantidad de productos por fila horizontal para dispositivos de Escritorio y Móviles puede ser modificada en el panel de administración, yendo a
Temas > Editor Visual > Configuración del tema > Bloque de Producto
. Para más detalles sobre esto puedes leer este artículo en donde se explica en detalle.
Habilitar cabecera
Permite desplegar una sección de Cabecera antes de los productos, en la cual puedes agregar los siguientes elementos mediantes sus opciones respectivas:
Categoría
seleccionada, el cual puedes reemplazar al llenar este campo.Categoría
seleccionada al hacer click.Configuraciones del Carrusel
Las siguientes opciones sólo serán consideradas y aplicadas si seleccionaste Carrusel
en la opción Tipo de visualización
:
Margen superior
Permite controlar el margen de la parte superior de la sección.
Margen inferior
Permite controlar el margen de la parte inferior de la sección.
Colores de contenido
Permite elegir el Pack de Colores para el componente.
Este componente te permite mostrar los productos que han sido marcados como Destacados
en la tienda. A continuación, te explicamos como puedes destacarlos y reordenarlos:
Descata tus productos
Productos > Todos los productos
y selecciona un producto de tu tienda al hacer click en su nombre y/o imagen.Producto Destacado
.Listado de productos destacados
Productos > Todos los productos
y antes del listado de productos encontrarás tres opciones. Haz click en la que está más a la derecha.Destacados
.Configuraciones del componente
Al hacer click en el nombre del componente encontrarás opciones generales para personalizarlo, las cuales determinarán como se verá y comportará la sección. Las opciones disponibles para este componente son las siguientes:
Cantidad de ítems a mostrar
Permite definir la cantidad de productos que será desplegada en el componente. El orden que los productos se mostrarán será en base al orden que posean en el listado de productos Destacados
que fue explicado anteriormente, por lo cual deberás editar el listado, considerando el límite que hayas definido en esta opción.
Tipo de visualización
Permite definir la forma en que los productos serán mostrados en el componente, en base a las siguientes opciones:
Carrusel
, en el cual puedes controlar aspectos tales como la velocidad, reproducción automática o si quieres mostrar elementos de navegación en él.Nota: La cantidad de productos por fila horizontal para dispositivos de Escritorio y Móviles puede ser modificada en el panel de administración, yendo a
Temas > Editor Visual > Configuración del tema > Bloque de Producto
. Para más detalles sobre esto puedes leer este artículo en donde se explica en detalle.
Habilitar cabecera
Permite desplegar una sección de Cabecera antes de los productos, en la cual puedes agregar los siguientes elementos mediantes sus opciones respectivas:
Configuraciones del Carrusel
Las siguientes opciones sólo serán consideradas y aplicadas si seleccionaste Carrusel
en la opción Tipo de visualización
:
Margen superior
Permite controlar el margen de la parte superior de la sección.
Margen inferior
Permite controlar el margen de la parte inferior de la sección.
Colores de contenido
Permite elegir el Pack de Colores para el componente.
Nota: Este componente va de la mano con la funcionalidad de Reseñas de productos, la cual sólo está disponible desde el plan PRO en adelante. Si no posees alguno de estos planes no funcionará, incluso cuando tengas el componente agregado en tu tema. Puedes leer más sobre esto en este artículo.
Este componente te permite desplegar reseñas que tus clientes hayan agregado a tus productos y que hayan sido marcados como Destacados. Para que esto funcione de forma correcta, sigue los siguientes pasos:
Reseña de producto
, lo cual puedes realizar en el panel de administración de tu tienda yendo a Configuración > General > Emails
.Productos > Reseñas
para ver el listado completo.Nota: Considera que para que una reseña destacada sea visible en el componente, su estado debe ser
Publicado
.
Configuraciones del componente
Al hacer click en el nombre del componente encontrarás opciones generales para personalizarlo, las cuales determinarán como se verá y comportará la sección. Las opciones disponibles para este componente son las siguientes:
Cantidad de ítems a mostrar
Permite definir la cantidad de reseñas que serán desplegadas en el componente. El orden que se mostrarán será mediante las últimas que hayan sido marcadas como Publicado
y Destacado
.
Tipo de visualización
Permite definir la forma en que las reseñas serán mostradas en el componente, en base a las siguientes opciones:
Carrusel
, en el cual puedes controlar aspectos tales como la velocidad, reproducción automática o si quieres mostrar elementos de navegación en él.Configuraciones del Carrusel
Las siguientes opciones sólo serán consideradas y aplicadas si seleccionaste Carrusel
en la opción Tipo de visualización
:
Número de columnas en escritorio
Permite definir la cantidad de reseñas que serán mostradas por fila horizontal, en dispositivos de Escritorio. La cantidad visible de reseñas en dispositivos más pequeños variará en base a lo que hayas definido en la opción Tipo de visualización
, de la siguiente forma:
Carrusel
Ancho de dispositivo | Cantidad de reseñas (visibles) |
---|---|
Igual o mayor a 992px | Cantidad definida |
Menor a 992px | 3 reseñas |
Menor a 768px | 2 reseñas |
Menor a 576px | 1 reseña |
Grilla
Ancho de dispositivo | Cantidad de reseñas (por fila horizontal) |
---|---|
Igual o mayor a 992px | Cantidad definida |
Menor a 992px | 2 reseñas |
Menor a 576px | 1 reseña |
Alineación de reseñas
Permite definir la alineación del contenido de todas las reseñas en el componente.
Nota: La imagen de la reseña se moverá y posicionará de acuerdo a la opción seleccionada.
Mostrar imagen del producto
Permite mostrar o esconder la imagen del producto para todas las reseñas en el componente.
Formato de fecha de reseñas
Permite definir el formato de la fecha de todas las reseñas del componente, o no mostrarlas.
Aplicar estilo de tarjeta a reseñas
Permite aplicar un estilo de "tarjeta" o "caja" a todas las reseñas. Las siguientes opciones se harán disponibles sólo si esto se habilita:
Habilitar cabecera
Permite desplegar una sección de Cabecera antes de las reseñas, en la cual puedes agregar los siguientes elementos mediantes sus opciones respectivas:
Margen superior
Permite controlar el margen de la parte superior de la sección.
Margen inferior
Permite controlar el margen de la parte inferior de la sección.
Colores de contenido
Permite elegir el Pack de Colores para el componente.
Nota: Esto no afectará las reseñas si la opción
Aplicar estilo de tarjeta a reseñas
está habilitada.
Este componente te permite mostrar cualquier producto de tu tienda, independiente de atributos como su estado (p.e. Destacado) o de su relación con alguna categoría. Funciona mediante un subcomponente llamado Producto de tienda
, el cual es explicado más abajo.
Configuraciones del componente
Al hacer click en el nombre del componente encontrarás opciones generales para personalizarlo, las cuales determinarán como se verá y comportará la sección. Las opciones disponibles para este componente son las siguientes:
Cantidad de ítems a mostrar
Permite definir la cantidad de productos que será desplegada en el componente. The order in which products will be shown it's gonna be determined by the order in which you add them.
Nota: Si agregas más productos que la cantidad definida, no serán disponibles en el componente.
Tipo de visualización
Permite definir la forma en que los productos serán mostrados en el componente, en base a las siguientes opciones:
Carrusel
, en el cual puedes controlar aspectos tales como la velocidad, reproducción automática o si quieres mostrar elementos de navegación en él.Nota: La cantidad de productos por fila horizontal para dispositivos de Escritorio y Móviles puede ser modificada en el panel de administración, yendo a
Temas > Editor Visual > Configuración del tema > Bloque de Producto
. Para más detalles sobre esto puedes leer este artículo en donde se explica en detalle.
Habilitar cabecera
Permite desplegar una sección de Cabecera antes de los productos, en la cual puedes agregar los siguientes elementos mediantes sus opciones respectivas:
Configuraciones del Carrusel
Las siguientes opciones sólo serán consideradas y aplicadas si seleccionaste Carrusel
en la opción Tipo de visualización
:
Margen superior
Permite controlar el margen de la parte superior de la sección.
Margen inferior
Permite controlar el margen de la parte inferior de la sección.
Colores de contenido
Permite elegir el Pack de Colores para el componente.
Configuraciones del subcomponente
Tal como fue mencionado previamente, el subcomponente para Productos Seleccionados
se llama Producto de tienda
. Puedes agregar todos los que quieras, sin embargo, sólo los que estén dentro del límite definido en la opción Cantidad de ítems a mostrar
del componente serán visibles.
Dentro del listado del componente verás el botón Agregar nuevo producto de tienda, el cual agregará un subcomponente. Al hacer click en su nombre sólo encontrarás una opción en su configuración, llamada Producto
, en donde deberás elegir el producto que quieres mostrar.
Nota: Puedes leer más sobre los Subcomponentes en esta sección de la página.
Este componente te permite mostrar una imagen, para dispositivos de escritorio y para dispositivos móviles, con algunas opciones para definir cómo se verá:
Imagen (escritorio)
Permite subir una imagen para dispositivos de Escritorio que posean un ancho igual o mayor a 576px.
Imagen (móvil)
Permite subir una imagen para dispositivos Móviles que posean un ancho igual o menor a 575px.
Nota: Si subes sólo una de las imágenes, será utilizada en todos los dispositivos.
Ancho
Permite definir el ancho al cual se restringirá la imagen del componente.
Nota: Puedes leer más sobre cómo cada opción se comporta en esta sección, en la parte de Otros tamaños de ancho.
Posición horizontal del contenido
Permite definir la posición en que la imagen se ubicará respecto del eje “x” (horizontal).
Nota: Esto no será visible si seleccionaste
Ancho de grilla
oAncho completo
en la opciónAncho
.
Margen superior
Permite controlar el margen de la parte superior de la sección.
Margen inferior
Permite controlar el margen de la parte inferior de la sección.
Colores de contenido
Permite elegir el Pack de colores para el componente, lo cual básicamente aplicará un color al fondo.
Este componente te permite mostrar las últimas publicaciones de la cuenta de Instagram que puede conectarse a tu tienda.
Si todavía no la has conectado, por favor sigue estos pasos para hacerlo:
Configuración > General > Preferencias > Redes Sociales
y haz click en el botón “Editar información” que se encuentra en dicha sección.Instagram Login
que se encuentra abajo al final.Nota: Puede ocurrir que en ocasiones tu cuenta de Instagram se desconecte o desvincule, lo cual generalmente es por motivos de seguridad. Si llega a suceder, puedes seguir los pasos anteriores y conectarla nuevamente.
Configuraciones del componente
Al hacer click en el nombre del componente encontrarás opciones generales para personalizarlo, las cuales determinarán como se verá y comportará la sección. Las opciones disponibles para este componente son las siguientes:
Número de publicaciones de Instagram
Permite definir la cantidad máxima de publicaciones a mostrar en el componente.
Tipo de visualización
Permite definir la forma en que las publicaciones serán mostrados en el componente, en base a las siguientes opciones:
Carrusel
Las publicaciones se mostrarán dentro de un Carrusel
, en el cual puedes controlar aspectos tales como la velocidad, reproducción automática o si quieres mostrar elementos de navegación en él. La cantidad de publicaciones visibles para esta opción variará dependiendo del ancho del navegador, en base a las definiciones de la siguiente tabla:
Ancho de dispositivo | Cantidad visible de publicaciones |
---|---|
Igual o mayor a 1201px | 6 publicaciones |
Igual o menor a 1200px | 5 publicaciones |
Igual o menor a 991px | 4 publicaciones |
Igual o menor a 767px | 3 publicaciones |
Igual o menor a 414px | 2 publicaciones |
Grilla
Las publicaciones serán mostradas en columnas, una junto a la otra de forma horizontal y vertical. La forma en que las columnas se distribuyan variará dependiendo de lo que elijas en la opción Número de publicaciones de Instagram
y el ancho del navegador, en base a las definiciones de la siguiente tabla:
Nº de publicaciones de Instagram | >= 992px (Escritorio) | >= 768px (Tabletas) | >= 576px (Tableta pequeña) | <= 575px (Móvil) | <= 414px (Móvil pequeño) |
---|---|---|---|---|---|
6 publicaciones | 6 columnas / 1 fila | 3 columnas / 2 filas | 3 columnas / 2 filas | 3 columnas / 2 filas | 2 columnas / 3 filas |
8 publicaciones | 8 columnas / 1 fila | 4 columnas / 2 filas | 4 columnas / 2 filas | 2 columnas / 4 filas | 2 columnas / 4 filas |
12 publicaciones | 6 columnas / 2 fila | 4 columnas / 3 filas | 3 columnas / 4 filas | 3 columnas / 4 filas | 2 columnas / 6 filas |
Eliminar espacio entre publicaciones
Permite definir si las publicaciones tendrán un espacio entre ellas, lo cual permite proveer una forma de presentarlas de forma distinta dependiendo del estilo que quieras darle a tu tema.
Título
Texto que se muestra antes del nombre de la cuenta
de Instagram, el cual es desplegado en el componente (antes de las publicaciones) una vez que conectas la cuenta.
Configuraciones del Carrusel
Las siguientes opciones sólo serán consideradas y aplicadas si seleccionaste Carrusel
en la opción Tipo de visualización
:
Margen superior
Permite controlar el margen de la parte superior de la sección.
Margen inferior
Permite controlar el margen de la parte inferior de la sección.
Colores de contenido
Permite elegir el Pack de Colores para el componente.
Este componente te permite mostrar una colección o grupo de páginas de tu tienda. Incluso cuando haremos referencia en su mayoría a “Blog, en la realidad puedes ampliar y utilizar esto para mostrar básicamente lo que quieras.
Para entender como este componente está conectado a las páginas de la tienda, debes tener presente lo siguiente:
Personalización > Páginas > Todas las páginas
, notarás al lado izquierdo una sección llamada Categorías
.Posts
.A continuación, explicamos como puedes vincular una página a una categoría, en este caso, para el Blog:
dominio-tienda.jumpseller.com/blog
.Nota: Puedes realizar estas acciones y seguir los mismos pasos para lograr algo similar para cualquier otra página que desees ccrear, como por ejemplo una página de “Noticias”.
Configuraciones del componente
Al hacer click en el nombre del componente encontrarás opciones generales para personalizarlo, las cuales determinarán como se verá y comportará la sección. Las opciones disponibles para este componente son las siguientes:
Categoría de página
Permite definir la categoría en base a la cual se mostrarás las páginas (posts) dentro del componente. Este menú desplegable te presentará todas las categorías que tienes creadas en el panel de administración de la tienda.
Cantidad de ítems a mostrar
Allows to define the amount of posts that will be displayed within the component. The order in which posts will be shown it's gonna be determined by the order defined within the Blog page settings. To know how to control this follow these steps:
Permite definir la cantidad de posts que serán mostrados en el componente. El orden en que los posts se mostrarán estará determinado por el orden definido dentro de la configuración de la página Blog. Para saber como administrar esto sigue los siguientes pasos:
Páginas > Todas las páginas
en el panel de administración de tu tienda.Post
.Orden de la categoría
te permitirá definir cómo los posts se mostrarán dentro del componente, lo cual también afectará a la página Blog.Actualizar
para guardar el cambio, o en el botón Cancelar
para que no sea considerado.Tipo de visualización
Permite definir la forma en que los posts serán mostrados dentro del componente, lo cual se verá afectado por las opciones Número de columnas en escritorio
y Número de columnas en móvil
, en base a las siguientes opciones:
Carrusel
Los posts se mostrarán dentro de un Carrusel
, en el cual puedes controlar aspectos tales como la velocidad, reproducción automática o si quieres mostrar elementos de navegación en él. La cantidad visible de posts para esta opción variará dependiendo del ancho del navegador, en base a las definiciones de la siguiente tabla:
Ancho de dispositivo | Cantidad visible de posts |
---|---|
Igual o mayor a 992px | Número de columnas en escritorio |
Igual o menor a 991px | 2 posts |
Igual o menor a 575px | Número de columnas en móvil |
Igual o menor a 414px | 1 post |
Grilla
Los posts serán mostradas en columnas, una junto a la otra de forma horizontal y vertical. La forma en que se distribuirán las columnas para esta opción será de acuerdo a las definiciones de la siguiente tabla:
Escritorio (Igual o mayor a 992px) | Tabletas (Igual o mayor a 576px) | Móvil (Igual o menor a 575px) | Móvil pequeño (Igual o menor a 414px) |
---|---|---|---|
Número de columnas en escritorio | 2 columnas | Número de columnas en móvil | 1 columna |
Habilitar cabecera
Permite desplegar una sección de Cabecera antes de posts, en la cual puedes agregar los siguientes elementos mediantes sus opciones respectivas:
Configuraciones del Carrusel
Las siguientes opciones sólo serán consideradas y aplicadas si seleccionaste Carrusel
en la opción Tipo de visualización
:
Margen superior
Permite controlar el margen de la parte superior de la sección.
Margen inferior
Permite controlar el margen de la parte inferior de la sección.
Colores de contenido
Permite elegir el Pack de Colores para el componente.
Este componente te permite mostrar los productos más recientes que hayas creado y/o agregado a tu tienda. El orden en que se mostrarán es automático, y será en base al orden en que los creaste en el panel de administración de tu tienda.
Configuraciones del componente
Al hacer click en el nombre del componente encontrarás opciones generales para personalizarlo, las cuales determinarán como se verá y comportará la sección. Las opciones disponibles para este componente son las siguientes:
Cantidad de ítems a mostrar
Permite definir la cantidad de productos que será desplegada en el componente.
Tipo de visualización
Permite definir la forma en que los productos serán mostrados en el componente, en base a las siguientes opciones:
Carrusel
, en el cual puedes controlar aspectos tales como la velocidad, reproducción automática o si quieres mostrar elementos de navegación en él.Nota: La cantidad de productos por fila horizontal para dispositivos de Escritorio y Móviles puede ser modificada en el panel de administración, yendo a
Temas > Editor Visual > Configuración del tema > Bloque de Producto
. Para más detalles sobre esto puedes leer este artículo en donde se explica en detalle.
Habilitar cabecera
Permite desplegar una sección de Cabecera antes de los productos, en la cual puedes agregar los siguientes elementos mediantes sus opciones respectivas:
Configuraciones del Carrusel
Las siguientes opciones sólo serán consideradas y aplicadas si seleccionaste Carrusel
en la opción Tipo de visualización
:
Margen superior
Permite controlar el margen de la parte superior de la sección.
Margen inferior
Permite controlar el margen de la parte inferior de la sección.
Colores de contenido
Permite elegir el Pack de Colores para el componente.
Este componente te permite agregar una línea de forma tal de crear una división más notoria entre componentes y secciones dentro del tema. Las opciones para este componente son las siguientes:
Ancho
Permite definir el ancho que tendrá la línea, en base a las siguientes opciones:
Grosor de línea
Permite ajustar el grosor de la línea, de forma tal que puedas hacer que sea más notoria, de ser necesario.
Opacidad de línea
Permite controlar la opacidad (transparencia) de la línea. El color para ella considerará la opción Texto principal
del Pack de Colores del componente.
Margen superior
Permite controlar el margen interior superior de la sección.
Margen inferior
Permite controlar el margen interior inferior de la sección.
Colores de contenido
Permite elegir el Pack de Colores para el componente.
Este componente te permite mostrar las Ubicaciones que has agregado en el panel de administración de tu tienda, dentro de Configuración > Checkout > Ubicaciones
. Las opciones para que puedas personalizar este componente son las siguientes:
Habilitar cabecera
Permite desplegar una sección de Cabecera antes de las ubicaciones, en la cual puedes agregar los siguientes elementos mediantes sus opciones respectivas:</p>
Ubicaciones a mostrar
Permite definir qué tipo de ubicaciones se mostrarán dentro del componente, en base a las siguientes opciones:
Punto de Retiro
.Nota: La funcionalidad de
Recogidas Locales
sólo está disponible para ser utilizada en el Checkout versión 2, el cual puedes revisar en el panel de administración de tu tienda yendo aConfiguración > Checkout > Preferencias > Versión de Checkout
.
Cantidad de ubicaciones por fila
Permite definir la cantidad de columnas en que serán mostradas las ubicaciones dentro del componente. La forma en que se distribuirán en distintos dispositivos será en base a las definiciones de la siguiente tabla:
Dispositivo / Valor de opción | 3 columnas | 2 columnas | 1 columna |
---|---|---|---|
Escritorio (Igual o mayor a 992px) | 3 columnas por fila horizontal | 2 columnas por fila horizontal | 1 columna, apilada verticalmente |
Tabletas (Igual o mayor a 576px) | 2 columnas por fila horizontal | 2 columnas por fila horizontal | 1 columna, apilada verticalmente |
Móviles (Igual o menor a 575px) | 1 columna, apilada verticalmente | 1 columna, apilada verticalmente | 1 columna, apilada verticalmente |
Alineación de contenido
Permite definir la alineación del contenido de todas las ubicaciones dentro del componente.
Opciones de información de ubicaciones
Las siguientes opciones permiten definir cuáles detalles de las ubicaciones serán visibles dentro del componente:
Margen superior
Permite controlar el margen de la parte superior de la sección.
Margen inferior
Permite controlar el margen de la parte inferior de la sección.
Colores de contenido
Permite elegir el Pack de Colores para el componente.
Este componente te permite desplegar una colección de imágenes, las cuales pueden ser por ejemplo logotipos de marcas que vendas en tu tienda, empresas asociadas, productos destacados o básicamente cualquier cosa que desees comunicar mediante el uso de imágenes.
Funciona mediante el uso de un subcomponente llamado Logo
, para lo cual puedes agregar todos los que quieras.
Configuraciones del componente
Al hacer click en el nombre del componente encontrarás opciones generales para personalizarlo, las cuales determinarán como se verá y comportará la sección. Las opciones disponibles para este componente son las siguientes:
Tipo de visualización
Permite definir la forma en que los Logos
serán mostrados en el componente, en base a las siguientes opciones:
Carrusel
, en el cual puedes controlar aspectos tales como la velocidad, reproducción automática o si quieres mostrar elementos de navegación en él.Número de columnas en escritorio
Permite definir la forma en que los logos se mostrarán en dispositivos de escritorio, considerando los que posean un ancho igual o mayor a 768px, en base a lo que hayas definido en la opción Tipo de visualización
, de la siguiente forma:
Carrusel
Esta opción considerará la cantidad de logos que sean visibles en el Carrusel:
Ancho de dispositivo | Cantidad de logos |
---|---|
Igual o mayor a 1201px | Cantidad definida |
Igual o mayor a 992px | 4 logos |
Igual o mayor a 768px | 3 logos |
Grilla
Esta opción distribuirá los logos en columnas dentro de filas horizontales, en base a la cantidad definida:
Valor de opción | Escritorio (Igual o mayor a 992px) | Tabletas (Igual o mayor a 768px) |
---|---|---|
8 | 8 columnas | 4 columnas |
7 | 7 columnas | 4 columnas |
6 | 6 columnas | 4 columnas |
5 | 5 columnas | 4 columnas |
4 | 4 columnas | 4 columnas |
3 | 3 columnas | 3 columnas |
2 | 2 columnas | 2 columnas |
Número de columnas en móvil
Permite definir la forma en que los logos se mostrarán en dispositivos móviles, considerando los que posean un ancho igual o menor a 767px, en base a lo que hayas definido en la opción Tipo de visualización
, de la siguiente forma:
Carrusel
Esta opción considerará la cantidad de logos que sean visibles en el Carrusel:
Ancho de dispositivo | Cantidad de logos |
---|---|
Igual o menor a 575px | Cantidad definida |
Igual o mayor a 414px | Siempre 2 logos |
Grilla
Esta opción distribuirá los logos en columnas dentro de filas horizontales, en base a la cantidad definida:
Valor de opción | Móvil (Igual o menor a 767px) |
---|---|
3 | 3 columnas |
2 | 2 columnas |
1 | 1 columna |
Habilitar cabecera
Permite desplegar una sección de Cabecera antes de los logos, en la cual puedes agregar los siguientes elementos mediantes sus opciones respectivas:
Configuraciones del Carrusel
Las siguientes opciones sólo serán consideradas y aplicadas si seleccionaste Carrusel
en la opción Tipo de visualización
:
Margen superior
Permite controlar el margen de la parte superior de la sección.
Margen inferior
Permite controlar el margen de la parte inferior de la sección.
Colores de contenido
Permite elegir el Pack de Colores para el componente.
Configuraciones del subcomponente
Tal como fue mencionado anteriormente, el subcomponente de Galería de logotipos
se llama Logo
y puedes agregar todos los que quieras. Las opciones para este subcomponente son las siguientes:
Imagen
Permite subir una imagen o logo.
Enlace
Permite agregar un enlace a cualquier contenido de la tienda, como por ejemplo categorías, productos, páginas, enlaces externos, etc., en cuyo caso el Logo
será clickable.
Texto del enlace
Texto que será visible cuando un usuario haga "hover" sobre la imagen.
Habilitar como enlace externo
Al habilitar, el enlace se abrirá en una nueva pestaña del navegador.
Este componente le permite a los usuarios suscribirse a tu tienda, lo cual los creará (registrará) como Clientes
dentro de la base de datos de tu panel de administración. Puedes revisar el listado completo yendo a Clientes > Todos los clientes
.
Una vez que un cliente se suscriba, se gatillarán o efectuarán ciertas acciones:
Cuenta habilitada
, dentro de Configuración > General > Emails > Correos Transaccionales
, el cliente recibirá un correo para confirmar la suscripción.Reestablecer contraseña
disponible en la Página de Ingreso de tu tienda (ej: tu-dominio.jumpseller.com/customer/login). También se les enviará el enlace cuando confirmen la suscripción.Nuevo cliente
, dentro de Configuración > General > Emails > Correos electrónicos del administrador
, recibirás una notificación cuando el usuario confirme de forma exitosa la suscripción.CAPTCHA en el registro de clientes
, dentro de Configuración > General > Protección contra el spam
, los usuarios tendrán que completar de forma obligatoria una tarea que se hará visible, mediante la herramienta de Google reCAPTCHA, para poder suscribirse.Nota: Incluso cuando suene un poco obvio, un usuario no podrá suscribirse más de una vez con el mismo correo, puesto que las cuentas de cliente son administradas mediante ese atributo.
Si deseas realizar más cosas y aprovechar lo que este componente permite, puedes por ejemplo instalar la Aplicación de Mailchimp para sincronizar tu listado de clientes y enviar correos de marketing. Puedes leer más sobre esto en los siguientes enlaces:
Las opciones disponibles para que puedas personalizar este componente son las siguientes:
Alineación de contenido
Permite definir la alineación del contenido del componente (Título, Descripción) y del formulario del newsletter.
Nota: Esto afectará la ubicación en que sea posicionado el formulario.
Título
Permite agregar un título para el componente, el cual se mostrará al principio de la sección.
Descripción
Permite agregar un texto o descripción bajo el título. Puede ser útil para dar contexto y/o incentivar a los usuarios a suscribirse mediante, por ejemplo, la entrega de algunos beneficios que sean claves para hacerlo.
Texto de muestra del campo correo
Permite definir el texto que será visible dentro del campo de correo.
Texto del Botón
Permite definir el texto del botón del formulario.
Texto de descargo de responsabilidad
Permite mostrar un texto debajo del formulario, el cual puede ser útil por ejemplo para proveer información a los usuarios respecto de que aceptan los términos de tu tienda al suscribirse, o para lo que consideres necesario.
Margen superior
Permite controlar el margen de la parte superior de la sección.
Margen inferior
Permite controlar el margen de la parte inferior de la sección.
Colores de contenido
Permite elegir el Pack de Colores para el componente.
Este componente te permite destacar un producto específico de forma individual de tu tienda con todos sus detalles tales como nombre, opciones y variantes, atributos como SKU y marca, stock, precio, etc. Puede ser útil por ejemplo para mostrar un producto relevante de tu tienda o que posea un descuento especial.
Para los efectos de este componente, nos referiremos por Contenido
a la columna que contiene todos los detalles del producto, como es el caso del Nombre, Precio, Formulario, etc.; Por el contrario, nos refererimos como Galería
a la columna que muestra la(s) imagen(es) del producto.
Nota: Este componente puede ser agregado en cualquier plantilla del tema, a excepción de la plantilla de Producto.
Configuraciones del componente
Al hacer click en el nombre del componente encontrarás opciones generales para personalizarlo, las cuales determinarán como se verá y comportará la sección. Las opciones disponibles para este componente son las siguientes:
Producto
En este campo debes elegir el producto que deseas destacar.
Invertir orden de columnas en escritorio
Permite invertir el orden de las columnas del componente, en cuyo caso el Contenido
se moverá al lado izquierdo de la sección, mientras que la Galería
se moverá a la derecha.
Nota: Este cambio sólo se verá aplicado en dispositivos que posean un ancho igual o mayor a 768px. Para dispositivos menores a dicho valor, el
Contenido
se posicionará automáticamente bajo laGalería
.
Alineación de contenido
Permite definir la alineación del Contenido
del componente.
Opciones de galería
El siguiente grupo de opciones te permitirá personalizar ciertos aspectos de la Galería
del componente.
Dimensión de imagen
Permite definir la forma en que las imágenes serán presentadas en el component, en base a las siguientes opciones:
16:9
.3:4
.4:3
.1:1
.Visualización de imágenes
Permite definir la forma en que la(s) imagen(es) del producto se adaptarán al espacio disponible relacionado con la dimensión escogida anteriormente, en base a las siguientes opciones:
Mostrar miniaturas en galería
Permite mostrar una Galería
secundario con miniaturas de las imágenes del producto en conjunto con la principal, con las cuales los usuarios podrán hacer click para verlas. Presentará flechas izquierda y derecha para controlarla.
Nota: Si deshabilitas esta opción, la
Galería
principal mostrará flechas dentro de ella, para que los usuarios puedan controlarla y ver más imágenes.
Posición de miniaturas en escritorio
Permite definir la posición de las Miniaturas de la Galería
en dispositivos de escrittorio que posean un ancho igual o mayor a 992px. Para dispositivos con un ancho menor a ese, se posicionarán automáticamente bajo la principal.
Habilitar Zoom en las imágenes
Permite a los usuarios hacer zoom en las imágenes del producto al pasar el mouse sobre ellas. Para esto es importante que consideres subir imágenes en una dimensión mayor a la que se muestra en tu tienda.
Fijar imagen de producto
Permite fijar la imagen del producto a la parte superior de la Cabecera
del tema (de estar fijo también) y/o al Navegador
, para que acompañe a los usuarios mientras bajan en la página.
Puedes leer más sobre el tamaño y dimensión ideal para imágenes en esta sección de la página.
Margen superior
Permite controlar el margen de la parte superior de la sección.
Margen inferior
Permite controlar el margen de la parte inferior de la sección.
Colores de contenido
Permite elegir el Pack de Colores para el componente.
Nota: This will be applied to the entire section, but won't affect the product and its details if
Apply Card style
is enabled.
Nota: Esto será aplicado a toda la sección, pero no afectará al producto y sus detalles si habilitaste la opción
Aplicar estilo de tarjeta
.
Aplicar estilo de tarjeta
Permite aplicar un estilo de "tarjeta" o "caja" al contenedor que envuelve toda la información del producto. Las siguientes opciones se harán disponibles sólo si esto se habilita:
Componentes de Producto seleccionado
El componente Producto seleccionado funciona permitiéndote elegir qué contenido quieres mostrar en él, mediante varios subcomponentes que son los detalles del producto. Para cada uno de ellos tendrás la posibilidad de editar, mover, esconder y eliminar. Los que están disponibles para ser utilizados son los siguientes:
Nota: Algunos de estos subcomponentes no poseerán opciones dentro de su configuración, ya que son principalmente utilizados para mostrar la información. Por ende, la forma en que se vean y/o comporten puede ser administrado en la sección
Configuración del tema
del Editor Visual, debido a que son opciones generales que afectan otras páginas, componentes o plantillas dentro del tema.
Atributos
Permite mostrar el SKU
y la Marca
del producto, en conjunto con otras opciones para personalizar cómo se ven y comportan:
Nota: Si un producto no posee estos atributos, nada se mostrará. Por el contrario, si un producto posee ambos atributos y has optado por mostrarlos, serán separados por una línea vertical. El orden siempre será primero SKU y después Marca.
Mostrar antes de imagen de producto en Móviles
Por defecto los Atributos
se mostrarán debajo o después de la Galería
del producto en dispositivos móviles. Esta opción permite modificar el comportamiento y ubicarlos antes o arriba.
Mostrar SKU del producto
Permite definir si el SKU
del producto será desplegado o no.
Mostrar texto antes del SKU
Permite desplegar un texto antes del SKU
del producto, como por ejemplo "SKU: 1234".
Mostrar marca del producto
Permite definir si la Marca
del producto será desplegada o no.
Title
Este subcomponente permite desplegar el nombre del producto, el cual posee las siguientes opciones para personalizarlo:
Mostrar antes de imagen de producto en Móviles
Por defecto el Nombre/Título
se mostrará debajo o después de la Galería
del producto en dispositivos móviles. Esta opción permite modificar el comportamiento y ubicarlo antes o arriba.
Mostrar título en mayúsculas
Permite forzar que el título se muestre en mayúsculas, incluso cuando no haya sido escrito de esa forma, por ejemplo NOMBRE DE PRODUCTO.
Precio
Este subcomponente permite mostrar el precio del producto, el cual posee las siguientes opciones para personalizarlo:
Mostrar antes de imagen de producto en Móviles
Por defecto el Precio
se mostrará debajo o después de la Galería
del producto en dispositivos móviles. Esta opción permite modificar el comportamiento y ubicarlo antes o arriba.
Visualización de precios
Permite definir la forma en que el precio se mostrará cuando el producto posea un descuento visible (promoción), en base a las siguientes dos opciones:
Mostrar etiqueta de descuentos
Permite mostrar una "etiqueta" de descuento al lado derecho del precio. Los colores de esta serán los que definas en Temas > Editor Visual > Configuración del tema > Colores
.
Nota: la etiqueta de descuento también se verá afectada por la opción
Visualización de precios
.
Mostrar mensaje de fecha límite de promociones
Permite desplegar un mensaje bajo el o los precios mencionando que existe una fecha en la cual el descuento (promoción) expira o termina. Sólo funcionará si la promoción posee una Fecha Límite
definida en su configuración.
Estrellas de reseñas de producto
Este subcomponente permite mostrar la calificación
o puntuación
junto a las estrellas
de un producto que posea reseñas.
Nota: la funcionalidad de Reseñas de Productos sólo está disponible desde el plan PRO en adelante. Por ende, incluse cuando tengas este subcomponente agregado pero no poseas el plan necesario, nada se mostrará. Lo mismo sucederá para un producto que no posea reseñas.
Stock
Este subcomponente permite mostrar el Stock
del producto. Cómo esto se verá y comportará se explica en este artículo.
Formulario de producto
Este subcomponente permite mostrar el Formulario
con el cual los clientes pueden agregar el producto al carro.
Cómo esto se verá y comportará se explica en este artículo.
Ubicaciones con Stock de producto
Este subcomponente permite mostrar un botón, el cual al hacer click abrirá un panel lateral
desde el lado derecho del navegador. Este panel mostrará el listado de ubicaciones y el estado respectivo del stock.
Las opciones para personalizarlo son las siguientes:
panel lateral
que se abre al hacer click en el botón.Otras opciones para este subcomponente se encuentran en Temas > Editor Visual > Configuración del tema > Formulario de producto
, las cuales se explican en el siguiente artículo.
Descripción
Este subcomponente permite mostrar la Descripción
del producto, la cual puede ser agregada para todos los productos de tu tienda.
Las opciones para personalizarlo son las siguientes:
Título
Permite mostrar un título antes de la descripción.
Colapsar descripción
Permite reestringir la altura de la descripción del producto, en base al umbral
de la opción siguiente. Esto es útil si tus productos poseen descripciones largas, las cuales por ejemplo, puedan generar un espacio blanco muy notorio entre las columnas de Galería
y Contenido
.
Al habilitar, se desplegará un enlace con el texto "Leer más" en la parte inferior de la descripción. Al hacer click, la descripción se expandirá a su alto máximo posible, en cuyo caso el texto del enlace cambiar a "Leer menor". En un segundo click, la descripción se colapsará nuevamente.
Umbral para colapsar la altura
Permite definir la altura a la cual se colapsará la descripción, siempre y cuando la opción anterior se encuentre habilitada.
Compartir producto
Este subcomponente te permite desplegar un listado de enlaces que le permitirán a los usuarios compartir el producto.
Las opciones para personalizarlo son las siguientes:
Importante: En dispositivos móviles esto cambiará a un único botón, el cual al hacer click abrirá las opciones nativas para compartir del dispositivo del usuario.
Línea divisoria
Este subcomponente permite agregar una línea divisoria, la cual puede ser útil para generar una separación más notoria entre el contenido del componente principal.
Las opciones para personalizarlo son las siguientes:
Texto principal
del Pack de Colores del componente.Este componente es una de las secciones más utilizadas e implementadas en los sitios web. Te permite agregar y mostrar varios subcomponentes dentro de él, los cuales se llaman Slide
, con múltiple contenido dentro de ellos y varias opciones para personalizarlo.
Configuraciones del componente
Al hacer click en el nombre del componente encontrarás opciones generales para personalizarlo, las cuales determinarán como se verá y comportará la sección. Las opciones disponibles para este componente son las siguientes:
Ancho
Permite definir el ancho máximo que tendrá la sección, en base a las siguientes opciones:
Nota: El tamaño de las imágenes que puedes subir en cada
Slide
variarán dependiendo de la opción que selecciones aquí. Estas se explican en detalle en esta sección de la página.
Tipo de contenido
Permite definir la forma en que se verá cada Slide y las opciones que serán consideradas dentro de su configuración respectiva. Las opciones disponibles son las siguientes:
Slide
funcionarán como fondo y el contenido (ej: Título) será posicionado sobre ellas.Nota: Al elegir
Sólo imagen
sólo deberás considerar las siguientes opciones dentro de la configuración de unSlide
: Imagen (escritorio y móvil), Enlace y Texto del enlace.
Altura
Permite definir la altura de todo el componente, en base a las siguientes opciones:
Nota 1: Hacemos referencia a un mínimo, ya que la altura de la sección variará dependiendo de la cantidad y/o que tan extenso sea el contenido que agregues en el componente.
Nota 2: El tamaño de las imágenes que puedes subir en cada
Slide
variarán dependiendo de la opción que selecciones aquí. Estas se explican en detalle en esta sección de la página.
Configuraciones del Slider
Las siguientes opciones te permite personalizar ciertos atributos del componente:
Margen superior
Permite controlar el margen de la parte superior de la sección.
Margen inferior
Permite controlar el margen de la parte inferior de la sección.
Configuraciones del subcomponente
Tal como ya mencionamos, el subcomponente de un Slider
se llama Slide
, y puedes agregar todos los que quieras. Las opciones para este subcomponente son las siguientes:
Imagen (escritorio)
Permite subir una imagen para dispositivos de Escritorio que posean un ancho igual o mayor a 576px.
Imagen (móvil)
Permite subir una imagen para dispositivos Móviles que posean un ancho igual o menor a 575px.
Nota: Si subes sólo una de las imágenes, será utilizada en todos los dispositivos.
Overlay de la imagen
Permite definir la opacidad (transparencia) para el elemento Overlay
.
Posición horizontal de la imagen
Permite definir la posición horizontal para cualquiera de las imágenes anteriores, sólo cuando Tipo de contenido
sea igual a Imagen + Contenido
en la configuración del componente principal.
Posición vertical de la imagen
Permite definir la posición vertical para cualquiera de las imágenes anteriores, sólo cuando Tipo de contenido
sea igual a Imagen + Contenido
en la configuración del componente principal.
Nota: Vertical and horizontal positioning is most noticeably visible when images are wider or large than the defined
Width
and/orHeight
.
Alineación de contenido
Allows to define the aligment for the content of the slides.
Posición horizontal del contenido
Permite definir la forma en que the content of the slides will position withihn the x axis (horizontal).
Opciones de contenido
A continuación, encontrarás varias opciones para agregar contenido a un Slide
:
Slide
is about. Intenta que sea breve para que no colapse el espacio disponible.Opciones de enlace
A continuación, encontrarás varias opciones para personalizar el Enlace de un Slide
:
Slide
will still be clickable as a whole.Nota: Subtítulo, Título, Descripción, Overlay y Mostrar enlace como botón sólo se desplegarán y serán visibles si la opción
Tipo de contenido
es igual aImagen + Contenido
. Para el caso de la opciónSólo imagen
, sólo deberás considerar las opcionesImagen
(escritorio y móvil),Enlace
yTexto del enlace
.
Colores de contenido
Permite elegir el Pack de Colores para cada Slide
.
Este componente te permite desplegar contenido bien variable, similar a lo que se puede lograr con el componente Contenido dinámico, pero con la diferencia clave que las Imágenes y Contenido siempre serán apiladas verticalmente, una bajo la otra, al elegir Grilla
en la opción Tipo de sección
de la configuración del componente.
Funciona al agregar varios subcomponentes, llamados Característica
, en los cuales puedes agregar imágenes y contenido (ej: Título, descripción).
Configuraciones del componente
Al hacer click en el nombre del componente encontrarás opciones generales para personalizarlo, las cuales determinarán como se verá y comportará la sección. Las opciones disponibles para este componente son las siguientes:
Opciones de cabecera
Las siguientes opciones y elementos pueden ser desplegadas en la sección Cabecera que se posiciona antes del contenido del componente. Si todas estas se encuentran vacías, la sección (cabecera) no será visible.
Tamaño de imágenes
Permite definir la forma en que las imágenes de cada Característica
serán mostradas, en base a las siguientes opciones:
520x300 px
.Tipo de sección
Permite definir la forma en las Características serán mostrados en el componente, en base a las siguientes opciones:
Carrusel
, en el cual puedes controlar aspectos tales como la velocidad, reproducción automática o si quieres mostrar elementos de navegación en él.Para la opción Grilla
, la(s) Imagen(es) se posicionará al lado izquierdo, mientras que el Contenido a la derecha. Este comportamiento cambiará de forma opuesta en los bloques pares (ej: 2, 4, 6, etc.) y sólo para dispositivos de escritorio. En dispositivos móviles la(s) imagen(es) siempre se posicionará primero.
Número de columnas en escritorio
Permite definir la forma en que las Características se desplegarán en dispositivos de escritorio, en base a las definiciones de la siguiente tabla:
Ancho de dispositivo | Cantidad de columnas |
---|---|
Igual o mayor a 992px | Cantidad definida |
Igual o mayor a 768px | 2 columnas |
Menor a 767px | 1 columna |
Nota: Esta opción sólo aplicará si
Tipo de sección
es igual aCarrusel
.
Opciones de color
Las siguientes opciones te permitirán personalizar ciertos colores dentro del componente:
hover
.Nota: El color del texto de los botones será ajustado de forma automática en base al contraste necesario que requieran.
Configuraciones del Carrusel
Las siguientes opciones sólo serán consideradas y aplicadas si escogiste Carrusel
en la opción Tipo de sección
:
Configuraciones del subcomponente
Tal como ya fue mencionado, el subcomponente del componente Características de la tienda
se llama Característica
, al cual nos referiremos como Bloque
, y puedes todos los que requieras para proveer la información necesaria a tus clientes. Las opciones para este subcomponente son las siguientes:
Imagen (escritorio)
Permite subir una imagen para dispositivos de Escritorio que posean un ancho igual o mayor a 576px.
Imagen (móvil)
Permite subir una imagen para dispositivos Móviles que posean un ancho igual o menor a 575px.
Nota: Si subes sólo una de las imágenes, será utilizada en todos los dispositivos.
Título
Permite definir un título para el bloque, el cual se mostrará posterior a la(s) imagen(es).
Descripción
Permite agregar un text para dar más contexto sobre lo que trata el bloque. Se muestra bajo el Título.
Enlace a página
Permite agregar un enlace a cualquier contenido de la tienda, como por ejemplo categorías, productos, páginas, enlaces externos, etc.
Texto del enlace
Texto que se mostrará en el enlace.
Este componente te permite agregar Testimonios
de tus clientes de forma manual y personalizada, los cuales pueden ser utilizados para aumentar la confianza entre tus clientes al proveed feedback y/o comentarios que hayas recibido sobre variados temas.
Funciona agregando múltiples subcomponentes, llamados Testimonio
, a los cuales nos referiremos como Bloque(s), para efectos prácticos.
Configuraciones del componente
Al hacer click en el nombre del componente encontrarás opciones generales para personalizarlo, las cuales determinarán como se verá y comportará la sección. Las opciones disponibles para este componente son las siguientes:
Tipo de visualización
Permite definir la forma en que los bloques serán mostrados en el componente, en base a las siguientes opciones:
Carrusel
, en el cual puedes controlar aspectos tales como la velocidad, reproducción automática o si quieres mostrar elementos de navegación en él.Alineación de contenido
Permite definir la alineación de todos los bloques del componente.
Número de columnas en escritorio y móvil
Permite definir la cantidad de columnas en que los bloques se mostrarán para dispositivos de escritorio y móviles, lo cual variará dependiendo de la opción que elijas en Tipo de visualización
, en base a las definiciones de la siguiente tabla:
Carrusel (todos los dispositivos)
Ancho de dispositivo | Cantidad de columnas |
---|---|
Igual o mayor a 992px | Cantidad definida para Escritorio |
Igual o mayor a 768px | 3 columnas |
Igual o mayor a 415px | Cantidad definida para Móviles |
Igual o menor a 414px | 1 columna |
Grilla
Número de columnas en escritorio
aplicará para dispositivos con un ancho igual o mayor a 576px, mientras que Número de columnas en móvil
aplicará para dispositivos con un ancho igual o menor a 575px.
Dispositivo de escritorio / Valor de opción | 4 columnas | 3 columnas | 2 columnas | 1 columna |
---|---|---|---|---|
Escritorio (Igual o mayor a 992px) | 4 columnas por fila horizontal | 3 columnas por fila horizontal | 2 columnas por fila horizontal | 1 columna, apiladas verticalmente |
Tabletas (Igual o mayor a 576px) | 3 columnas por fila horizontal | 3 columnas por fila horizontal | 2 columnas por fila horizontal | 1 columna, apiladas verticalmente |
Dispositivo móvil / Valor de opción | 2 columnas | 1 columna | |
---|---|---|---|
Móvil (Igual o menor a 575px) | 2 columnas, apiladas verticalmente | 2 columnas, apiladas verticalmente | 2 columnas, apiladas verticalmente |
Móvil pequeño (Igual o menor a 414px) | 1 columna, apiladas verticalmente | 1 columna, apiladas verticalmente | 1 columna, apiladas verticalmente |
Tamaño de avatar
Permite definir el tamaño de la imagen o avatar que puedes subir en cada subcomponente, en base a las siguientes opciones:
Mostrar ícono de cita
Permite desplegar un icono de cita
(o comillas) antes del texto del bloque.
Aplicar estilo de tarjeta a testimonios
Permite aplicar un estilo de "tarjeta" o "caja" a todos los bloques. Las siguientes opciones se harán disponibles sólo si esto se habilita:
Habilitar cabecera
Permite desplegar una sección de Cabecera antes de los bloques, en la cual puedes agregar los siguientes elementos mediantes sus opciones respectivas:
Configuraciones del Carrusel
Las siguientes opciones sólo serán consideradas y aplicadas si seleccionaste Carrusel
en la opción Tipo de visualización
:
Margen superior
Permite controlar el margen de la parte superior de la sección.
Margen inferior
Permite controlar el margen de la parte inferior de la sección.
Colores de contenido
Permite elegir el Pack de Colores para el componente.
Configuraciones del subcomponente
Tal como ya fue mencionado, el subcomponente del componente Testimonios
se llama Testimonio
y puedes agregar todos los que quieras para proveer la información necesaria a tus clientes. Las opciones para este subcomponente son las siguientes:
Cita
En este campo puedes agregar el comentario del cliente.
Autor
Opcional. Permite agregar el nombre del cliente, o básicamente cualquier cosa que desees.
Imagen
Opcional. Permite subir una imagen (avatar) en cada bloque.
Nota: la dimensión de la imaegn a subir será en base a lo que hayas seleccionado en la opción
Tamaño de avatar
en la configuración del componente principal. Te sugerimos que no subas una imagen mayor que dichas dimensiones, para evitar posibles problemas con la velocidad de carga de la tienda.
Este componente te permite desplegar una sección básicamente con tan sólo texto y un enlace. Puede ser muy útil como una sección complementaria en conjunto con otros componentes del tema o por ejemplo como una sección Cabecera
. Las opciones para que puedas personalizar este componente son las siguientes:
Ancho
Permite definir el ancho al cual se reestringirá el contenido del componente.
Nota: Puedes leer más sobre como cada opción aquí se comporta en esta sección, en la parte Otros tamaños de ancho.
Alineación de contenido
Permite definir la alineación de todo el contenido dentro del componente.
Nota: This will be applied for todos los dispositivos.
Posición horizontal del contenido
Permite definir la posición en el eje “x” (horizontal).
Nota: Esto no será visible si seleccionaste
Ancho completo
en la opciónAncho
.
Subtítulo
Permite agregar un texto antes del Título del component, el cual tendrá un tamaño más pequeño.
Título
Permite agregar un título en el componente.
Nota: El tamaño de este título será determinado en base a la opción definida dentro de
Configuración del tema > Cabeceras > Tamaño de los títulos
.
Texto
Permite agregar un texto o descripción para entregar más contexto sobre qué trata la sección.
Enlace
Permite agregar un enlace-botón a cualquier contenido de la tienda, como por ejemplo categorías, productos, páginas, enlaces externos, etc.</p>
Texto del enlace
Texto que se mostrará en el enlace-botón.
Usar estilo de contorno del botón
Permite mostrar el enlace/botón con un borde alrededor.</li>
Mostrar flecha en botón
Permite mostrar una flecha al lado derecho del texto del botón.</li>
Habilitar como enlace externo
Al habilitar, el enlace se abrirá en una nueva pestaña del navegador.
Margen superior
Permite controlar el margen de la parte superior de la sección.
Margen inferior
Permite controlar el margen de la parte inferior de la sección.
Colores de contenido
Permite elegir el Pack de colores para el componente.
Este componente te permite desplegar información sobre tu tienda que desees resaltar o que sea relevante para tus clientes, lo cual puede ser utilizado por ejemplo en temas como tus Métodos de pago, Opciones de envío, entre otro tipo de contenido que pueda ser necesario para ti.
Funciona agregando múltiples subcomponentes llamados Bloque de confianza
, a los cuales nos referiremos -para efectos prácticos- como Bloque.
Configuraciones del componente
Al hacer click en el nombre del componente encontrarás opciones generales para personalizarlo, las cuales determinarán como se verá y comportará la sección. Las opciones disponibles para este componente son las siguientes:
Tipo de visualización
Permite definir la forma en que los bloques serán mostrados en el componente, en base a las siguientes opciones:
Carrusel
, en el cual puedes controlar aspectos tales como la velocidad, reproducción automática o si quieres mostrar elementos de navegación en él.Número de columnas en escritorio y móvil
Permite definir la cantidad de columnas en que los bloques se mostrarán para dispositivos de escritorio y móviles, las cuales variarán dependiendo de la opción que selecciones en Tipo de visualización
, en base a las definiciones de las siguientes tablas:
Carrusel (todos los dispositivos)
Ancho de dispositivo | Cantidad de columnas |
---|---|
Igual o mayor a 992px | Cantidad definida for Escritorio |
Igual o mayor a 768px | 3 columnas |
Igual o mayor a 415px | Cantidad definida para Móviles |
Igual o menor a 414px | 1 columna |
Grilla
Número de columnas en escritorio
será aplicada para dispositivos con un ancho igual o mayor a 576px, mientras que Número de columnas en móvil
aplicará a dispositivos con ancho igual o menor a 575px.
Dispositivo de escritorio / Valor de opción | 4 columnas | 3 columnas | 2 columnas | 1 columna |
---|---|---|---|---|
Escritorio (Igual o mayor a 992px) | 4 columnas por fila horizontal | 3 columnas por fila horizontal | 2 columnas por fila horizontal | 1 columna, apiladas verticalmente |
Tabletas (Igual o mayor a 576px) | 3 columnas por fila horizontal | 3 columnas por fila horizontal | 2 columnas por fila horizontal | 1 columna, apiladas verticalmente |
Dispositivo móvil / Valor de opción | 2 columnas | 1 columna | |
---|---|---|---|
Móvil (Igual o menor a 575px) | 2 columnas, apiladas verticalmente | 2 columnas, apiladas verticalmente | 2 columnas, apiladas verticalmente |
Móvil pequeño (Igual o menor a 414px) | 1 columna, apiladas verticalmente | 1 columna, apiladas verticalmente | 1 columna, apiladas verticalmente |
Alineación de contenido
Permite definir la alineación para todos los bloques del componente.
Nota: Si seleccionas
Centro
y el bloque posee un ícono, este será posicionado sobre/antes de todo el contenido.
Mostrar íconos
Permite definir si se mostrarán los iconos en todos los bloques.
Nota: Si deshabilitas esta opción, no importará si agregaste un ícono en cualquiera de los bloques.
Configuraciones del Carrusel
Las siguientes opciones sólo serán consideradas y aplicadas si seleccionaste Carrusel
en la opción Tipo de visualización
:
Margen superior
Permite controlar el margen de la parte superior de la sección.
Margen inferior
Permite controlar el margen de la parte inferior de la sección.
Colores de contenido
Permite elegir el Pack de Colores para el componente.
Configuraciones del subcomponente
Tal como ya fue mencionado, el subcomponente del componente Barra de Confianza
se llama Bloque de confianza
y puedes agregar todos los que quieras para proveer la información necesaria para tus clientes. Las opciones para este subcomponente son las siguientes:
Icono
Permite agregar un ícono en el bloque. Su posición será determinada en base a lo que selecciones en la opción Alineación del contenido
en la configuración del componente.
Título
Permite agregar un título en el bloque.
Texto
Permite agregar un texto bajo el título para proveer mayor contexto sobre qué trata el bloque.
Enlace
Permite agregar un enlace a cualquier contenido de la tienda, como por ejemplo categorías, productos, páginas, enlaces externos, etc.
Texto del enlace
Texto que se mostrará en el enlace.
Mostrar flecha en enlace
Permite mostrar una flecha al lado derecho del texto del enlace.
Habilitar como enlace externo
Al habilitar, el enlace se abrirá en una nueva pestaña del navegador.
Este componente te permite mostrar un video de YouTube o Vimeo en una sección independiente, con varias opciones para que personalizarlo, las cuales son las siguientes:
Código del video
En este campo debes agregar el código de incrustación que cada plataforma provee, dentro de las opciones para compartir videos. Si lo dejas en blanco, mostrará un imagen “falsa”.
Video ratio
Permite definir la forma o dimensión que el video tendrá, en base a las siguientes opciones:
16:9
.3:4
.4:3
.1:1
.Ancho
Permite definir el ancho al cual se reestringirá el video dentro del componente.
Nota: Puedes leer más sobre como cada opción aquí se comporta en esta sección, en la parte Otros tamaños de ancho.
Posición horizontal del contenido
Permite definir la posición en que el video se ubicará dentro del eje “x” (horizontal).
Nota: Esto no será visible si seleccionaste
Ancho completo
en la opciónAncho
.
Margen superior
Permite controlar el margen de la parte superior de la sección.
Margen inferior
Permite controlar el margen de la parte inferior de la sección.
Colores de contenido
Permite elegir el Pack de colores para el componente, el cual será aplicado básicamente el color de fondo detrás del video.
En esta sección explicamos varios aspectos sobre la utilización de las imágenes dentro del tema, desde tópicos como por ejemplo formatos
, tamaños
, entre otras cosas que puedan ser útiles saber.
En lo que respecta a tamaños y dimensiones, esto variará dependiendo del componente y las opciones disponibles en su configuración. A continuación te entregamos, con el mayor detalle posible, las definiciones para tamaños ideales de imágenes para varios componentes y secciones dentro del tema.
Para cualquiera de las imágenes que puedes subir, como por ejemplo dentro de un Slide
o Banner
, sugerimos algunos formatos que puedes considerar utilizar para mejorar la experiencia de los visitantes de tu tienda:
WebP
Utilizar el formato de imagen WebP puede mejorar significativamente tanto el rendimiento de tu sitio web como la experiencia de usuario. Entre sus beneficios podemos destacar los siguientes:
Si no posees un software que te permita editar o exportar tus imágenes a WebP, puedes utilizar servicios gratuitos en línea como TinyPNG para comprimirlas o convertirlas en tan sólo un par de clicks.
JPG / JPEG
JPG es una opción sólida para imágenes web, especialmente para fotos complejas con muchos colores y degradados. Tiene un amplio soporte y ofrece una compresión decente para lograr una buena calidad y tamaños de archivo más pequeños. Sin embargo, su compresión con pérdida, la falta de compatibilidad con transparencia y el potencial de degradación de la calidad lo hacen menos adecuado para ciertos casos de uso, especialmente en comparación con formatos más nuevos como WebP.
Si trabajas principalmente con fotos, JPG puede seguir siendo una excelente opción. Pero para otros tipos de imágenes o cuando necesitas el mejor rendimiento, es posible que desees explorar otras alternativas.
PNG
PNG es una excelente opción para imágenes que requieren alta calidad, nitidez y transparencia, como logotipos, íconos y gráficos simples. Su compresión sin pérdida garantiza que tus imágenes conserven sus detalles originales sin ninguna degradación. Sin embargo, los tamaños de archivo más grandes y la ineficiencia para las fotos lo hacen menos adecuado para todo tipo de imágenes web, especialmente cuando quieres optimizas para mejorar la velocidad y el rendimiento.
Si necesitas transparencia o calidad perfecta, PNG es el formato ideal. Pero para otros casos de uso, especialmente donde el tamaño del archivo y la velocidad de carga son críticos, es posible que desee considerar alternativas como WebP o JPG.
SVG
SVG es un formato de imagen increíblemente versátil y potente, especialmente para el diseño web. Es perfecto para logotipos, íconos, ilustraciones y cualquier gráfico que necesite ser escalable y que no dependa de la resolución. La capacidad de editar, animar y aplicar estilo a los SVGs con código lo convierte en uno de los favoritos entre los desarrolladores.
Sin embargo, SVG no es ideal para imágenes complejas como fotos y requiere un poco más de conocimiento técnico para trabajar con ellas de manera efectiva. Si necesitas imágenes nítidas y escalables con tamaños de archivo pequeños y potencial de interactividad, SVG es una opción fantástica. Para imágenes detalladas o casos de uso más simples, los formatos tradicionales como JPG o PNG pueden ser más adecuados, según lo que desees lograr.
Para el caso de un Slide, subcomponente de Slider, las dimensiones sugeridas listadas abajo variarán dependiendo de lo que elijas en la opción Tipo de contenido
de la configuración del componente:
Imagen + Contenido
La siguiente tabla provee las dimensiones de imágenes óptimas, al elegir Imagen + Contenido
en la opción Tipo de contenido
de la configuración del Slider.
Ancho | Altura | Dimensión para Escritorio (en pixeles) | Dimensión para Móvil (en pixeles) |
---|---|---|---|
Grilla | Pequeño | 1296 x 420 | 551 x 420 |
Grilla | Mediano | 1296 x 560 | 551 x 560 |
Grilla | Grande | 1296 x 720 | 551 x 720 |
Grilla | Navegador | 1296 x (variable) | 551 x (variable) |
Grilla | Ajustar al contenido | 1296 x (variable) | 551 x (variable) |
Mediano | Pequeño | 1440 x 420 | 575 x 420 |
Mediano | Mediano | 1440 x 560 | 575 x 560 |
Mediano | Grande | 1440 x 720 | 575 x 720 |
Mediano | Navegador | 1440 x (variable) | 575 x (variable) |
Mediano | Ajustar al contenido | 1440 x (variable) | 575 x (variable) |
Grande | Pequeño | 1600 x 420 | 575 x 420 |
Grande | Mediano | 1600 x 560 | 575 x 420 |
Grande | Grande | 1600 x 720 | 575 x 720 |
Grande | Navegador | 1600 x (variable) | 575 x (variable) |
Grande | Ajustar al contenido | 1600 x (variable) | 575 x (variable) |
Extra Grande | Pequeño | 2400 x 420 | 575 x 420 |
Extra Grande | Mediano | 2400 x 560 | 575 x 560 |
Extra Grande | Grande | 2400 x 720 | 575 x 720 |
Extra Grande | Navegador | 2400 x (variable) | 575 x (variable) |
Extra Grande | Ajustar al contenido | 2400 x (variable) | 575 x (variable) |
Ancho completo | Pequeño | Ancho: 2400 px mínimo sugerido / Altura: 420 px | 575 x 420 |
Ancho completo | Mediano | Ancho: 2400 px mínimo sugerido / Altura: 560 px | 575 x 560 |
Ancho completo | Grande | Ancho: 2400 px mínimo sugerido / Altura: 720 px | 575 x 720 |
Ancho completo | Navegador | Ancho: 2400 px mínimo sugerido / Altura: variable | 575 x (variable) |
Ancho completo | Ajustar al contenido | Ancho: 2400 px mínimo sugerido / Altura: variable | 575 x (variable) |
Nota 1: Al elegir
Navegador
dentro de la opciónAltura
del componente, la dimensión necesaria debería ser un mínimo de ciertos pixeles considerando dispositivos bien grandes, de forma tal que pueda ser visualizado correctamente.
Nota 2: Al elegir
Ajustar al contenido
dentro de la opciónAltura
del componente, la dimensión necesaria debería ser consederando la altura del Slide más alto.
Sólo imagen
La siguiente tabla provee las dimensiones de imágenes óptimas, al elegir Sólo imagen
en la opción Tipo de contenido
de la configuración del Slider.
También, sólo hacemos referencia al Ancho de la imagen en este tabla, puesto que su Altura dependerá de que tan altas quieras que sean tus imágenes.
Ancho | Imagen para escritorio (en pixeles) | Imagen para móvil (en pixeles) |
---|---|---|
Grilla | Mínimo sugerido: 1296 | Máximo sugerido: 551 |
Mediano | Mínimo sugerido: 1440 | Máximo sugerido: 575 |
Grande | Mínimo sugerido: 1600 | Máximo sugerido: 575 |
Extra Grande | Mínimo sugerido: 2400 | Máximo sugerido: 575 |
Ancho completo | Mínimo sugerido: 2400 | Máximo sugerido: 575 |
Nota: La opción
Altura
dentro de la configuración del Slider no será considerada al elegirSólo imagen
, por ende, no verás ningún cambio visible al seleccionar cualquiera de sus valores.
Para el caso de un Banner, subcomponente de Banners, las dimensiones sugeridas en las tablas de abajo variarán dependiendo de la combinación de lo que elijas en las opciones Tipo de contenido
, Número de columnas en escritorio
y Número de columnas en móvil
, en la configuración del componente:
Imagen + Contenido
When choosing this option the dimension for images will also have a dependancy based on what you choose at the Image ratio
option of the component settings. Consider that the following dimensions are suggestions from a minimum measure standpoint:
Al elegir esta opción la dimensión de las imágenes también dependerán de lo que selecciones en la opción Proporción de imagen
, en la configuración del componente. Considera que las siguientes dimensiones son una sugerencia en base a una medida mínima:
Escritorio
Proporción / Número de columnas | 4 columnas | 3 columnas | 2 columnas | 1 columna |
---|---|---|---|---|
Apaisado | 306 x 172 px | 416 x 234 px | 636 x 358 px | 1296 x 729 px |
Retrato | 306 x 408 px | 416 x 555 px | 636 x 848 px | 1296 x 1728 px |
Rectangular | 306 x 230 px | 416 x 312 px | 636 x 477 px | 1296 x 972 px |
Cuadrado | 306 x 306 px | 416 x 416 px | 636 x 636 px | 1296 x 1296 px |
Móvil
Proporción / Número de columnas | 2 columnas | 1 columna |
---|---|---|
Apaisado | 366 x 206 px | 527 x 297 px |
Retrato | 366 x 488 px | 527 x 703 px |
Rectangular | 366 x 275 px | 527 x 396 px |
Cuadrado | 366 x 366 px | 527 x 527 px |
Sólo imagen
Al elegir esta opción sólo especificamos el Ancho
mínimo sugerido, puesto que la Altura
para cada Banner dependerá de cómo quieras que se vean y presenten:
Escritorio
Proporción / Número de columnas | 4 columnas | 3 columnas | 2 columnas | 1 columna |
---|---|---|---|---|
Apaisado | 306 px | 416 px | 636 px | 1296 px |
Retrato | 306 px | 416 px | 636 px | 1296 px |
Rectangular | 306 px | 416 px | 636 px | 1296 px |
Cuadrado | 306 px | 416 px | 636 px | 1296 px |
Móvil
Proporción / Número de columnas | 2 columnas | 1 columna |
---|---|---|
Apaisado | 366 px | 527 px |
Retrato | 366 px | 527 px |
Rectangular | 366 px | 527 px |
Cuadrado | 366 px | 527 px |
Para el caso del componente Banner Grande, las dimensiones sugeridas mínimas en las tablas a continuación, variarán dependiendo de la combinación de las opciones Ancho
y Altura
en la configuración:
La dimensión para dispositivos de Escritorio considerará los que tengan un ancho igual o mayor a 576px, mientras que para dispositivos Móviles los que posean un ancho igual o menor a 575px:
Ancho: Grilla
Opción de Altura | Dimensión imagen para escritorio | Dimensión imagen para móvil |
---|---|---|
Ajustar al contenido | 1296 x 300 px | 575 x 320 px |
Pequeño | 1296 x 420 px | 575 x 420 px |
Mediano | 1296 x 560 px | 575 x 560 px |
Grande | 1296 x 720 px | 575 x 720 px |
Navegador | 1296 x 850 px | 575 x 820 px |
Ancho: Mediano
Opción de Altura | Dimensión imagen para escritorio | Dimensión imagen para móvil |
---|---|---|
Ajustar al contenido | 1440 x 300 px | 575 x 320 px |
Pequeño | 1440 x 420 px | 575 x 420 px |
Mediano | 1440 x 560 px | 575 x 560 px |
Grande | 1440 x 720 px | 575 x 720 px |
Navegador | 1440 x 850 px | 575 x 820 px |
Ancho: Grande
Opción de Altura | Dimensión imagen para escritorio | Dimensión imagen para móvil |
---|---|---|
Ajustar al contenido | 1600 x 300 px | 575 x 320 px |
Pequeño | 1600 x 420 px | 575 x 420 px |
Mediano | 1600 x 560 px | 575 x 560 px |
Grande | 1600 x 720 px | 575 x 720 px |
Navegador | 1600 x 850 px | 575 x 820 px |
Ancho: Extra Grande
Opción de Altura | Dimensión imagen para escritorio | Dimensión imagen para móvil |
---|---|---|
Ajustar al contenido | 2400 x 300 px | 575 x 320 px |
Pequeño | 2400 x 420 px | 575 x 420 px |
Mediano | 2400 x 560 px | 575 x 560 px |
Grande | 2400 x 720 px | 575 x 720 px |
Navegador | 2400 x 850 px | 575 x 820 px |
Ancho: Navegador
Opción de Altura | Dimensión imagen para escritorio | Dimensión imagen para móvil |
---|---|---|
Ajustar al contenido | 2800 x 300 px | 575 x 320 px |
Pequeño | 2800 x 420 px | 575 x 420 px |
Mediano | 2800 x 560 px | 575 x 560 px |
Grande | 2800 x 720 px | 575 x 720 px |
Navegador | 2800 x 850 px | 575 x 820 px |
Nota: Al definir Navegador dentro de las opciones
Ancho
yAltura
, sugerimos que puedas probar cómo se ven las imágenes en distintos dispositivos, para asegurar que no se pixelen.
En el caso de los tamaños de las imágenes en la plantilla de producto (o página), estas variarán en base a lo que elijas en la opción Dimensión de imagen
, la cual puedes encontrar dentro del componente Plantilla de producto
. También, el tema cargará de forma automática diferentes tamaños de imagen dependiendo del ancho de la ventana del navegador en que se esté visitando la tienda, de forma tal que puedan ser optimizadas para distintos tipos de dispositivos.
Adicionalmente, necesitas considerar que al activar la opción de Zoom, probablemente debas subir imágenes un poco más grandes que los tamaños mencionados más abajo, para que no se pixelen al hacer zoom.
A continuación, detallamos las dimensiones sugeridas mínimas en que puedes subir las imágenes de tus productos. Los valores de la siguiente tabla consideran sólo los dispositivos de escritorio, ya que serán los que posean la mayor dimensión de todos:
Opción de dimensión | Tamaño de imagen normal | Tamaño de imagen en zoom |
---|---|---|
Apaisado | 719 x 404 px | 1000 x 563 px |
Retrato | 719 x 959 px | 1000 x 1333 px |
Rectangular | 719 x 539 px | 1000 x 750 px |
Cuadrado | 719 x 719 px | 1500 x 1500 px |
Nota: Las imágenes serán automáticamente redimensionadas o recortadas en base a lo que elijas en la opción
Visualización de imágenes
, dentro de la configuración del componente.
Pruébala gratis durante 14 días. No necesitas tarjeta de crédito.