nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Child Item

Introducing Custom JavaScript & CSS for the Modern Storefront in Canvas Catalog

Máté Kiss

We’re excited to share that beginning May 4, admins can add custom JavaScript (JS) and CSS directly within the Modern Storefront.

We’ve heard from many of you that customization is essential to how you engage learners and represent your brand. With this update, admins have greater flexibility to create fully branded, dynamic storefront experiences tailored to their specific needs, without relying on the Legacy Storefront.

What’s New

This release introduces:

Custom JS and CSS support – Add and manage custom scripts and styling directly within the Modern Storefront.
Custom script activation – Enable custom script usage with the new “Load custom scripts on modern storefront” setting at the parent catalog level.
Updated ‘Branding’ tab – Manage custom JavaScript and CSS from the updated Branding page in the root account (formerly Email Branding).

By adding support for existing custom JS and CSS use cases in the Modern Storefront, this update gives admins greater control over branding and functionality, and enables them to make a smooth transition away from the Legacy Storefront.

Why We Built This Update

Until now, moving to the Modern Storefront meant giving up the ability to use custom scripts and styling. This created a tough choice between modernization and flexibility.

We built this update to remove that barrier.

With this update, you can take advantage of the Modern Storefront’s improved design and performance while continuing to deliver the tailored, high-impact experiences your learners expect. This also supports our long-term plan to transition away from the Legacy Storefront so we can continue investing in a more modern, flexible experience for all Catalog customers.

Key Benefits

Bring Your Brand to Life
Create a storefront experience that reflects your institution’s identity with full control over styling and functionality.

Move Forward with Confidence
Reduce reliance on legacy tools and transition to the Modern Storefront without losing the customization your team depends on.

Customize with Flexibility
Easily manage when and how scripts are applied to meet your specific needs.

Create More Engaging Experiences
Deliver a more dynamic, interactive storefront to help drive learner engagement and enrollment.

How to Enable Custom JS and CSS

Getting started is simple:

From the Admin view, navigate to the Catalogs page and click on your Root Account:

2. On that Root Account page, open the sub-menu next to the Catalog Info tab, and select the Customizations tab, which defaults to the Branding page:

3. On the Branding page, add your custom CSS and custom JS in the respective sections:

4. Set the option ‘Load custom CSS and custom JS on Storefront’ to Yes:

5. Save to publish your changes.

Your customizations will be reflected in your Modern Storefront experience.

What’s Next

This release is a major step forward for Canvas Catalog. With customization coming to the Modern Storefront, more institutions will be able to confidently transition away from the Legacy Storefront experience as we prepare to sunset it in 2027.

We will continue investing in enhancements that expand flexibility, improve performance, and make it easier to deliver engaging storefront experiences.

Custom JavaScript and CSS support in the Modern Storefront is available since May 4. For more information, check out the Release Notes.

Release Notes

Find more posts tagged with

Canvas Catalog

Comments

hechla

This might not be the right place for this comment, but we have a little bit of custom js and css in our Catalog. I've take a look at the modern storefront and tried to start replicating some things I thought were still important but I'm not having any success. So, if anyone starts to figure out how to replicate some of the customization they've done in the legacy storefront in the modern storefront, please share.

The "little" things we've done that I think help our customers/students/participants is to add a couple of links to the header-menu in the legacy storefront. One link we added was a link to our main website. Another was a quick link into the Student Dashboard. The Modern Storefront appears to use dynamically generated classes where the Legacy Storefront uses obvious naming. For example, what I mentioned above is id="header-menu" (ok… it's an ID and not a class but obviously named) in the Legacy Storefront while it's class="css-1c07zj-view" (I think) in the Modern Storefront.

For visual: we have this in the legacy storefront:

And this in the modern storefront:

I have other "small" stuff (I think it's small stuff… not critical to have but nice to have) that we'd like to keep in the Modern Storefront.

Máté Kiss

Hello @hechla, Thanks for calling this out. What you’re describing makes total sense. These kinds of “small” customizations can actually have a big impact on the learner experience, and adding quick access links like the institution homepage or Student Dashboard is a great example.

You’re also right about the difference between Legacy and Modern Storefront. In Legacy, things were much easier to work with because of stable selectors like #header-menu. With the Modern Storefront using generated classes, I can see how this becomes frustrating when trying to recreate those same tweaks. Part of the shift in the Modern Storefront comes down to responsiveness and space constraints, especially on smaller screens where the header has to be more compact than before. That said, the need for stable hooks or selectors for lightweight customization is completely valid.

We’ve started exploring ways to better support this without requiring workarounds based on generated class names. One idea we’re discussing is introducing more stable, semantic selectors for key areas like the header and user navigation so these changes are easier and safer to maintain over time. Really appreciate you sharing the examples and context here. This kind of feedback is very helpful in highlighting the practical gaps that come up during migration and day-to-day use.

Child Item