How it works
Alva Courses styles the course player at two levels. Store-wide settings in Settings → Appearance cover every course. Each course's own Settings → Appearance tab decides whether it follows them or uses its own colour and font. Saved changes reach students the next time they load or refresh a course page.
| Setting | Store-wide | Per course |
|---|---|---|
| Accent colour | Default Color | Brand Colors, Advanced Color Customization |
| Font | Default Font | Default Font |
| Mobile menu | Mobile Menu Style | None |
| Custom CSS | Custom Styles | None |
How to brand the course player
1. Set the default colour
In your Shopify admin, open Alva Courses → Settings → Appearance. Under Default Color, type a hex value or click Choose color to pick one in the Color Preview window. Click Close, then Save in the save bar.
A course uses this colour only when Use global color is ticked on that course. Otherwise it keeps its own colour (step 4).
2. Choose the default font
Under Default Font, pick a Font Family: Arial, Courier New, Georgia, Montserrat, Poppins, Times New Roman, Trebuchet MS or Verdana. Montserrat and Poppins load from Google Fonts; the others rely on fonts installed on the student's device.
The font applies to every course without a font of its own, and to courses with Use global font ticked. System Default sets no store-wide font. Save.
3. Pick the mobile menu style
Under Mobile Menu Style, choose how students open the lesson list on screens narrower than 1,024 pixels. The Storefront Preview below shows your choice.
- Hamburger (Default): a square button in your accent colour that slides the lesson list in.
- Pill (Accent color): a rounded Course menu button in your accent colour, pinned to the top as students scroll.
- Breadcrumb Header: a full-width bar naming the current section and lesson, which drops the lesson list down beneath it. Also pinned to the top.
- Floating Bottom Right: a Course menu button fixed in the bottom-right corner, where it can clash with chat widgets.
Save. To reword Course menu, use storefront text.
4. Give one course its own colour and font
Open the course and go to Settings → Appearance. Under Brand Colors, untick Use global color and pick a colour. Under Default Font, untick Use global font and choose a Font Family. Use global font is greyed out until you set a store-wide font.
For finer control, click Enable under Advanced Color Customization. A colour editor opens where you set separate sidebar, content, button, progress bar, input and border colours; Edit Colors reopens it later. Enable is unavailable while Use global color is ticked. Save the course.
Add custom CSS
Custom CSS restyles anything the settings above don't cover. In Settings → Appearance, type rules into the Custom CSS box under Custom Styles and save. Alva Courses adds them to the course list and every course page, where they override the colour and font settings.
Alva Courses doesn't scope your CSS. It adds it to the storefront page exactly as typed, so a bare selector such as h2 also restyles your theme. Start every selector with #alva-courses, the player's root, or a player ID such as #alva-course-sidebar.
A Selector scope warnings banner lists up to five unscoped selectors, and the box flags CSS that can't be parsed. Both are warnings only: the CSS saves as typed, and the box has no length limit.
End each declaration with !important, as the player sets many of its own styles that way. The CSS Selector Guide link under the box lists the IDs and classes you can target. Two safe examples:
#alva-courses .lesson-content p { line-height: 1.7 !important; }loosens the line spacing of lesson paragraphs.#alva-course-sidebar h2 { font-size: 22px !important; }resizes the course title at the top of the sidebar.
For a font outside the Font Family list, put a Google Fonts @import line at the very top, or an @font-face rule with an absolute font URL (Liquid doesn't work here). Then name the font in a scoped rule.
What learners see
Learners see your accent colour on the selected lesson, completion ticks, the progress bar, lesson links, the Complete and Continue button and the mobile menu. Your font shows on the course title, lesson titles and lesson text.
Common questions
Why didn't my Default Color change a course?
A course follows the Default Color only when Use global color is ticked on the course's Appearance tab. Otherwise it keeps its own colour. Tick the box, save the course and reload the course page.
Can I add custom CSS to just one course?
No. Custom Styles is one store-wide setting that Alva Courses adds to the course list and every course page. To make one course look different, give it its own colour and font on its Appearance tab.
Will my custom CSS change the rest of my theme?
It can. Alva Courses adds your CSS to the storefront page as typed, so a bare selector such as h2 also restyles your theme's headings. Start every selector with #alva-courses to keep it inside the course player.
When do students see my changes?
On their next page load. Alva Courses reads your appearance settings each time the course player loads, so there is nothing to publish. A page that was already open keeps the old look until it is refreshed.
See also
Was this helpful?
Last updated 2026-10-09