Agregar CSS personalizado a un tema
Una hoja de estilo en cascada (CSS) cambia la forma en la que se muestran los elementos en el tema y puede controlar la apariencia de varias páginas a la vez. Puedes personalizar el tema más allá de la propia configuración integrada con la función CSS personalizada. Puedes agregar CSS personalizada a todo el tema o a una sección específica de una plantilla dentro de él. No se admite CSS personalizada en la página de pago.
Para personalizar una hoja de estilos en cascada debes conocer HTML y CSS. Antes de personalizar el tema, asegúrate de comprender cuál es el nivel de ayuda disponible.
En esta página
Consideraciones para usar CSS personalizada
Antes de agregar CSS personalizado al tema, revisa las siguientes consideraciones:
-
Los siguientes selectores de CSS no son compatibles con el CSS personalizado:
- No se pueden usar las reglas-at
@import,@charsety@namespace. - Para CSS a nivel de sección, solo se permiten las reglas-at
@media,@container,@layery@supports. - Para el CSS de nivel de sección, no puedes apuntar a la identificación o las clases del elemento envolvente Shopify Section renderizado por el tema con la clase
shopify-section.
- No se pueden usar las reglas-at
Si se establece una regla de CSS personalizado con la etiqueta que envuelve el elemento de la sección padre, entonces se considera una etiqueta descendente y la regla de estilo se aplica a esa sección. Ten en cuenta que de forma predeterminada la sección padre está envuelta con una etiqueta
<div>, pero los desarrolladores de temas pueden establecer cualquiera de los valores permitidos en el esquema de la sección.Actualmente solo se permite el dominio https://cdn.shopify.com cuando se usan URL en el CSS personalizado.
Las fuentes personalizadas no están restringidas. Sin embargo, son un recurso separado que los navegadores descargan antes de renderizar el texto, lo que puede afectar el rendimiento general de la tienda. Debes asegurarte de que la página principal de la tienda no se vea afectada negativamente por las fuentes personalizadas. Aprende a usar fuentes personalizadas en el tema.
Las reglas de CSS que afectan todo el tema están limitadas a 1500 caracteres.
Las reglas de CSS que afectan una sección específica están limitadas a 500 caracteres.
Dependiendo de los selectores o clases de CSS que utilices, el CSS personalizado podría dejar de funcionar al actualizar el tema.
Shopify no admite personalizaciones de temas avanzadas. Si surge un error relacionado con estas limitaciones en el CSS personalizado y no puedes determinar la causa, consulta la lista de otros recursos de ayuda disponibles.
Agregar CSS personalizada
El CSS personalizado se puede agregar a todo el tema que afecta todas las páginas de la tienda online, excepto la página de Pago. Por ejemplo, puedes cambiar la forma en que se muestran los botones en toda la tienda.
Pasos:
- En tu panel de control de Shopify, ve a Tienda online > Temas.
- Haz clic en Personalizar.
- Haz clic en Configuración del tema.
- Haz clic en CSS personalizado.
- Agrega el código.
- Haz clic en Guardar.
El CSS personalizado también se puede agregar a una sección específica de tu tema. Si agregas CSS personalizado a una sección de tu tema, su alcance se limitará esa sección. Por ejemplo, puedes aplicar un tamaño de fuente personalizado o un color de fondo a una sola sección.
Pasos:
- En tu panel de control de Shopify, ve a Tienda online > Temas.
- Haz clic en Personalizar.
- Haz clic en la sección en la que deseas agregar CSS.
- En la parte inferior del panel de propiedades de la sección, haz clic en CSS personalizado.
- Agrega el código.
- Haz clic en Guardar.
Recursos adicionales para CSS
Para personalizar una hoja de estilos en cascada debes conocer HTML y CSS. Antes de personalizar el tema, asegúrate de comprender cuál es el nivel de ayuda disponible.
Si te interesa aprender más sobre CSS, puedes consultar algunos de los siguientes recursos: