Código personalizado

Enlaces destacados

1. Documentación de Shopify sobre secciones y bloques
2. Documentación de Company XYZ sobre la sección de código personalizado
3. Documentación de Company XYZ sobre el bloque de recursos personalizados
4. Documentación de Company XYZ sobre el bloque de CSS personalizado
5. Documentación de Company XYZ sobre el bloque de JavaScript personalizado

Videos útiles

Vídeo de Shopify Academy: Personalizar tu tienda

Vídeo de Shopify Academy: Personalizar tu tienda

Use esta sección para colocar CSS personalizado, JavaScript o incrustaciones completas de recursos directamente en una plantilla. Es ideal para cambios avanzados específicos de la página, como anulaciones de estilo, servicios incrustados o scripts que solo deben cargarse en un área concreta.

El código personalizado puede afectar al diseño, el rendimiento, la accesibilidad y el comportamiento interactivo. Pruebe con cuidado en escritorio y en dispositivos móviles antes de publicar los cambios.

Ajustes básicos

Esta sección no incluye controles visuales de sección. En su lugar, se crea con bloques para que el CSS, JavaScript e inclusiones de recursos externos puedan mantenerse separados y sean más fáciles de gestionar. Para obtener una visión general más amplia de la estructura del editor de temas, consulte documentación de Shopify sobre secciones y bloques

El texto de ayuda de la sección incluye la referencia canónica de Código personalizado. En la práctica, esta sección funciona mejor cuando necesita un comportamiento personalizado a nivel de plantilla en lugar de cambios más amplios en todo el sitio.

Tipos de bloque admitidos

1. Recurso personalizado
2. CSS personalizado
3. JavaScript personalizado

Referencia de bloque

Recurso personalizado

Use este bloque cuando necesite pegar una inclusión completa de recurso, como un enlace a una hoja de estilos o una etiqueta de script externa. Es la opción adecuada para servicios de terceros que proporcionan una incrustación completa o un fragmento de recurso en lugar de solo CSS o JavaScript sin procesar. Para la referencia del bloque, consulte bloque de recurso personalizado.

1. Use un bloque por servicio o archivo para que las actualizaciones y la resolución de problemas sigan siendo sencillas.
2. Reserve este bloque para inclusiones completas de recursos en lugar de reglas CSS independientes o código JavaScript.

Ajustes del editor

Puede establecer un título del editor para el bloque para facilitar su identificación en la barra lateral. Esto es especialmente útil cuando añade varios servicios o archivos a la misma sección.

CSS personalizado

Use este bloque para añadir reglas CSS directamente a la plantilla sin envolverlas en etiquetas style. Es útil para anulaciones visuales pequeñas y específicas que solo deben aplicarse en este contexto de plantilla. Para la referencia del bloque, consulte bloque de CSS personalizado.

Consejo

Mantenga los selectores bien acotados para que el CSS afecte solo al área prevista y sea más fácil de mantener después de futuras actualizaciones del tema.

1. Pegue solo reglas CSS.
2. Prefiera este bloque para anulaciones concretas en lugar de hojas de estilo personalizadas de gran tamaño.

Ajustes del editor

Puede cambiar el nombre del bloque en el editor para reflejar su propósito, como una corrección de espaciado o un ajuste de la página de destino. Los títulos claros facilitan mucho la limpieza posterior.

JavaScript personalizado

Use este bloque para añadir JavaScript directamente a la plantilla sin etiquetas de script. Funciona bien para widgets incrustados, inicialización de servicios o pequeños comportamientos interactivos vinculados a la plantilla actual. Para la referencia del bloque, consulte bloque de JavaScript personalizado.

Precaución

Un error de JavaScript puede interrumpir otras funciones de la página. Si algo deja de funcionar después de un cambio, desactive primero el bloque de script más reciente y vuelva a probar.

1. Pegue solo JavaScript.
2. Separe los scripts no relacionados en bloques distintos para que cada cambio sea más fácil de revisar o eliminar.

Ajustes del editor

Use el título del editor para etiquetar el script por servicio o propósito. Esto no cambia la tienda online, pero facilita mucho el mantenimiento continuo.

Ajustes estándar de sección

Esta sección no incluye ajustes compartidos de diseño, espaciado, fondo, visibilidad o ancho. Su comportamiento depende por completo de los bloques que añada y del código colocado dentro de ellos.

Notas de uso

1. Haga coincidir el bloque con la tarea. Use CSS personalizado para reglas de estilo, JavaScript personalizado para la lógica del script y Recurso personalizado cuando necesite pegar una inclusión externa completa.
2. Mantenga los cambios modulares. Separe las personalizaciones no relacionadas en bloques distintos para poder aislar los problemas rápidamente y eliminar un cambio sin afectar a los demás.
3. Asigne nombres claros a los bloques. Use títulos descriptivos del editor para que los fragmentos repetidos sigan siendo fáciles de identificar más adelante.
4. Espere que el contenido del bloque determine el resultado. Añadir bloques puede reemplazar contenido simple a nivel de sección o ampliarlo con incrustaciones y comportamientos adicionales, así que revise la plantilla final después de cada cambio.
5. Pruebe los recorridos clave. Compruebe las acciones importantes de la página, los diseños adaptativos y los servicios incrustados después de cada cambio de código.
6. Limite el código específico de la plantilla. Añada solo lo que necesite esta plantilla para reducir conflictos, la carga de mantenimiento y el peso innecesario de la página.