Tema Apparel - Conceptos Básicos

A continuación puedes encontrar algunos ejemplos respecto a cómo los logos se ven y varian dependiendo del formato en que sea exportados.

Si pasas el mouse sobre ellos su tamaño se expandirá levemente y podrás notar como los formatos en .png y .jpg se "pixelan" un poco, mientras que el logo en formato .svg no.

SVG

PNG

JPG

Todos los colores aquí son los colores "base" del tema, por lo que si cambias alguno de ellos, afectará varias secciones y/o elementos donde se aplica ese color.

Si habilitas esta opción en las secciones donde está disponible, esos colores tendrán prioridad sobre los Colores del Tema.

Esta sección es donde se muestra el Logo de tu tienda, o el Nombre de tu tienda si no has definido un Logo . Siempre estará alineado al centro de la página.

Esta sección sólo es visible para dispositivos de escritorio que tengan un ancho igual o mayor a 1200px. Muestra el menú disponible en Personalización > Navegación > Menú Principal y sus items y sub-items. Se ocultará para dispositivos con un ancho menor a la dimensión mencionada anteriormente.

Esta sección es la que se encuentra en el lado derecho del Header y contiene varios elementos que se pueden mostrar:

Esta sección sólo es visible para dispositivos que tienen un ancho igual o menor a 1199px y se ubica en el lado izquierdo del Header . Muestra los siguientes dos elementos:

Podrás notar que todos los elementos muestran un icono y un texto. El icono es el único elemento que siempre estará visible en todos los dispositivos. Todos los textos, excepto el “número de productos” , se ocultarán para dispositivos que tengan un ancho igual o inferior a 767 px, como por ejemplo un iPad Mini , que es una Tablet . Este comportamiento es con la intención de evitar, o intentar, que los elementos se colapsen en dispositivos más pequeños.

En la imagen de arriba, se ha definido que el componente Slider ocupe todo el ancho de la ventana del navegador.

En la imagen de arriba, se ha definido que el componente Slider ocupe y respetar el ancho máximo del contenedor.

El último es útil si, por ejemplo, no deseas que las secciones y, lo que es más importante, las imágenes, lleguen tan lejos como el navegador lo permita, ya que eso podría significar que las imágenes podrían "pixelarse" al tratar de estirar y respetar el ancho del navegador. Veamos un ejemplo:

En base al ejemplo anterior, encontrarás una opción -te indicaremos dónde- en donde puedes definir el ancho máximo que tendrá la Grilla de la Tienda, para evitar situaciones como esta.

De esta manera, tu tienda puede verse tan hermosa como deseas y no tienes que preocuparte por cargar imágenes enormes y pesadas que pueden afectar negativamente la velocidad de carga de la tienda.

La sección que contiene la Marca del producto, el Nombre del producto, el Precio del producto y la Descripción del Producto.

La sección que contiene el título o el nombre de la categoría y, si se agrega, la descripción de la categoría. Así como el botón Filtros que abre el panel de la barra lateral de filtros.

La sección que contiene el título de la página y dependiendo de los resultados de búsqueda encontrados, una descripción con un poco de detalle. Aquí, si está disponible, también se mostrará el botón de filtros.

Por ejemplo, una página de Términos y Condiciones se compone principalmente de un título y el cuerpo (o descripción). En este caso el Título sería la Cabecera.

Son los márgenes internos (superior e inferior) que permiten separar el contenido (p. ej. Encabezado, como título de Productos Destacados) con las partes superior e inferior del componente. Esto puede ser más visible y mejor entendido si el componente tiene un color de fondo diferente a blanco.

Son los márgenes superior e inferior -externos, si se quiere- que permiten separar y crear espacio (comúnmente llamado “espacio en blanco”) entre el componente y otras secciones (o componentes) que aparezcan antes o después.

La cantidad de productos que estarán visibles en el Carrusel variará dependiendo del dispositivo donde se esté viendo la tienda, en base a la siguiente tabla:

La cantidad de productos por fila horizontal variará dependiendo del dispositivo donde se esté viendo la tienda, según la siguiente tabla:

Esta página es la primera y le presenta al cliente los productos que ha agregado en la sección Contenido, donde puede editar las cantidades de los productos y/o eliminarlos.

En la sección Resumen están disponibles las siguientes sub-secciones:

• Estimar Envío: Permite a los clientes ver todos los métodos de envío disponibles que hayas definido en la tienda, siempre en base a la configuración de país, región y municipalidad que hayas establecido.
• Códigos de descuento: Si has creado una Promoción en tu tienda y funciona agregando un Código de promoción para que se aplique, se mostrará la sección correspondiente.
• Totales: Cómo se mencionó anteriormente, esta sub-sección contiene todos los detalles sobre los números monetarios del pedido.

Esta es la segunda página del proceso de compra y en la sección Contenido muestra el formulario de Checkout , que es el que los clientes deben completar para pasar a la siguiente sección. Este formulario se divide en las siguientes sub-secciones:

• Información de Contacto: Aquí el cliente debe agregar su dirección de correo electrónico (obligatorio y no se puede eliminar) y número de teléfono (que puedes habilitar o no).
• Información de Envío: Aquí el cliente debe agregar toda la información a donde se enviará el pedido.
• Información de Facturación: Aquí los clientes pueden agregar información diferente para la Facturación si quieren que sea distinta a la del Envío. De forma predeterminada, esto estará oculto, pero puede hacer click en una casilla de verificación para abrirlo y completar los campos respectivos.
• Otro: Se puede mostrar una sub-sección adicional que contiene un campo que viene por defecto para agregar “Instrucciones especiales” para el pedido.
• Métodos de pago: esta sub-sección presenta la lista de métodos de pago disponibles para que tus clientes elijan.
• Opciones de envío: esta sub-sección presenta la lista de métodos de envío disponibles para que tus clientes elijan. Esta lista es completamente dinámica, lo que significa que cada método de envío mostrará su precio. Cada vez que los clientes cambien cualquiera de los valores seleccionados, los precios cambiarán y se actualizarán, dependiendo del País, Región y Municipalidad que hayan seleccionado.

Además, puedes agregar todos los campos que desees o necesites en cualquiera de estas secciones, de diferentes tipos, como campos de texto, listas de selección, casillas de verificación, botones de opciones y áreas de texto. Esto te permitirá tener un formulario de Checkout más personalizado, donde algunos ejemplos podrían ser:

• Campo de casilla de verificación de regalo: agrega un campo adicional de tipo "casilla de verificación" para que tus clientes puedan elegir si quieren que su pedido sea un regalo.
• Campo Fecha de Entrega: Agrega un campo adicional de tipo “Fecha” para que tus clientes puedan seleccionar una fecha en la que debes entregar el pedido.

En la sección Resumen los clientes encontrarán la lista de productos que tienen en su Carro, pero no podrán editarlos. Esto es intencional, ya que el enfoque es que si llegan a esta parte, terminen el proceso de compra. Si necesitan editar productos, pueden volver a la página del Carro. La sub-sección Totales también está disponible aquí.

Esta es la tercera página del proceso de compra y la sección Contenido presentará toda la información que agregaron en la página de Checkout, casi en el mismo orden:

1. Información de Contacto
2. Información de Envío y Facturación
3. el Método de Pago seleccionado
4. el Método de Envío seleccionado
5. Información Adicional de haber sido agregada
6. Campos Adicionales que puedes haber agregado a tu Formulario del Checkout también aparecerán en esta última sección.

En la sección Resumen encontrarán la misma información que en la página de Checkout. La única diferencia será el texto dentro del botón que permite a los clientes Realizar el pedido. Debajo de este botón habrá enlaces para que los clientes puedan volver a las páginas anteriores del proceso de compra o a la Página de Inicio  de la tienda.

La página final del proceso de compra es la Página de éxito, a la cual llegan los clientes cuando han completado con éxito un pedido, ya sea desde una pasarela de pago externa como PayPal o directamente a través de una opción de pago manual como una Transferencia Bancaria.

En esta página encontrarán todos los detalles de su compra, como el número de pedido, los totales (ej: subtotal, descuentos, gastos de envío, total), así como la lista completa de productos incluidos en el pedido.

Para los tres primeros, esta sección se mostrará si los productos en la página superan la cantidad definida. Veamos un ejemplo:

Digamos que en una Categoría tiene un total de 120 productos y has definido en la configuración respectiva (que encontrarás más abajo en esta Documentación) que la cantidad máxima que se mostrará por página es 40. Eso dará como resultado que la categoría tenga 3 páginas que se pueden "paginar" , donde los clientes pueden cambiar, avanzar y retroceder entre ellas.

Lo mismo se aplica a la página de Resultados de Búsqueda: si un cliente busca la palabra “a” y la búsqueda coincide con 120 resultados (productos), la Paginación mostrará 3 páginas, con 40 productos cada una.

Para la página de Blog, la lógica es bastante similar, ya que puedes definir cuántos artículos se mostrarán por página y eso definirá cuántas páginas se pueden "paginar" .

En el caso de la página de Artículo del Blog , la sección de Paginación es mucho más simple: Permite a los clientes ir al artículo Anterior y Siguiente -si existen- en función del artículo que están viendo en ese momento.

En Jumpseller puedes crear lo que se llama Opciones de Producto dentro de un producto específico y puedes preguntarte, ¿por qué debería hacerlo?

Bueno, digamos que vendes ropa y tienes una Camiseta negra con diferentes tamaños: Small, Medium y Large. Normalmente, crearías cada uno de esos tamaños como productos individuales y obtendrías algo como lo siguiente:

• Camiseta Negra Talla Small
• Camiseta Negra Talla Medium
• Camiseta Negra Talla Large

Al trabajar con Opciones de Producto, puedes crear un sólo producto que tenga todos esos tamaños como opciones, o estrictamente, variantes. Entonces, por ejemplo, podrías crear sólo un producto como Camiseta negra con opciones y crear la opción llamada Talla. Luego, en esa opción crearías las diferentes variantes mencionadas anteriormente: Small, Medium y Large. Una vez que hagas eso, los clientes pueden ir a la página del producto y seleccionar el tamaño (variante) que desean comprar.

Si haces lo mismo con otros productos en tu tienda, los clientes podrán filtrar productos en las páginas de Categorías y en la página de resultados de búsqueda por Talla.

Otra forma de crear filtros es agregando un Campo Personalizado en tus productos con el tipo Selección. Para cada uno de estos tipos de campos personalizados puedes agregar varios valores que serán las opciones de filtros.

Entonces, por ejemplo, podrías crear un Campo Personalizado llamado Marca y agregar a este campo todas las marcas de los productos que tienes en tu tienda. De esta manera, en una página de categoría, los clientes podrían filtrar productos por Marca.

Las Opciones de Producto y los Campos Personalizados (de tipo Selección) crean automáticamente filtros en la tienda, los cuales puedes ver si te diriges a Productos > Filtros en el Panel de Administración de tu tienda y reordenarlos o incluso deshabilitar los que no quieres que aparezcan en el listado de filtros.

Entonces, por ejemplo, supongamos que los clientes visitan tu categoría de camisetas y encontrarán el botón Filtros el cual, al hacer click, abrirá el panel Sidebar de Filtros.

Allí, encontrarían todos los filtros disponibles que se han creado y pueden seleccionarlos simultáneamente para hacer la selección más precisa en base a lo que estén buscando.

Cuando creas tu tienda y vas a Páginas > Todas las páginas, encontrarás que ya hay dos páginas creadas: Blog y Entrada del Blog. También se crearán dos categorías de página: Blog y Post . No podrás quitar ni borrar las categorías, ni la página del Blog , ya que son necesarias para que todo funcione correctamente. En el caso de la Página del Blog, puedes cambiar todo respecto de ella, como su nombre, el enlace permanente, etc.

Por lo tanto, la relación entre la Página del Blog y cada Artículo se define en función de la categoría que definas que se utilizará para agrupar todos los artículos, que de forma predeterminada es Post . Esto hará que en la Página del Blog se muestren juntos todos los artículos que tengan asignada esta categoría. Esto también se aplica al Componente Blog. Puedes modificar cómo funciona toda esta relación en la sección Editor Visual de tu tienda. Para obtener más detalles, consulta la sección Blog y Artículos de esta documentación.

Otro punto a tener en cuenta es que todas las tiendas vienen con dos Plantillas de página ya creadas, una para cada página: Blog y Post.

Por lo tanto, si vas a los detalles de la Página del Blog y bajas hasta la sección "Plantilla", encontrarás que utiliza la plantilla Blog. Lo mismo ocurre con los artículos, los cuales utilizan la plantilla de Post.

Por lo tanto, para que todos tus artículos tengan el mismo diseño, es muy importante que cada vez que crees un nuevo Artículo (página) les apliques la categoría y plantilla respectivas, de lo contrario, se verán como una página "normal" ya que cuando creas una nueva página, utiliza la plantilla de página Estándar.

Puedes ver cuál es el diseño de ambas páginas en la Tienda Demo de Apparel.

Para que le saques el máximo provecho a tu Blog y Artículos y además se vean bien, te dejamos aquí un detalle de cómo se utilizan las imágenes en el tema.

En la Página del Artículo, la imagen se usará como fondo de la sección principal, que incluye: el título , la fecha (opcional) y la sección para compartir. Tienes la opción de controlar el ancho de esta sección y, según lo que elijas, el tamaño de la imagen debe ser uno de los siguientes:

1. Ancho del navegador: 1600x800px. Debes considerar aquí que el ancho debe estar relacionado con lo que ha definido como el ancho máximo para la grilla de tu tienda, que se explica en la sección Grilla de la tienda de esta documentación.
2. Ancho de cuadrícula: 1300x560 px.

En los Bloques de Artículos, que son los que se muestran, por ejemplo, en la Página del Blog, funciona un poco diferente. Como tendrás la capacidad de definir cómo estos mostrarán, lo harán proporcionalmente en función del dispositivo donde se estén viendo:

• Dispositivos de escritorio y tablets: 636x397px.
• Dispositivos móviles: 575x358 píxeles.

Esto sólo se aplicará si la opción seleccionada es Redimensionar o Recortar. Puedes leer lo que hace cada una de estas opciones en la sección respectiva.

Para resumir, la imagen que subas al artículo debe tener el tamaño que se mostrará en la Página del Artículo . Para los bloques, la tienda la adaptará mediante código en función de la opción seleccionada.

Esta página es la que permite a los clientes acceder (iniciar sesión) a sus cuentas y consta básicamente de dos secciones:

Sección del formulario de ingreso

Este es el formulario donde los clientes pueden ingresar su correo electrónico y contraseña para iniciar sesión. También disponen del enlace que les permite restablecer su contraseña en caso de que la hayan olvidado o necesiten cambiarla.

Sección Crear cuenta

Esta sección permite a los clientes que aún no tienen una cuenta, ir a la página respectiva para hacerlo.

Esta es la página donde los clientes pueden crear una cuenta en tu tienda y muestra el formulario que tiene los siguientes campos obligatorios: Correo electrónico, Teléfono, Contraseña y Confirmar contraseña.

El tema Apparel incluye una sección que se puede mostrar junto con este formulario para detallar y mostrar los beneficios de crear una cuenta. Puede leer más sobre esto en la sección correspondiente de esta documentación.

Esta página también se usa para que los clientes puedan editar los detalles básicos que ya se han agregado.

Esta página está disponible para los clientes que ya tienen una cuenta en tu tienda y se divide en dos secciones (o "pestañas"):

Historial de pedidos

Esta sección presenta un listado de todos los pedidos que un cliente ha realizado en tu tienda, con todos los detalles de cada uno. También incluye el enlace para que los clientes repitan un pedido. Este enlace se puede desactivar si es necesario.

Detalles del cliente

Esta sección presenta toda la información que ha agregado un cliente, que se divide en 3 sub-secciones, las cuales están relacionadas con los detalles que un cliente debe completar en la Página de Checkout de la tienda: Información de Contacto, Información de Envío e Información de Facturación.

Los clientes tendrán la posibilidad de agregar varias direcciones de Envío y Facturación si así lo desean, para que puedan elegir dónde deben enviarse los pedidos o qué detalles de facturación se utilizarán para un pedido.

Esta página es la que está disponible para los clientes que ya tienen una cuenta y les permite agregar una nueva dirección o editar una que ya existe. Se utiliza tanto para los detalles de Envío como de Facturación.

Esta página es la más básica y sólo se usa para clientes que han solicitado recuperar o restablecer su contraseña. El proceso de restablecimiento o recuperación de contraseña para todas las tiendas Jumpseller es el mismo y se puede explicar en los siguientes pasos:

1. Cuando los clientes estén en la Página de Ingreso y hagan click en el enlace Restablecer contraseña, se les pedirá que proporcionen la dirección de correo electrónico relacionada con su cuenta.
2. Recibirán un correo electrónico en la dirección que definieron con un enlace que funciona sólo por 24 horas. Cuando hagan click en el enlace, los redireccionará a la página Restablecer contraseña.
3. Una vez que lleguen a la página, deberán establecer la nueva contraseña y confirmarla.