Release notes outline upcoming customer-impacting changes that are expected to be displayed in production environments. Please note that features considered for future development are not included in the notes.
Canvas Catalog is an all-in-one learning solution that integrates with the Canvas LMS as a course registration system, payment gateway, and learning platform. Learn more about Canvas Catalog.
Unless otherwise stated, all features in this release are available in the Beta environment on 2026-08-04 and the Production environment on 2026-08-10.
New Features
Customization Attributes for Modern Storefront [Added 2026-08-07]
Affects User Interface | No |
|---|
Affected Areas | Header, footer, homepage, listing details page, and modals in Modern Storefront |
Summary
Modern Storefront includes stable data-customizationid attributes on key page elements across the header, footer, homepage, listing details page, and modals.
- Administrators use these attributes as CSS and JavaScript selectors.
- Replaces dynamically generated class names that change between releases and break custom code.
Change Benefit
- Stable Customization Selectors: Provides catalog admins migrating from Legacy Storefront an equivalent way to target Modern Storefront elements for lightweight customizations.
- Resilient Code Execution: Prevents custom CSS and JavaScript built on these selectors from breaking when internal styling updates occur.
Feature Workflow
Target elements using the data-customizationid attribute selector (e.g., [data-customizationid="footer-linklist"]) within custom CSS or JavaScript. Then, select from available attributes across storefront areas:
Header
- header - header section
- linked-headerimage - link to the homepage, containing the header image set in the theme editor (also shown in the footer)
- login-link - link to the login page
- user-menu - button that opens the user menu popover
- user-menu-popover - popover containing the user menu
- cart-button - button that opens the cart tray
- cart-tray - tray containing the cart items
- admin-navigation - navigation on admin pages
- cover-image-section - section for the cover image set in the theme editor
Footer
- footer - footer section
- footer-linklist - list of links in the footer
- footer-copyright - copyright text
- footer-content - custom content set in the theme editor
Homepage
- search-form - form with search input and submit button
- filter-button - button that opens the filter modal
- product-card - listing card
- product-card-image - listing image on the card
- product-card-type - "Course" or "Program" label on the card (programs also show the number of courses)
- product-card-title - title of the listing
- product-card-certificate - certificate icon
- product-card-price - price of the listing
- product-card-teaser - teaser text of the listing
- product-card-instructor - instructor name on the listing card
- product-card-catalog-logo - catalog logo on the listing card
- product-card-enrollment-period - enrollment period on the listing card
- product-card-credits - credits on the listing card
Listing details page
- product-details-type - "Course" or "Program" label
- product-details-price - price of the listing
- product-info-item-list - enrollment period, certificate, credits, badges
- product-details-status-pill-list - "In your cart", "Enrolled" pills
- product-details-image - listing image on the details page
- enroll-button - "Enroll" button
- add-to-waitlist-button - "Add to Wait List" button
- remove-from-waitlist-button - "Remove from Wait List" button
- add-remove-cart-button - "Add to Cart" or "Remove from Cart" button
- product-details-catalog-logo - catalog logo under the Course Details tab
- product-details-description - listing description under the Course Details tab
- pathway-iframe - iframe containing the Pathway from Parchment Digital Badges, under the Pathways tab
General
- modal - present in every modal
Example, hiding the catalog logo on listing cards with custom CSS:
[data-customizationid="product-card-catalog-logo"] {
display: none;
}
Example, adding a link to the footer link list with custom JavaScript. Because this list can render differently for mobile and desktop, use a MutationObserver so the script also runs if the element re-renders after the page loads:
(function () {
var MARKER = 'data-sample-link';
function addSampleLink(list) {
if (list.querySelector('[' + MARKER + ']')) return;
var firstItem = list.firstElementChild;
if (!firstItem) return;
var newItem = firstItem.cloneNode(true);
newItem.setAttribute(MARKER, 'true');
var link = newItem.querySelector('a');
link.href = 'https://example.com';
var textSpan = link.querySelector('span span:first-child');
textSpan.textContent = 'Sample Link';
list.insertBefore(newItem, firstItem);
}
function checkAndInject() {
var list = document.querySelector('[data-customizationid="footer-linklist"]');
if (list) addSampleLink(list);
}
checkAndInject();
var observer = new MutationObserver(checkAndInject);
observer.observe(document.body, { childList: true, subtree: true });
})();
💡 Related feature idea(s): Modern Storefront custom CSS/JS targeting
Updated Features
Hint Field for User Defined Fields
Subaccount Configuration | Yes |
|---|
Permissions | Catalog - manage |
Affects User Interface | Yes |
Affected Areas | User Defined Fields admin screen, registration page, cart-based enrollment |
Summary
Administrators can add an optional plain-text Hint field when configuring User Defined Fields (UDFs).
- Hint text appears below the field on registration and enrollment forms in normal font weight, visually distinct from the bold field label.
- Hint fields accept up to 1,000 characters of plain text without rich formatting or links.
- UDFs without a Hint retain standard default rendering.
Change Benefit
- Direct Form Guidance: Provides plain-language instructions or context directly below form fields without relying on the field label.
- Improved Screen Reader Accessibility: Links hint text programmatically to the field so screen readers announce guidance upon receiving focus.
Feature Workflow
When creating or editing a user defined field, admins can enter plain text in the Hint field [1] alongside Key, Label, and HTML Input Type configurations. Click the Save button [2].
On the registration page or cart-based enrollment process, learners view the normal-weight Hint text below the form field label.
New Alt Text Fields for Cover Image, Header Image, and Logo
Subaccount Configuration | Yes |
|---|
Permissions | Catalog - manage |
Affects User Interface | Yes |
Affected Areas | Theme Editor, storefront homepage (listing cards), listing pages, storefront header and footer, Student Dashboard, registration page, email notifications |
Summary
The Theme Editor includes three fields for accessibility descriptions: Header Image Alt Text, Logo Alt Text, and Cover Image Alt Text.
- Administrators input custom descriptions up to 1,000 characters per image field for screen reader compatibility.
- Leaving Header Image Alt Text or Logo Alt Text blank defaults to the catalog name, supported by explanatory hint text below each input field.
- Leaving Cover Image Alt Text blank results in no assigned image description.
Change Benefit
- Improved Screen Reader Accuracy: Provides screen reader users with precise image descriptions for an institution's cover image, header image, and logo rather than defaulting solely to the account name.
- Clearer Contextual Navigation: Delivers students and prospective students better clarity when navigating storefronts, listings, and dashboards.
Feature Workflow
When editing a theme, administrators can enter descriptive text (up to 1,000 characters) into the following fields:
- Header Image Alt Text [1]
- Logo Alt Text [2]
- Cover Image Alt Text [3]
Click the Save button [4].
Screen readers automatically announce configured alternative (alt) text across the following areas:
- Storefront homepage, header, and footer
- Listing pages
- Student Dashboard
- Registration page
- Email notifications
Note: Fields remain saved even if replacing or removing the associated image.
Additional Measurement Units in Catalog Settings
Subaccount Configuration | Yes |
|---|
Permissions | Catalog - manage |
Affects User Interface | Yes |
Affected Areas | Catalog Info page (Measurement setting), listing cards, listing details page, program summaries, Student Dashboard, certificates of completion, transcripts, CSV exports from the Listings and Orders pages |
Summary
The Measurement setting in Catalog Info includes three additional options: Professional Development Hours (shown as PDH), Learning Hour, and Training Hour.
- These choices join credits, points, Continuing Education Units (CEU), and Hours.
- Catalog or subcatalog levels configure the measurement type, applying it to every listing within that scope.
- Subcatalogs retain the ability to set unique measurement options to override parent settings.
Change Benefit
- Accurate Program Terminology: Allows continuing education, professional development, and alternative credential programs to select measurement units matching institutional and accrediting body standards.
- Eliminated Label Approximations: Removes the necessity to approximate custom credit hours using generic labels.
Feature Workflow
In the Catalogs admin page, locate the Catalog Info page. Click the Measurement drop-down menu and select the preferred measurement unit. Save the changes.
Learners see the selected unit and its value on listing cards, the listing details page, program summaries, their Student Dashboard, certificates of completion, and transcripts.
Note: The selected unit applies to every listing in that catalog or subcatalog unless a subcatalog sets its own override.
Change Log
Date | Description |
|---|
2026-08-07 | Update - Customization Attributes for Modern Storefront
|
