La pestaña Grafica permite ajustar la apariencia de la plantilla elegida sin cambiar su estructura. Con el Theme Editor se cambian colores de elementos concretos (botones, menú, carrito, migas de pan) y con Custom CSS se agrega código CSS propio, que tiene prioridad sobre lo anterior. Úsela para alinear la tienda con los colores de su marca.
Antes de comenzar
- Elija primero la plantilla en la pestaña Plantillas.
- Tenga los códigos de color de su marca (ej.: #0a7fd9).
- El CSS personalizado está pensado para usuarios con conocimientos de CSS.
Paso a paso
Cambiar colores con el Theme Editor
- Ingrese a Menú principal → Ecommerce (ObumaShops) → Listar y presione el ícono de edición (lápiz) de la tienda que desea configurar.
- Abra la pestaña Grafica. Se muestra el Theme Editor en modo Visual Editor.
- Haga clic en el grupo main para desplegar los elementos editables.
- Cada recuadro indica el elemento (ej.: Botones), su Selector CSS (ej.: .btn) y la propiedad (Color de fondo o Color letra). Ingrese el código de color o presione ... para elegirlo.
- Presione Guardar.

Agregar CSS personalizado
- En la pestaña Grafica, presione Custom CSS.
- Escriba el código en el cuadro Escribe codigo css libre, prevalece por sobre los anteriores.
- Presione Guardar.

Resultado esperado
Al volver a abrir la pestaña, los colores y el CSS guardados se mantienen y se aplican a la tienda.
Atención: el enlace Vaciar CSS borra la personalización. No se probó en esta guía; úselo solo si quiere volver a los colores de la plantilla.
Pendiente de confirmar: cómo se ven los colores y el CSS personalizado en la tienda publicada. Este artículo se actualizará cuando se confirme.
Preguntas frecuentes
¿Qué pasa si un color del Theme Editor y el Custom CSS se contradicen?
Prevalece el Custom CSS, como indica la pantalla.
Artículos relacionados: Como elegir la plantilla y la paleta de colores de la tienda online