CSS personalizado avanzado
Cuándo y cómo usar CSS personalizado con seguridad en Studio Arcana.
Prefiere Ajustes del tema y de sección antes que CSS personalizado. Usa CSS solo para pequeños ajustes de marca que los ajustes no cubren.
Canales de venta > Tienda online > Temas > Personalizar > Ajustes del tema > CSS personalizado (o CSS de sección si existe)
Preferir ajustes primero
- Colores → Esquemas de color
- Tipografía → fuentes
- Forma y espaciado → radios y densidad
- Controles de layout y relleno de sección
Hábitos más seguros
- Acota selectores bajo un id de sección o .shopify-section cuando sea posible.
- Prefiere variables CSS que el tema ya expone frente a hex fijos.
- Evita !important salvo último recurso.
- No ocultes los contornos de foco.
Riesgos
- Las actualizaciones del tema pueden cambiar nombres de clase: los ajustes sobreviven mejor.
- El CSS global puede romper bloques de apps y superficies cercanas al checkout.
- CSS grande perjudica el rendimiento; mantén el CSS personalizado corto.
Solución de problemas
- La regla no aplica — especificidad o plantilla incorrecta; inspecciona en DevTools.
- Bien en el editor, mal en vivo — fuerza actualización o otra caché de dispositivo.
- Roto tras actualizar — vacía temporalmente el CSS personalizado para aislar la causa.
¿Te resultó útil esta página?
El contenido lo mantiene Arcanum Hollow Labs. Para notas internas de ingeniería, consulta la carpeta docs/ del monorepo.