CASE:Title
See the life of pink color
CASE:Intro
Alberto nos presentó un diseño en el que destacaban los diversos colores, tipografías y tamaños
En la home teníamos el reto de crear una sección que fuese capaz de tener imagen, vídeo o color de fondo, incluso degradados de color, también poder elegir los tamaños de todos los textos, que tipografía llevan y el color.
Unas pagínas de colecciones sencillas, con un banner principal que consta de imagen y texto y a continuación los productos con una imagen secundaria que se muestra al hover.
También tiene la opción de agregar páginas de destacadas en las colecciones, dichas páginas constan de pares de imágenes que pueden ser posicionadas por coordenadas para tener la capacidad de posicionarlas donde más nos guste.
La página de producto nos presenta a primera vista las imágenes de producto y la información del mismo, más abajo el packaging y las medidas, las cuales hemos introducido por tags de producto, la página de producto cuenta con una particularidad, integramos una App para poder hacer la parte de graduación, la cual nos permite elegir entre diferentes opciones las cuales nos irán cambiando el precio del producto.
CASE:Details
Business
Expertise
Full Section, Banner Rotative, Cordinate Images, Product Multiple Options, ...
Developed
2018
CASE:TextFull
Product Tags Info
CASE:Text+FirstImage
Destacermos el uso de Tags en la página de producto para mostrar distinta información dependiendo del producto en el que estemos.
A nivel de código lo que tenemos que hacer es un buclé con los tags del producto y añadir a este tag un prefijo para poder hacerlo diferenciarlo de los otros tags, como por ejemplo: INFO:Montura de acetato italiano. Utilizamos INFO: para detectar el tag que queremos mostrar, entonces mostraremos todos los tags que contenga INFO:, en la imagen puedes ver el resultado ;)
CASE:TextFull
Product Sticky Add To cart
CASE:Text+SecondImage
Nos gustaría destacar también el formulario para agregar al carrito que te acompaña por la página ya que fue algo que aportamos nosotros al diseño, ya que no lo incluían y a nosotros nos parecía muy bueno incluirlo de cara a aumentar la experiencia de usuario.
Se trata simplemente crear un formulario a parte del principal que posicionaremos de manera fija y que mostraremos mediante JavaScript únicamente cuando hayamos hecho scroll en la página de producto y superemos la primera sección y desaparece cuando llegamos a la sección de "Productos Relacionados", para así no dejar partes ocultas y que el usuario pueda navegar por la página de producto sin problemas de visión 😎
Discover now the different options available
And start upgrading your Shopify store today
Submit now your design and get a UX Review for Free
Flexible payment options