Configurar la apariencia de tu tienda online es fundamental para transmitir la identidad de tu marca desde el primer momento. Storefront ofrece un personalizador en tiempo real que permite ajustar colores, tipografías, botones y estructura sin necesidad de escribir código, y cada cambio se refleja de inmediato en la vista previa del sitio.
¿Cómo acceder al personalizador de Storefront?
Para comenzar, dirígete a Apariencia > Personalizar en el panel de WordPress [0:15]. Esto abre una herramienta visual dividida en dos partes: a la izquierda, las opciones de configuración; a la derecha, una vista previa en vivo del sitio. Cualquier modificación que realices se mostrará instantáneamente.
Una herramienta complementaria muy útil es Coolors [0:38], un sitio web que ofrece paletas de colores listas para usar. Puedes buscar por un color principal —por ejemplo, el de tu logo— y obtener una paleta armónica completa que mantenga coherencia visual en toda la tienda.
¿Qué elementos de identidad visual puedes configurar?
Logo y favicon
En la sección Identidad del sitio [1:00] encontrarás el título, la descripción corta, y la opción de subir un logo. La herramienta permite recortarlo para que se ajuste correctamente al header. También puedes configurar el favicon, que es el pequeño ícono que aparece en la pestaña del navegador. Este debe ser una imagen cuadrada de al menos 512 × 512 píxeles [1:30].
Cabecera y pie de página
La cabecera permite definir color de fondo y color de texto [1:55]. Dejar el fondo en blanco ayuda a que el logo destaque. El pie de página también es personalizable: puedes asignarle el color principal de tu marca como fondo y texto blanco para garantizar legibilidad [2:16].
Fondo, tipografía y botones
- Fondo del sitio: puedes elegir un color sólido o incluso una imagen en mosaico, aunque lo más limpio suele ser dejarlo en blanco [2:41].
- Tipografía: permite ajustar el color de los textos y el color de los enlaces visitados, que indica al usuario qué páginas ya recorrió [3:05].
- Botones: los botones de "Añadir al carrito" y "Ver carrito" son configurables de forma independiente [3:20]. Puedes usar el color de tu marca para el botón principal y un color diferente para el botón que aparece tras la acción, manteniendo siempre texto blanco para facilitar la lectura.
¿Cómo configurar el diseño, widgets y catálogo de productos?
El diseño define la posición del sidebar —la barra lateral con búsqueda, categorías y entradas recientes— que puede ubicarse a la derecha o izquierda [3:55]. Si eliminas todos los widgets de la barra lateral y configuras la página con ancho completo desde los atributos de página [4:30], el contenido ocupará toda la pantalla.
El personalizador ofrece vista responsiva [4:10]: puedes previsualizar cómo se ve tu tienda en escritorio, tablet y dispositivo móvil. En la versión móvil aparece automáticamente un menú hamburguesa, y puedes asignar un menú diferente para mobile si necesitas mostrar menos opciones.
Los widgets del pie de página se distribuyen en hasta cuatro columnas que se ajustan automáticamente [5:15]. Si solo usas dos, el footer se divide en dos partes; si agregas un tercero, se divide en tres. Puedes colocar información como dirección, teléfono y horario de atención.
Catálogo y visualización de productos
Desde Páginas de WooCommerce puedes activar un aviso en la tienda [6:15], por ejemplo: "No te pierdas las ofertas de verano". Este mensaje aparece una sola vez por usuario y se puede renovar cuando desees.
El catálogo permite filtrar productos por categorías o subcategorías, ordenarlos por precio de forma ascendente o descendente, y definir cuántas columnas y filas mostrar por página [6:50]. Si los productos exceden la cantidad configurada, aparece un paginador automático. Una configuración habitual es tres columnas y cuatro filas.
Para las imágenes de productos, la proporción recomendada es uno a uno [7:30], es decir, recorte cuadrado. Esto evita que imágenes grandes afecten el diseño o ralenticen la carga.
Checkout y políticas de privacidad
En la sección de finalizar compra [7:50] puedes ocultar campos como el nombre de empresa —útil si vendes a consumidores individuales—, hacer opcional una segunda línea de dirección, o definir si el campo de teléfono es obligatorio u oculto.
También puedes vincular las páginas de política de privacidad y términos y condiciones [8:20] mediante shortcodes que generan automáticamente los enlaces correspondientes en el formulario de compra.
Por último, si tienes conocimientos de CSS, el personalizador incluye una sección para agregar estilos personalizados que van más allá de las opciones predeterminadas [8:50].
Cuéntanos en los comentarios cómo quedó tu tienda después de aplicar estas configuraciones.
