CASE:Title

See the life of pink color

Hero
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

Flamingo

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 ;)

Text+FirstImage
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 😎

Text+SecondImage

Discover now the different options available

And start upgrading your Shopify store today

See pricing

Submit now your design and get a UX Review for Free

Flexible payment options

Submit Project Proposal