Agregar CSS personalizado a un tema

Una hoja de estilos en cascada (CSS, por sus siglas en inglés) 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 usando la función CSS personalizada. Puedes agregar CSS personalizado a todo el tema o a una sección específica de una plantilla dentro del mismo. No se admite CSS personalizado 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.

Consideraciones para usar CSS personalizado

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 reglas "at".
    • 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.
  • 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 personalizado

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:

  1. En tu panel de control de Shopify, ve a Tienda online > Temas.
  2. Haz clic en Personalizar.
  3. Haz clic en Configuración del tema.
  4. Haz clic en CSS personalizado.
  5. Agrega el código.
  6. Haz clic en Guardar.

Ubicación del cuadro CSS personalizado en la configuración del tema

El CSS personalizado también se puede agregar a una sección específica del tema. Por ejemplo, puedes aplicar un tamaño de fuente personalizado o un color de fondo a una sola sección.

Pasos:

  1. En tu panel de control de Shopify, ve a Tienda online > Temas.
  2. Haz clic en Personalizar.
  3. Haz clic en la sección en la que deseas agregar CSS.
  4. En la parte inferior del panel de propiedades de la sección, haz clic en CSS personalizado.
  5. Agrega el código.
  6. Haz clic en Guardar.

Ubicación del cuadro de CSS personalizado en la configuración de la sección

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:

¿Estás listo/a para comenzar a vender con Shopify?

Prueba gratis