erpComo personalizar los colores y el CSS de la tienda online
https://www.obuma.cl/ayuda/articulo/260La 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