Temas Shopify Renovados! Examina en Acción!

Hola nuestros queridos fans de Shopify! Hoy vamos a describir nuestros temas Shopify renovados. Ellos son absolutamente increíbles!

Hemos trabajando mucho este verano para mejorar los productos que a vosotros os gustáis!

Todos Temas Shopify

Hemos realizado un montón de mejoras tanto en el diseño como en la funcionalidad. Así que vamos a examinarlos!

Validación HTML

Un sitio construido de acuerdo a las normas generalmente aceptadas a menudo es más fácil de acceder por medio de todo tipo de dispositivos. Así que, lo más importante es tener el código limpio.

La plantilla predeterminada ha sido comprobada, las herramientas de validación dieron el resultado positivo del 100%.

Cambios en las páginas del producto

  • Hemos rediseñado la presentación de los productos en la lista. Ahora todo se basa en AJAX, sin tener que recargar la página;
  • Hemos añadido la funcionalidad de cambio de tipo – grid/lista;
  • Hemos añadido un método de clasificación - por precio ascendente / descendente, por nombre, por número de ventas, etc;
  • Hemos añadido el número de productos que se muestran en una sola página (6, 9, 15, todos) ;
  •  Productos de paginación también fueron construidos a base de Ajax;
  • Hemos mejorado la lógica de la clasificación de productos, los resultados se guardan en la sesión de cookie; el usuario no debe  reordenar los productos después de abrir una categoría diferente, ya que los ajustes se guardarán durante la sesión.

Conexiones de archivos reorganizadas

Para acelerar el proceso de carga de las páginas, hemos cambiado y reorganizado las conexiones de archivos (scripts y estilos), y eliminado los innecesarios.

  • Ficheros-css reorganizados: eliminamos el fichero ie8.css.
  • Estilos para jQuery-plugins (Fancybox, bxSlider, etc) fueron unidos en un solo fichero - assets.css.
  • Reorganizamos los ficheros js. Los ficheros principales (jQuery v1.8.3, jQuery Migrate v1.2.1, device.js, jQuery Cookie Plugin, etc.) fueron incluidos directamente en la sección <head> de la página. Otros se conectan antes del cierre de <body>.
  • Los archivos comunes están conectados de una manera convencional. Otros - dependiendo de la aplicación (por ejemplo, jquery.nivoslider.min.js están conectados sólo en la página principal, jquery.elevatezoom.js - aparece  sólo la página del producto).

Esto permite la gestión más flexible de las peticiones al servidor, reduce su número y acelera significativamente la velocidad de carga de las páginas.

Página de lista de categorías

La página fue reorganizada y mejorada.

1reorganised-and-improved

Correcciones de errores

Hemos corregido todos los errores que aparecieron después de la actualización de Shopify. Los clientes que compraron plantillas Shopify creadas para versiones anteriores del motor, se encontraron algunas dificultades con la instalación y la configuración. Hemos solucionado todos los problemas en todas las plantillas lanzadas anteriormente.

Hemos ampliado las funcionalidades y los ajustes del carrusel de productos en la página principal.

Ahora el usuario puede:

  • Seleccionar una categoría, determinando qué productos se mostrarán en el carrusel;
  • Elegir la cantidad de productos mostrados;
  • Elegir el número de filas en el carrusel: 1 o 2;
  • Elegir la dirección de desplazamiento: una dirección o dos;
  • Hemos implementado una opción “Quick view of the product” (botón “Quick view”). Se basa en AJAX/Jquery/json. Para que las páginas se carguen más rápidamente, sólo las imágenes y el fichero json se cargan desde el servidor, todo el resto se hace a través de JS y jQuery.

Cambios del carrito de compras

Hemos cambiado el mensaje que aparece después de adición de productos al carrito de compras (con una imagen del producto, y el número de productos agregados, también hemos cambiado el texto de los botones “Go to cart” y “Continue shopping”).

Todas estas opciones se basan en AJAX, sin tener que recargar la página. Hemos rediseñado completamente la página del carrito de compras. Los pasos como actualización del carrito, adición / eliminación de productos se realizan sin tener que recargar la página.

Cambios completos de la página de producto

Ahora la página de producto contiene la información más completa sobre producto.

Hemos mejorado el formulario de adición de producto al carrito (en la página del producto, en la página del carrito de compras se puede encontrarlo en la ventana modal “Quick view”). Hemos añadido la protección de datos al campo que muestra el número de productos.

Formularios renovados

Hemos añadido la función de validación de formularios. Ahora, si el formulario contiene los datos incorrectos, se destacan los campos con errores y se muestran las sugerencias de corrección.

2form

Cambio del estilo del blog

Hemos rediseñado completamente la página del blog. Agregamos una barra lateral especial (que muestra información sobre el blog: entradas, etiquetas y comentarios). Así que, ahora esta página es más atractiva visualmente.

3blog

Para mejorar el diseño en general, hemos rediseñado la página de registro, la página autorización y la página de recuperación de contraseña.

4registration

Cambios de la página de cuenta

Hemos rediseñado completamente las páginas de cuentas. Las funcionalidades de estas páginas han sido ampliadas y mejoradas: además de la información del cliente, ahora se muestran también la dirección de entrega y los pedidos.

Nuevas funcionalidades

  • Hemos implementado un banner promocional universal que aparece en la cabecera de la página, que también incluye un texto de anuncio, imágenes y cuenta atrás, todos los elementos se pueden editar a través del panel de control.
  • Hemos implementado una ventana emergente de boletín. Todos los elementos se pueden editar a través del panel de control.

Nuevos métodos de gestión de contenidos

  • Optimización de imagen de producto: La optimización de imágenes te permite reducir el tamaño de archivos sin perder su calidad.
  • Diversificación de surtido de productos: ahora nuestras tiendas de demostración Shopify tienen todas las posibles variaciones de opciones de productos.

Ejemplos:

Producto regular
example1
Producto disponible para su compra
example2
Producto de una sola opción
example3
Producto con tres opciones
example4

Hemos mejorado considerablemente las descripciones de productos: ahora te permite crear descripciones de texto con títulos, listas, videos, etc.

Examina:

Tienda de electrónica
example5
Tienda de electrónica
example6
Tienda de electrónica
example-7
Tienda de electrónica
example-8

Cambios en la estructura de la plantilla

Comenzando con la plantilla #55233 cada tema nuevo contendrá también los archivos PSD con el diseño de la tienda y un archivo de dump CSV.

electronics-storeLa popularidad de Shopify sigue creciendo, simplemente echa un vistazo a este gráfico!

stats

Fuente: "Shopify Themes Get a Major Facelift. See it in Action" por Alex Bulat



Diane Parks

Diane trabja como una redactora del blog MonsterPost España desde hace muchos años. No imagina su vida sin escribir, aprender algo nuevo cada día, desarollarse personalmente y profesionalmente, y compartir sus conocimientos y experiencia con los lectores del blog. ¡Síguela en Facebook!