Diseñar una tienda

Parte de un sistema o una receta, y luego gira los controles. Cada cambio es un ajuste real del tema.

Sistemas

Un sistema es un diseño completo y coherente: tipografía, color, espaciado, radios, botones, tratamiento de imágenes, disposiciones y funciones. EverStorefront trae tres — Foundry, Ledger y Signal — y cada proyecto parte de uno de ellos, o de un diseño guardado en tu biblioteca.

El Libro de patrones

El Libro de patrones es el catálogo indexado y buscable: recetas (un sistema ajustado a un sector y un carácter), paletas y parejas tipográficas. Filtra por sector, carácter, sistema base; aplica cualquiera a un proyecto con un clic; guarda los tuyos en la biblioteca.

El panel

Abre Diseño en un proyecto. Los grupos a la izquierda, la vista previa en vivo a la derecha — inicio, colección, producto y carrito, escritorio o móvil, y antes / después contra la tienda tal como está hoy.

• Tipografía — familias de títulos y texto (47 familias verificadas, con las recientes a mano), escala, peso y espaciado de los títulos, interlineado del texto.
• Color — paleta, o cada rol a mano: fondo, superficie, texto, atenuado, acento, borde.
• Forma — esquinas para controles, tarjetas, imágenes y botones, con valores exactos.
• Botones — tamaño, mayúsculas, estilo secundario.
• Superficies — estilo de tarjeta, sombra, grosor de borde, fuerza de los separadores, espacio entre secciones.
• Disposición — tres variantes para encabezado, portada, tarjetas de producto, colección destacada, página de producto y pie.
• Funciones — carrito lateral, búsqueda predictiva, filtros, añadir rápido, muestras, añadir al carrito fijo, submenús (desplegable o megamenú).
• Página de inicio — qué secciones aparecen y en qué orden, incluidas multicolumna, testimonios, barra de logos y preguntas frecuentes.

Cada control escribe un ajuste real del tema, así que el comerciante puede cambiar lo mismo después en el editor de Shopify.

Comparar

Antes / después pone la página de inicio en vivo de la tienda junto al nuevo diseño, bajo un divisor arrastrable que desplaza ambos lados a la vez. Está en la página de diseño, en la de prueba y en los enlaces de revisión.