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/