CSS personalizado

Enlaces destacados

1. Shopify CDN
2. Documentación de Shopify sobre cómo añadir CSS personalizado a tu tema
3. Temas del administrador de Shopify
4. Documentación de Shopify sobre el soporte de temas
5. Documentación para desarrolladores de Shopify sobre las etiquetas de esquema de sección
6. Documentación de Shopify sobre el rendimiento web
7. Documentación para desarrolladores de Shopify sobre fuentes personalizadas
8. Documentación de Shopify sobre recursos de soporte adicionales
9. Documentación de Shopify sobre CSS personalizado
10. Documentación de Shopify sobre plantillas

Videos útiles

Vídeo de Shopify Academy: Personalizar tu tienda

Vídeo de Shopify Academy: Personalizar tu tienda

Añadir CSS personalizado

El CSS personalizado te permite realizar cambios de estilo en tu tema Align cuando sus ajustes integrados no ofrecen el resultado que necesitas. Úsalo con cuidado y prueba los cambios antes de publicarlos en tu tienda activa.

Aplicar CSS en todo el tema Align

Usa CSS a nivel de tema para los cambios que deban aparecer en toda la tienda, como el estilo de los botones.

1. En el administrador de Shopify, ve a Online Store > Themes
2. Busca Align y haz clic en Customize.
3. Haz clic en Theme settings.
4. Haz clic en Custom CSS.
5. Añade tu código.
6. Haz clic en Save.

El CSS a nivel de tema se aplica a todas las páginas de la tienda excepto Checkout y está limitado a 1.500 caracteres.

Aplicar CSS a una sección

Usa CSS a nivel de sección cuando un cambio deba afectar únicamente a una sección, como su tamaño de fuente o color de fondo.

1. En el administrador de Shopify, ve a Online Store > Themes
2. Busca Align y haz clic en Customize.
3. Selecciona la sección a la que quieras aplicar estilos.
4. En la parte inferior del panel de propiedades de la sección, haz clic en Custom CSS.
5. Añade tu código.
6. Haz clic en Save.

El CSS a nivel de sección se limita a la sección seleccionada y está limitado a 500 caracteres.

Trabajar dentro de los límites del CSS personalizado

El CSS personalizado requiere familiaridad con CSS y HTML. Para obtener orientación específica sobre Align, empieza por el soporte de Company XYZ. Para consultar las limitaciones de la plataforma de Shopify y la información general sobre el soporte de temas, revisa el soporte de temas disponible

1. Usa reglas compatibles. @import, @charset y @namespace no son compatibles. En el CSS a nivel de sección, solo se permiten las reglas at-rule @media, @container, @layer y @supports.
2. Selecciona cuidadosamente el contenido de la sección. El CSS a nivel de sección no puede seleccionar el ID ni las clases del contenedor exterior de la sección. Una regla que comienza con la etiqueta del contenedor principal se trata como una regla descendiente dentro de esa sección. El contenedor suele ser un <div>, pero los temas pueden utilizar otros valores permitidos
3. Usa URL de recursos aprobadas. Las URL del CSS personalizado solo pueden utilizar el dominio https://cdn.shopify.com.
4. Ten en cuenta el rendimiento de las fuentes. Se permiten fuentes personalizadas, pero los navegadores las descargan antes de mostrar el texto. Prueba su efecto en el rendimiento de la tienda y revisa cómo usar fuentes personalizadas en tu tema
5. Vuelve a probar después de actualizar el tema. Los cambios en el marcado, los selectores o las clases del tema pueden hacer que el CSS personalizado existente deje de funcionar.

Si recibes un error que no puedes resolver, ponte en contacto con el soporte de Company XYZ para obtener orientación sobre Align y consulta los recursos de soporte adicionales de Shopify para obtener ayuda sobre la plataforma.

Notas de uso

1. Empieza por los ajustes integrados. Usa CSS personalizado solo cuando los controles disponibles del tema Align no ofrezcan el resultado que necesitas.
2. Mantén las reglas específicas. Usa CSS a nivel de tema para estilos compartidos y CSS a nivel de sección para ajustes locales.
3. Comprueba todos los tamaños de pantalla. Prueba los cambios en ordenadores y dispositivos móviles antes de publicarlos.
4. Guarda una copia de tus reglas. Conserva tu CSS en un lugar accesible para poder restaurarlo o actualizarlo después de una actualización del tema.