Directrices para un tema HTML personalizado

General

• Los temas deben ser compatibles con W3. Ambos markup y styles
• Las bibliotecas de JavaScript, Plug-ins (presentaciones de diapositivos, lightboxes, etc.) siempre deben actualizarse. Si es posible en la última versión estable
• Elimine http: o https: de los recursos externos, esto evita las advertencias de los sitios inseguros. Las URL deben ser: // resource.com / library.js
• El CSS Inline debe evitarse y pasarse a uno o más activos css
• Los temas deben ser completamente adecuados
• Javascript y CSS deben transferirse al pie de página
• Las bibliotecas de Javascript deben minimizarse

---

Menús

• Si solo hay 1 idioma por tienda, el menú de idiomas no debe mostrarse
• Si solo hay 1 moneda por tienda, no se debe mostrar el menú de moneda
• El menú principal debe tener al menos 3 niveles de categoría (Categoría> Subcategoría> Sub-Subcategoría)
• Si el menú tiene muchos elementos, debería poder navegar/verlos incluso si la pantalla es más pequeña que la lista de elementos
• Si el menú principal tiene muchos elementos, la navegación móvil debe optimizarse para poder ver todos los submenús.

---

Área de pie de página

• Ver opciones de contacto como número de teléfono y correo electrónico. Mostrar el correo electrónico de contacto debe ser una opción de tema
• Mostrar redes sociales si están presentes en la configuración de la tienda
• Mostrar bloque de derechos de autor con los elementos: “[©] + [An atual] + [Nombre de la tienda]. + Todos los derechos reservados. Distribuida por Jumpseller”. La palabra Jumpseller debe enlazar con la página de inicio de Jumpseller
• Mostrar enlaces de menú de pie de página

---

Diseño Inicio

La página de inicio debe tener estos bloques disponibles para el comerciante:

• Control deslizante promocional para mostrar imágenes y textos resaltados. Sugerimos usar Owl Carousel Library
• Muestre los productos destacados si la opción de tema está habilitada. La cantidad de productos a mostrar debe estar limitada en las opciones del tema
• Mostrar productos recientes si la opción de tema está habilitada. La cantidad de productos a mostrar debe estar limitada en las opciones del tema
• Mostrar el área de Blog si la opción de tema está habilitada. El área del blog debe mostrar las páginas más recientes con la categoría “Publicación”. El número de páginas que se mostrarán debe estar limitado en las opciones del tema.

Opcional

• Bloque de Instagram conectado al Instagram del usuario comerciante
• Boletín conectado a una cuenta de Mailchimp

---

Diseño de Categoría

La página de categoría debe tener los siguientes elementos:

• Título de categoría con una etiqueta h1
• Mostrar la imagen de la categoría si el comerciante está subiendo
• Mostrar la descripción de la categoría con una etiqueta h2
• Selección del tipo de producto
• Lista de productos categorizados en esta categoría. Los productos deben tener los elementos descritos en la sección Bloque de Producto
• Paginación limitada a la cantidad de productos elegidos por el comerciante en las opciones del tema
• Si la categoría no tiene productos asociados, debería mostrar el mensaje “No hay productos disponibles en esta categoría”
• Soporte para filtros de productos. Ver documentación.

---

Diseño de resultados de búsqueda

La página de resultados de búsqueda debe tener los siguientes elementos:

• Título de la página “Resultados de la búsqueda” con una etiqueta h1
• Número de resultados de búsqueda
• Mostrar la frase “Buscado por:” Seguido por la cadena de texto que el usuario buscó.
• Lista de productos que coinciden con la búsqueda. Los productos deben tener los elementos descritos en la sección Bloque de Producto
• Paginación limitada a la cantidad de productos elegidos por el comerciante en las opciones del tema
• Si la búsqueda no tiene resultados, debería ver el mensaje: “No hay productos que coincidan con su búsqueda, intente buscar de nuevo”
• Soporte para filtros de productos. Ver documentación.

---

Productos

Bloque de Productos

El bloque de producto en las listas debe tener los siguientes elementos:

• Primera imagen del producto, si no tiene una imagen cargada, presente una imagen de marcador de posición en su lugar
• La imagen debe tener una etiqueta alt con el nombre del producto
• Nombre del producto con una etiqueta h3
• Precio del producto y precio con descuento si el producto tiene
• Si el producto y sus variantes están agotados, muestra un mensaje “Agotado”
• Si el producto y sus variantes no están disponibles, muestra un mensaje “No disponible”
• Enlace al producto

Página del Producto

• Muestre múltiples imágenes de productos. Si el producto no tiene una imagen cargada, muestre una imagen de marcador de posición en su lugar con el mensaje “No hay imagen de producto disponible”
• Las imágenes del producto deben cambiar si el visitante elige una variante
• Muestre la marca del producto si el producto tiene
• Muestre el precio del producto y el precio con descuento si el producto tiene
• Muestre el SKU y el stock del producto y sus variantes si las opciones de tema para mostrar están habilitadas
• Mostrar campos de productos personalizados, si están disponibles
• Ver los archivos adjuntos del producto, si están disponibles (y el producto no es virtual)
• Mostrar opciones de productos, si están disponibles
• Oculte el botón “Agregar al carrito” si el producto o sus variantes están agotados o no disponibles
• La descripción del producto debe presentar correctamente las etiquetas HTML más utilizadas (e.g: ol, ul, li, strong, a, p, br, table, i, s, b, h2, h3, h4, h5, img, iframe, alignment)
• Los íconos para compartir en redes sociales deben mostrarse si el comerciante ha habilitado las opciones de tema
• Muestre el mosaico “Productos relacionados” si el comerciante lo habilita en las opciones del tema Ver el artículo de soporte

---

Cuenta de Cliente

No Registrado

• Si el cliente no está registrado, la tienda debe mostrar un enlace para iniciar sesión y registrarse en el área de clientes. Debería aparecer solo si el comerciante activa la opción en su tienda.
• La URL del enlace Iniciar Sesión/Registrarse debe ser: /cliente/Iniciar Sesión. Esta pantalla muestra el formulario de inicio de sesión y un enlace al formulario de registro si el cliente aún no está registrado.

Registrado

• Cuando el cliente está en su cuenta o registrado, se debe mostrar un enlace para salir de su cuenta y su nombre con un enlace a su cuenta de cliente.
• La pantalla de la cuenta con la url /cliente debe tener 3 bloques principales:
  • Información del contacto
  • Dirección de Envío
  • Dirección de Facturación
• Estos dos últimos deben tener enlaces para Agregar nuevo/Editar/Eliminar/Marcar como principal.
• La misma pantalla muestra las compras realizadas por el cliente registrado. Si el cliente aún no ha realizado compras, el mensaje “Aún no has realizado ninguna compra” y si el cliente ha realizado compras, aparecerá un listado de esas compras, con la siguiente información:
  • ID Orden
  • Estado de la Orden
  • Orden Actualizada
  • Orden Total
  • Botón para realizar el mismo pedido
  • Listado de productos en el pedido, debe presentar: cantidad, precio subtotal, nombre y variantes si las tiene. Si hay un producto en la lista que ya no existe, se debe mostrar el mensaje “Este producto no existe”.
  • Bloque de resumen con: costo de envío, subtotal, descuentos aplicados y total del pedido ***

Proceso de compra

Página del carrito

• Muestre la tabla de productos añadidos al carrito de la compra con los siguientes elementos para cada producto:
  • imagen
  • nombre del producto y variantes
  • cantidad con posibilidad de actualizar
  • precio y descuento si el producto tiene
  • subtotal
  • opción para retirar el producto del carrito
• Mostrar formulario para estimar el costo de envío si está habilitado en las opciones del tema
• Mostrar formulario para agregar un código de cupón si la tienda ha creado un código promocional
• Mostrar una tabla con la revisión del pedido, mostrando los elementos del pedido actual en curso: subtotal, descuentos, impuestos, total, costo de envío
• Muestre un botón de envío para ir a la página de pago
• Si no hay productos en el carrito, debería mostrar un mensaje como: “El carrito de compras está vacío. Puede regresar y comenzar a agregar productos.”

Bloque de Pago

• Mostrar formulario de pago con soporte para campos personalizados
• Mostrar opciones de pago agregadas por el comerciante
• Ver las opciones de envío agregadas por el comerciante. Ocultar si los productos son digitales
• Mostrar una tabla con la revisión del pedido, mostrando los elementos del pedido actual en curso: subtotal, descuentos, impuestos, total, costo de envío
• Muestre un botón de envío para ir a la página de revisión

Revisar bloque de pedido

• Presente la tabla de productos pedidos con los siguientes elementos para cada uno:
  • imagen (sin link)
  • nombre del producto y variantes
  • cantidad sin posibilidad de actualización
  • precio y descuento si el producto tiene
  • subtotal
  • se debe evitar la exclusión de productos
• Mostrar una tabla con la revisión del pedido, mostrando los elementos del pedido actual en curso: subtotal, descuentos, impuestos, total, costo de envío
• Se debe mostrar la información de envío (si está disponible) y de facturación

Bloque de Éxito

• Un mensaje de éxito o fracaso (p.e. ‘Gracias por su compra’) debe ser presentado
• El número de orden {{ order.id }} debe ser presentado
• Se debe presentar la información de envío y pago
• Si el inicio de sesión del cliente es opcional u obligatorio, se debe presentar el formulario de creación de contraseña del cliente.
• Si la opción de tema “Tabla de productos en la página de éxito” está habilitada, debe mostrarla

---

Páginas

• El cuerpo de todas las páginas debe mostrar correctamente las etiquetas HTML más utilizadas (e.g: ol, ul, li, strong, a, p, br, table, i, s, b, h2, h3, h4, h5, img, iframe, alignment)
• Todos los temas tienen 3 plantillas de página por defecto: Blog, Publicación y Estándar

Otros

Opciones de tema

• Prefiere usar URL completas para correos electrónicos, redes sociales u otros y evita crear lógica con nombres de usuario e ID de cuenta.
• Si el campo está vacío, cree la lógica para no mostrar este código en la web

Imágenes

• Las imágenes de los productos, categorías y páginas deben redimensionarse correctamente utilizando la etiqueta net: {% "image.jpg" | resize: npx x npx %}. De esta forma, se optimiza la carga de la tienda
• “Cambiar el tamaño” siempre debe elegirse el “General”
• Todas las imágenes deben tener ambos elalt y la etiqueta de texto
• Si no hay imagen, muestre una imagen de marcador de posición en su lugar

Código

• El código HTML debe utilizarse con las teclas de método abreviado del Editor: seleccionar todo (Ctrl + A) y Shift + Tab

Traducciones

• El texto sin fin, como puntos (.) O dos puntos (:) debe estar fuera de las cadenas de traducción. {% t 'Sorty by' %}:
• Los temas deben estar completamente traducidos a nuestros idiomas principales antes de ser publicados en https://translate.jumpseller.com
• Las traducciones deben diseñarse para beneficiar al cliente final, por ejemplo, no es necesario traducir las cadenas de ayuda del comerciante: “Este producto no tiene imagen”

SEO

• En la página de inicio, el nombre de la tienda debe ser h1, la descripción de la tienda debe ser h2 y los nombres de los productos deben ser h3
• En la página de categoría, el nombre de categoría debe ser h1, el nombre del producto debe ser h2 y la descripción del producto debe ser h3
• Siga las guías generales de diseño web SEO como: http://webdesign.tutsplus.com/articles/seo-articles/seo-checklist/