# Agregar CSS personalizado, código en el head o scripts

En el editor de temas, haz clic en el icono de engranaje para abrir **Configuración general → Code personalizado**: pega el CSS en **CSS de la tienda** (todas las páginas) o **CSS de la página** (solo esta página), las etiquetas para el head en **Código personalizado en head** y los scripts en **Código Javascript personalizado**. Para insertar marcado dentro de una página, usa el bloque **Código Html**.

## Pasos

1. Abre **Tienda en línea → Config. de tema** y selecciona la página en **Seleccionar página**. Haz clic en el icono de engranaje de **Configuración general** y despliega **Code personalizado**.
2. **CSS personalizado**: elige la pestaña **CSS de la tienda** ("El CSS de la tienda se aplica a todas las páginas de la tienda.") o **CSS de la página** ("El CSS de la página solo afecta a esta página."). Pega únicamente tu código CSS, sin etiquetas `<style>`.
3. **Código personalizado en head**: pega el código con sus etiquetas completas (por ejemplo, una etiqueta `<script>` o `<meta>` completa). Este cuadro es por página.
4. **Código Javascript personalizado**: pega el código completo sin etiquetas `<script>`; estos scripts se ejecutan después de que carga el contenido de la página. También es por página.
5. Haz clic en **Guardar**. El código personalizado se guarda junto con la página, por idioma.
6. Para colocar HTML dentro del diseño de la página, abre **Agregar bloques**, arrastra un bloque **Código Html** a su posición y edita su **Contenido**.
7. En una landing page existe el mismo panel **Code personalizado**, pero el CSS se aplica solo a esa página (no hay pestaña **CSS de la tienda**).

## Problemas frecuentes

- El CSS no tiene efecto → elimina cualquier etiqueta `<style>`, luego comprueba que lo pegaste en **CSS de la tienda** si debe aplicarse en todas partes, y **Guardar**.
- El script se ejecuta en una sola página → los cuadros de head y JavaScript son por página; agrega el código en cada página que lo necesite.
- El script no se ejecuta en absoluto → elimina las etiquetas `<script>` en **Código Javascript personalizado**; solo van en el cuadro del head.
- El bloque Código Html muestra menos de lo que pegaste → parte del marcado se limpia antes de mostrarse; usa HTML estándar.
- El código funciona en un idioma de la tienda pero no en otro → el código personalizado se guarda por idioma; cambia el idioma del editor y guarda de nuevo.

## Relacionado

- [Cómo cambiar el tema de tu tienda y editar sus secciones](https://help.dropify.shop/es/store_theme/change-your-store-theme-and-sections/)
- [¿Veo UTM en pedidos o agrego código a la página de agradecimiento?](https://help.dropify.shop/es/pixels_tracking/utm-tracking-thank-you-page-custom-code/)
- [Agregar píxeles de Meta, TikTok, Google o Snapchat](https://help.dropify.shop/es/guides/add-tracking-pixels-to-your-store/)
- [Configurar el título, la descripción y las palabras clave SEO de una página](https://help.dropify.shop/es/guides/set-page-seo-title-description-keywords/)