Uno de los muchos beneficios de usar BigCommerce es lo personalizable que es la tienda sin tocar código, y la pieza central de eso es el editor de temas (también llamado Page Builder / Theme Editor en la versión actual de BigCommerce).
El editor de temas permite a los usuarios de BigCommerce modificar la apariencia de un tema (fuentes, colores, diseño y presentación de productos) de forma visual, con vista previa en vivo y sin escribir Stencil ni HTML. Esta guía repasa los controles que importan y el flujo de trabajo que te evita problemas.
Trabaja en una copia, no en el tema en vivo
Antes de cambiar nada: en Storefront > My Themes, duplica tu tema activo y edita la copia. El botón Publish del editor de temas aplica los cambios a tu tienda en vivo de inmediato, así que editar una copia te da un entorno seguro y una forma instantánea de revertir si un cambio se ve mal en la tienda. Este solo hábito evita el percance más común con los temas de BigCommerce: que una edición a medias salga en vivo en horario comercial.
Elegir un estilo de tema – Haz clic en la pestaña Styles para ver las variaciones de estilo predefinidas que incluye el tema (distintas combinaciones de color y tipografía). Selecciona una y se convertirá en la base que luego ajustarás. Cada tema también ofrece controles adicionales más allá de los ajustes predefinidos, así que el estilo es un punto de partida, no un límite.
Personalizar los colores – Puedes definir los colores en todo el sitio con el selector de color o escribiendo un valor hexadecimal exacto junto a cada elemento del menú, y la vista previa se actualiza al instante. Si un color se repite en tu tema, guárdalo como muestra con el ‘+’ debajo del selector para que toda la paleta se mantenga consistente y puedas reutilizarlo con un clic. Usa aquí los valores hexadecimales exactos de tu marca y revisa el contraste: el texto sobre los fondos debe cumplir WCAG AA (una relación de 4.5:1 para texto normal) para que la tienda sea legible y accesible.
Personalizar las fuentes – El menú Typography and Icons controla la familia, el tamaño y el color de las fuentes del texto, los encabezados y los íconos, cada uno con su propio menú desplegable. Aquí la moderación da resultados: dos tipografías como máximo, una jerarquía de tamaños clara y un tamaño de texto de al menos 16px para que la tienda se lea bien en teléfonos, donde está la mayor parte de tu tráfico. Las fuentes web personalizadas pesadas también ralentizan la página, así que sopesa la fidelidad a la marca frente al tiempo de carga.
Productos – El menú Products cambia cómo se muestran las tarjetas y los listados de productos. Las "tarjetas de producto" son la forma en que los artículos aparecen en las páginas de categoría: puedes ajustar el número de productos relacionados, los productos por página, el tamaño de las imágenes y los colores de las tarjetas. Estas decisiones tienen un impacto comercial real: la proporción de las imágenes afecta lo profesional que se ve la cuadrícula, y los productos por página afectan tanto la sensación de variedad como la velocidad de la página, así que prueba en lugar de adivinar.
Revisa cada punto de quiebre antes de publicar
El editor muestra la vista previa en escritorio, tablet y móvil desde el selector de dispositivo. Revisa siempre los tres: un diseño que se ve equilibrado en escritorio a menudo se rompe en móvil, donde ahora está la mayor parte del tráfico eCommerce. Cuando estés conforme, puedes publicar (en vivo de inmediato), guardar sin publicar, descartar los cambios o restablecer el tema a su configuración predeterminada. Como estás trabajando en un tema duplicado, incluso publicar es reversible: solo vuelve a publicar la copia anterior del tema.
Conoce los límites del editor
El editor de temas tiene límites a propósito. Se encarga del estilo, las regiones del diseño y los ajustes de merchandising, pero los cambios estructurales (plantillas personalizadas, nuevos tipos de sección, marcado Stencil o funciones a medida) requieren editar los archivos del tema o recurrir a un desarrollador. Una buena regla: usa el editor para todo lo que ofrece y pasa al código solo cuando un requisito real del negocio no pueda cumplirse de forma visual. Así tu tienda sigue siendo segura ante actualizaciones y fácil de mantener.
Preguntas frecuentes
¿Publicar sobrescribirá mi trabajo si cambio de tema? Tus ediciones se guardan en la copia específica del tema que estabas editando. Cambiar el tema activo no las borra; puedes volver a esa copia.
¿El editor de temas puede perjudicar el SEO? Indirectamente, sí: las fuentes e imágenes pesadas y un contraste pobre ralentizan el sitio y perjudican la usabilidad. Ten en cuenta el rendimiento y la accesibilidad mientras le das estilo.
¿Cuándo necesito un desarrollador? Cuando necesitas plantillas nuevas, secciones personalizadas o funciones que los menús no ofrecen.
Un flujo de personalización sensato
Une las piezas en un proceso repetible para que los cambios de tema nunca se conviertan en emergencias. Duplica el tema en vivo y trabaja en la copia. Haz un tipo de cambio a la vez (colores, luego tipografía, luego presentación de productos) en lugar de todo junto, para que, si algo se ve mal, sepas exactamente qué lo causó. Revisa escritorio, tablet y móvil después de cada grupo de cambios. Pide a otra persona que revise la copia de la tienda antes de publicar, porque quien hizo el cambio es quien peor puede juzgar si se entiende con claridad. Publica en un horario de poco tráfico y luego abre de inmediato la tienda en vivo en un teléfono real, no solo en la vista previa del editor, y recorre un camino completo: inicio, categoría, producto, agregar al carrito, pago. Lleva un registro de una línea de qué cambiaste y cuándo, para que una regresión futura sea fácil de rastrear. Nada de esto es técnico, pero seguirlo de forma constante es la diferencia entre una tienda que evoluciona sin contratiempos y otra en la que cada ajuste visual arriesga una falla visible para el cliente.
Un punto estratégico más: resiste la tentación de personalizar de más. Cada desviación de los valores predeterminados del tema es algo que tendrás que volver a revisar cuando se actualice el tema y algo que puede desviarse de la consistencia de marca con el tiempo. Cambia lo que realmente sirve a la marca y al comprador; deja el resto con valores predeterminados razonables. Una tienda sobria y consistente casi siempre convierte mejor que una muy retocada, y es mucho más barata de mantener.
Si quieres más ayuda para sacarle el máximo provecho a BigCommerce, o un tema totalmente personalizado que vaya más allá de lo que permite el editor, recurre a 1Digital®. Somos partners de BigCommerce con un equipo dedicado de diseño y desarrollo en BigCommerce. Contáctanos hoy.