ITSHOP

Tu almacén tecnológico

Rediseño completo de una tienda de tecnología en Shopify: de colecciones desordenadas a un catálogo que se entiende.

Tipo: Rediseño de ecommerce
Estado: Publicado
Mi aporte: Arquitectura, diseño, desarrollo e integraciones
Año: 2025
Herramientas: Figma · Shopify · Liquid · CRM y marketing

Home de ITSHOP: cabecera con búsqueda y carrito, menú de categorías y banner «Juega al máximo nivel». — Fig. 01Sitio implementadoPrimer viewport en desktop.

01Resumen

Rediseño completo del ecommerce de ITSHOP, tienda de tecnología, gaming y accesorios, en Shopify. El sitio anterior tenía una navegación confusa, demasiadas colecciones y poca información para decidir una compra. El objetivo era que encontrar un producto y comprarlo fuera simple, en desktop y en móvil.

Vista general de la home completa, dividida en tres columnas. — Fig. 02Sitio implementadoLa home completa, en tres columnas que se leen de izquierda a derecha.

02Mi participación

Rol y alcance: Participé en todo el proceso: arquitectura de contenidos, diseño UX/UI, prototipo, desarrollo en Shopify e integraciones.
Colaboración: Proyecto realizado en Agencia Böll.
Entregables: Jerarquía de colecciones y categorías
Propuesta de diseño en Figma
Implementación en Shopify con personalizaciones en Liquid
Formularios integrados a CRM y marketing

03El problema

Un catálogo amplio repartido en muchas colecciones sin una lógica común: el cliente no sabía por dónde entrar y, cuando llegaba a un producto, faltaba información para decidir. Antes de diseñar una sola pantalla había que ordenar el catálogo.

Trabajar dentro de Shopify: todo lo diseñado debía poder mantenerse desde el administrador de la tienda.

04Decisiones clave

Cada decisión se lee como necesidad → decisión → efecto. «Esperado» indica la intención de diseño, no un resultado medido.

Decisión 01

Ordenar el catálogo antes de diseñar

Necesidad: Demasiadas colecciones superpuestas hacían imposible predecir dónde estaba cada producto.
Decisión: Empecé por una jerarquización de contenidos: agrupé colecciones en categorías principales y subcategorías, y llevé esa estructura al menú «Todas las categorías», a la barra de navegación y a un carrusel de categorías en la home.
Efecto esperado: Una sola lógica de navegación en toda la tienda.

Carrusel de categorías circulares, franja de beneficios de compra y banner de canales oficiales. — Fig. 03Sitio implementadoCategorías principales como puerta de entrada, beneficios y aviso de canales oficiales.

Decisión 02

Resolver las dudas de compra antes del catálogo

Necesidad: Despacho, armado de PC y medios de pago eran preguntas frecuentes que frenaban la compra.
Decisión: Ubiqué bajo las categorías una franja con los cuatro beneficios de compra y un aviso destacado con los canales oficiales de la tienda, para proteger al cliente de perfiles falsos.
Efecto esperado: Más confianza para comprar directamente en el sitio.

Decisión 03

Fichas y tarjetas con información para decidir

Necesidad: Comparar precios rápido en un catálogo con muchas promociones.
Decisión: Cada tarjeta muestra la etiqueta de oferta, la categoría, el nombre completo, la valoración y el precio anterior tachado.
Efecto esperado: Leer el descuento sin entrar a cada producto.

Grilla «Productos destacados» con etiquetas de oferta, categoría, nombre y precios con descuento. — Fig. 04Sitio implementadoProductos destacados en grilla de cuatro columnas.

05Versión móvil

Fig. 05Sitio implementadoEn móvil, la cabecera se reduce a logo, carrito y menú; los beneficios pasan a una lista y los productos a dos columnas.

06Del diseño a la implementación

Diseñé la propuesta en Figma y la implementé en Shopify, con personalizaciones específicas en Liquid sobre el theme.

Estructura de colecciones y menús a partir de la jerarquía definida.
Secciones personalizadas en Liquid para los componentes del diseño.
Versión móvil con cabecera compacta, beneficios en lista y productos en dos columnas.
Formularios nativos integrados a CRM y plataformas de marketing.

07Resultado y aprendizaje

Entregado: Tienda rediseñada y publicada en Shopify, con navegación por categorías y versión móvil.
Observado: La navegación pasó de muchas colecciones sueltas a una estructura de categorías principales y subcategorías, la misma en el menú, la home y el móvil.
Aprendizaje: En un ecommerce el diseño empieza en la arquitectura del catálogo. Ordenar colecciones antes de dibujar pantallas evitó rediseñar sobre una estructura que no funcionaba, y conocer los límites del theme desde Figma me permitió proponer solo lo que después se puede mantener con Liquid.