Agregar CSS personalizado al tema

Una hoja de estilo en cascada (CSS) cambia cómo se muestran los elementos en el tema y puede controlar el aspecto de varias páginas al mismo tiempo. Puedes personalizar el tema más allá de los ajustes integrados mediante la función de CSS personalizado. Por ejemplo, puedes usar CSS para establecer degradados en la configuración de color del tema. Puedes agregar CSS personalizado a todo el tema o a una sección específica de una plantilla del tema. El CSS personalizado no se admite en la página de Pago.

Personalizar el CSS requiere cierta familiaridad con CSS y HTML. Antes de personalizar el tema, asegúrate de entender qué nivel de ayuda está disponible.

En esta página

Consideraciones para usar CSS personalizado

Antes de agregar CSS personalizado al tema, revisa las siguientes consideraciones:

Los siguientes selectores y propiedades de CSS no se admiten en el CSS personalizado:
- No se pueden usar las reglas @import, @charset y @namespace
- Para CSS a nivel de sección, solo se permiten las reglas @media, @container, @layer y @supports
- Para CSS a nivel de sección, no puedes dirigirte al ID ni a las clases del elemento de sección de Shopify que el tema renderiza con la clase shopify-section
- La propiedad content no está disponible en el CSS personalizado
Si declaras una regla de CSS personalizado con la etiqueta que envuelve el elemento de la sección principal, se considera una etiqueta descendiente y la regla de estilo se aplica a esa sección. Ten en cuenta que, de forma predeterminada, la sección principal se envuelve en una etiqueta <div>, pero se puede configurar cualquiera de los valores permitidos en el esquema de la sección.
Actualmente, solo se permite el dominio https://cdn.shopify.com al usar URL en el CSS personalizado.
Las fuentes personalizadas no están restringidas. Sin embargo, son un recurso independiente que los navegadores descargan antes de renderizar el texto, lo que puede afectar el rendimiento general de la tienda. Es tu responsabilidad asegurarte de que la tienda online no se vea afectada negativamente por las fuentes personalizadas. Aprende a usar fuentes personalizadas en el tema.
Las reglas de CSS que afectan a todo el tema están limitadas a 1.500 caracteres.
Las reglas de CSS que afectan a una sección específica están limitadas a 500 caracteres.
Según los selectores o clases de CSS que uses, al actualizar el tema el CSS personalizado podría dejar de funcionar.

Shopify no brinda soporte para personalizaciones avanzadas de temas. Si encuentras un error relacionado con estas limitaciones en el CSS personalizado y no puedes determinar qué lo causa, consulta la lista de otros recursos de ayuda disponibles.