Supplements Demo: Included Pages & How to Customize It
Canvas ships with a dedicated Supplements niche demo built for protein, nutrition, and wellness brands that want a clean storefront without a custom build. The demo includes a single responsive product listing page tailored for an online supplements store, ready to be wired up to your preferred cart or catalog backend. The visual personality is grounded in the Bootstrap success green (var(--bs-success)), giving the design an energetic, health-forward feel that pairs well with product photography of tubs, shakers, and capsules.
Layout choices support a modern shopping experience: a stretched layout for full-bleed imagery of workout and lifestyle shots, a search overlay for quick product and category lookups, a medium-sized header for visible navigation and cart access, and a dark base palette that makes bright accent colors and bold product labels pop. Typography follows the Canvas theme defaults so headings stay confident and body text remains easy to read across product descriptions, ingredient lists, and blog posts.
What's included
| Page | Description |
|---|---|
demo-supplements.html |
A supplements storefront page showcasing protein powders, pre-workouts, vitamins, and nutrition accessories with product grids, search, and category navigation. |
The demo's own styles live in demos/supplements/supplements.css. Shared framework styles come from style.css and css/font-icons.css.
The full editing guide is in the dashboard
Step-by-step customization, the complete settings reference, and copy-paste code are available to registered Canvas users. Creating an account is free.
Required files
CSS: demos/supplements/supplements.css