Ir al contenido

Código personalizado

Amplía tu tema Align de Shopify con Custom Liquid, CSS, aplicaciones o ediciones de código.

Align incluye ajustes de tema integrados para muchos cambios habituales. Cuando esos ajustes no cubren tus necesidades, puedes ampliar tu tema Align con HTML o Liquid personalizados, CSS personalizado, una aplicación o ediciones directas del código.

Empieza con el editor de temas de Shopify para conocer los ajustes disponibles en tu tema Align actual. Para obtener orientación sobre la plataforma, consulta la documentación de Shopify sobre el editor de temas

Algunos temas incluyen ajustes para añadir HTML o Liquid dentro de una plantilla, sección o bloque. Estos ajustes pueden permitirte añadir contenido personalizado compatible sin editar directamente el código del tema, lo que ayuda a mantener la elegibilidad de tu tema para recibir actualizaciones.

Consulta la documentación de Align antes de continuar para confirmar si tu tema incluye una opción de HTML o Liquid personalizados. Puedes usar una sección Custom Liquid para:

  1. Insertar variables de Liquid donde sean útiles para tu negocio, como mostrar tu política de envíos en una página de producto.
  2. Añadir el código necesario para integrar una aplicación con tu tema.

Los ajustes de Liquid proporcionan acceso a un conjunto limitado de objetos y etiquetas de Liquid. Consulta la documentación sobre los ajustes de Liquid para ver las opciones compatibles.

El CSS controla cómo aparecen los elementos en tu tema. Usa la función de CSS personalizado de Shopify cuando necesites cambios de estilo que vayan más allá de los ajustes disponibles de Align.

Puedes aplicar CSS personalizado en todo el tema o a una sección específica dentro de una plantilla. Este trabajo requiere familiaridad con CSS y HTML. Antes de realizar cambios, revisa la documentación y los recursos de asistencia de Align de Company XYZ en Asistencia de Company XYZ, así como la orientación de Shopify sobre la asistencia disponible para temas

Las aplicaciones pueden integrarse con tu tema Align de varias formas:

  1. App blocks

    Añade la funcionalidad de la aplicación donde la necesites y, después, personalízala o elimínala en el editor de temas. Los App blocks solo están disponibles con temas de Online Store 2.0; para los temas antiguos, consulta la ficha de la aplicación y su documentación para comprobar la compatibilidad.

  2. App embeds

    Activa, desactiva y personaliza las superposiciones, los elementos flotantes u otras funciones en segundo plano proporcionados por la aplicación mediante el editor de temas.

  3. Aplicaciones añadidas al código del tema

    Algunas aplicaciones añaden código directamente al tema. Según la aplicación, es posible que puedas gestionarlo mediante los ajustes de la aplicación o el editor de temas. Si tu tema incluye una sección Custom Liquid, es posible que puedas añadir allí el código de la aplicación en lugar de editar directamente el código del tema.

Cuando publiques un tema diferente, vuelve a activar tus aplicaciones en el tema nuevo. No están activas de forma predeterminada.

Las ediciones directas del código permiten realizar cambios detallados cuando el editor de temas, el CSS personalizado, Custom Liquid y las aplicaciones no pueden cubrir tus necesidades.

Para conocer las consideraciones y medidas de protección relacionadas con la edición, consulta la documentación de Shopify sobre la edición del tema con código

Edita el código del tema únicamente si te sientes cómodo trabajando con HTML y CSS y tienes conocimientos básicos de Liquid. Para obtener orientación específica sobre Align, empieza por Asistencia de Company XYZ. El servicio de asistencia de Shopify puede ayudar con ciertas personalizaciones de código para los temas gratuitos aptos propiedad de Shopify; consulta la guía de Shopify sobre la asistencia para temas para conocer la política de la plataforma.

Puedes editar el código del tema de dos formas:

  1. Edita el código directamente en el panel de administración de Shopify
  2. Trabaja localmente con herramientas de desarrollo como Shopify CLI y la integración de Shopify con GitHub
  1. Empieza con los ajustes del tema. Usa las opciones integradas de Align antes de recurrir al código personalizado o a una aplicación.
  2. Usa Custom Liquid con cuidado. Confirma que los objetos y las etiquetas de Liquid necesarios sean compatibles antes de añadir contenido.
  3. Comprueba la compatibilidad de las aplicaciones. Revisa la documentación de la aplicación, especialmente cuando uses un tema antiguo.
  4. Planifica los cambios del tema. Vuelve a activar las aplicaciones después de publicar un tema nuevo.
  5. Protege la elegibilidad para recibir actualizaciones. Usa ediciones directas del código únicamente cuando las demás opciones de personalización no permitan obtener el resultado necesario.