Cómo funciona
Alva Courses aplica el estilo del reproductor en dos niveles. Los ajustes de toda la tienda, en Configuración → Apariencia, afectan a todos los cursos. La pestaña Configuración → Apariencia de cada curso decide si sigue esos ajustes o usa su propio color y fuente. Los cambios guardados llegan a los alumnos la próxima vez que carguen o actualicen la página de un curso.
| Ajuste | Toda la tienda | Por curso |
|---|---|---|
| Color de acento | Color predeterminado | Colores de marca, Personalización avanzada de colores |
| Fuente | Fuente predeterminada | Default Font |
| Menú móvil | Estilo del menú móvil | Ninguno |
| CSS personalizado | Estilos personalizados | Ninguno |
Cómo personalizar el reproductor de cursos
1. Define el color predeterminado
En tu administrador de Shopify, abre Alva Courses → Configuración → Apariencia. En Color predeterminado, escribe un valor hexadecimal o haz clic en Elegir color para escogerlo en la ventana Color Preview. Haz clic en Close y después en Guardar en la barra de guardado.
Un curso usa este color solo cuando Use global color está marcada en ese curso. Si no, conserva su propio color (paso 4).
2. Elige la fuente predeterminada
En Fuente predeterminada, elige una Familia de fuentes: Arial, Courier New, Georgia, Montserrat, Poppins, Times New Roman, Trebuchet MS o Verdana. Montserrat y Poppins se cargan desde Google Fonts; las demás dependen de las fuentes instaladas en el dispositivo del alumno.
La fuente se aplica a todos los cursos que no tienen una propia y a los cursos con Use global font marcada. Predeterminada del sistema no establece ninguna fuente para toda la tienda. Guarda.
3. Elige el estilo del menú móvil
En Estilo del menú móvil, elige cómo abren los alumnos la lista de lecciones en pantallas de menos de 1.024 píxeles. La Vista previa del storefront de abajo muestra tu elección.
- Hamburguesa (Predeterminado): un botón cuadrado del color de acento que desliza la lista de lecciones.
- Píldora (Color de acento): un botón redondeado Menú del curso del color de acento, fijo en la parte superior mientras el alumno se desplaza.
- Encabezado de migas de pan: una barra a todo el ancho con la sección y la lección actuales, que despliega la lista de lecciones debajo. También queda fija arriba.
- Flotante abajo a la derecha: un botón Menú del curso fijo en la esquina inferior derecha, donde puede chocar con los widgets de chat.
Guarda. Para cambiar el texto de Menú del curso, usa los textos de la tienda.
4. Dale a un curso su propio color y fuente
Abre el curso y ve a Configuración → Apariencia. En Colores de marca, desmarca Use global color y elige un color. En Default Font, desmarca Use global font y elige una Font Family. Use global font aparece en gris hasta que definas una fuente para toda la tienda.
Para un control más fino, haz clic en Activar en Personalización avanzada de colores. Se abre un editor de color donde defines por separado los colores de la barra lateral, el contenido, los botones, la barra de progreso, los campos y los bordes; Edit Colors lo vuelve a abrir más adelante. Activar no está disponible mientras Use global color esté marcada. Guarda el curso.
Añadir CSS personalizado
El CSS personalizado cambia el aspecto de todo lo que los ajustes anteriores no cubren. En Configuración → Apariencia, escribe las reglas en el cuadro CSS personalizado, dentro de Estilos personalizados, y guarda. Alva Courses las añade a la lista de cursos y a todas las páginas de curso, donde prevalecen sobre los ajustes de color y fuente.
Alva Courses no delimita tu CSS. Lo añade a la página de la tienda exactamente como lo escribes, así que un selector sin más, como h2, también cambia el aspecto de tu tema. Empieza cada selector con #alva-courses, la raíz del reproductor, o con un ID del reproductor como #alva-course-sidebar.
Un aviso de Advertencias de alcance de selectores enumera hasta cinco selectores sin delimitar, y el cuadro señala el CSS que no se puede interpretar. Ambos son solo avisos: el CSS se guarda tal como lo escribes y el cuadro no tiene límite de longitud.
Termina cada declaración con !important, ya que el reproductor define así muchos de sus propios estilos. El enlace Guía de selectores CSS bajo el cuadro enumera los ID y las clases que puedes usar. Dos ejemplos seguros:
#alva-courses .lesson-content p { line-height: 1.7 !important; }amplía el interlineado de los párrafos de las lecciones.#alva-course-sidebar h2 { font-size: 22px !important; }cambia el tamaño del título del curso en la parte superior de la barra lateral.
Para una fuente que no esté en la lista de Familia de fuentes, pon una línea @import de Google Fonts al principio del todo, o una regla @font-face con una URL absoluta de la fuente (Liquid no funciona aquí). Después nombra la fuente en una regla delimitada.
Qué ven los alumnos
Los alumnos ven tu color de acento en la lección seleccionada, las marcas de finalización, la barra de progreso, los enlaces de las lecciones, el botón Completar y continuar y el menú móvil. Tu fuente aparece en el título del curso, los títulos de las lecciones y el texto de las lecciones.
Preguntas frecuentes
¿Por qué mi Color predeterminado no cambió un curso?
Un curso sigue el Color predeterminado solo cuando Use global color está marcada en la pestaña Apariencia del curso. Si no, conserva su propio color. Marca la casilla, guarda el curso y vuelve a cargar la página del curso.
¿Puedo añadir CSS personalizado solo a un curso?
No. Estilos personalizados es un único ajuste para toda la tienda que Alva Courses añade a la lista de cursos y a todas las páginas de curso. Para que un curso se vea distinto, dale su propio color y fuente en su pestaña Apariencia.
¿Mi CSS personalizado cambiará el resto de mi tema?
Puede hacerlo. Alva Courses añade tu CSS a la página de la tienda tal como está escrito, así que un selector sin más, como h2, también cambia los encabezados de tu tema. Empieza cada selector con #alva-courses para mantenerlo dentro del reproductor de cursos.
¿Cuándo ven los alumnos mis cambios?
En su próxima carga de página. Alva Courses lee tus ajustes de apariencia cada vez que se carga el reproductor de cursos, así que no hay nada que publicar. Una página que ya estaba abierta conserva el aspecto anterior hasta que se actualiza.
Ver también
¿Te ha resultado útil?
Última actualización 2026-10-09