Ir al contenido

CSS personalizado

Use CSS personalizado para ajustes de estilo precisos cuando los ajustes estándar no sean suficientes.

Use este bloque cuando necesite un ajuste de estilo que los ajustes disponibles no puedan gestionar. Le permite añadir CSS dirigido al área de plantilla actual, lo cual resulta útil para pequeñas anulaciones como correcciones de espaciado, tipografía, alineación o diseño. Para obtener contexto más amplio sobre dónde viven los bloques en un tema, vea documentación de Shopify sobre secciones y bloques

Introduzca solo CSS, sin etiquetas <style>. Los selectores amplios o las reglas no válidas pueden afectar a más partes de la página de las que pretendía.

El campo de código es donde añade su CSS. Este bloque funciona mejor para cambios concretos con selectores claros, en lugar de grandes colecciones de estilos para todo el sitio. Para una descripción general del editor, vea documentación de Shopify sobre el editor de temas

Mantenga las reglas lo más específicas y mínimas posible. Las anulaciones más pequeñas y bien delimitadas son más fáciles de probar, más fáciles de mantener y menos propensas a fallar cuando actualice el contenido o ajuste bloques cercanos.

Si desea una guía paso a paso, vea la referencia CSS personalizado proporcionada por la fuente.

Estos ajustes solo afectan a cómo aparece el bloque en la barra lateral del editor. Use el título del editor para etiquetar claramente el propósito del CSS, especialmente si añade varios bloques de Custom CSS a la misma plantilla.

  1. Mantenga los selectores estrechos. Diríjase al área práctica más pequeña para que su CSS no vuelva a dar estilo, sin querer, a otro contenido.
  2. Use esto para excepciones. Primero recurra a los controles de diseño integrados y luego use este bloque para ajustes que esos controles no pueden cubrir.
  3. Nombre los bloques con claridad. Defina un título del editor que describa el cambio, como una corrección de espaciado o un ajuste de tipografía para móvil.
  4. Revise pantallas más pequeñas. Pruebe su CSS en diseños de móvil y tableta para asegurarse de que el espaciado, el ajuste de línea y la alineación sigan funcionando bien.
  5. Evite guardar demasiado aquí. Use este bloque para anulaciones concisas, no como un lugar comodín para grandes sistemas de estilos personalizados.