As a Catalog admin, you can use the Storefront Theme Editor to customize storefront brand colors, logos, and header images without the need for custom JavaScript (JS), Cascading Style Sheets (CSS), or HyperText Markup Language (HTML).
The Storefront Theme Editor must be enabled in your institution's account by the root Catalog admin. If it is not available, you can customize the catalog using CSS, JS, or HTML.
Notes:
- Learn more about customizing email branding using HTML, and creating custom email templates.
- For details and specifications for adding logos and header images, please view the Canvas Catalog Logo Guidelines.
- If custom branding is not added in a subcatalog, it inherits the parent catalog branding, settings, and other customization options.
Open Admin
Click the User Name drop-down menu [1]. Then, click the Admin link [2].
Open Catalog
Click the Catalogs tab [1].
Then, click the catalog name link [2].
Open Customizations
Click the Customizations tab.
Copy Default Theme
With the Storefront Theme Editor enabled, click the Copy Default Theme button [1].
Alternatively, on the default theme tile, you can click the Make a Copy button [2].
Open Editor
In the copy tile, click the Edit Theme button.
Open General Editor
To make general customizations to the storefront, click the General link.
Select Images
To select an image for the header and footer, click the Header image tile [1].
To select a logo image for the listing tiles, descriptions, email notifications, enrollment forms and on the student dashboard, click the Logo tile [2].
To select an image for browser tabs and bookmarks, click the Favicon tile [3].
Select Colors
To select a primary theme color, enter a hex value in the Primary Color field [1].
To select a filter pill color, enter a hex value in the Filter Pill Color field [2].
To use the color selector, click a Color icon [3].
In the color selection window, select a color using the color mixer or color presets [4]. To save your selections, click the Apply button [5].
View Accessibility Details
As you select the primary theme color, the color selection window displays accessibility details.
As you select or edit the primary color, the Contrast Ratio section automatically updates the current contrast ratio [1]. The minimum ratio required for accessibility is 4.5:1.
Labels display for normal, large, and graphics text based on the selected background and foreground colors. Text that does not meet the minimum contrast requirements displays a Fail label [2]. Text that meets minimum contrast requirements displays a Pass label [3].
Open Header & Footer Editor
To customize the catalog header and footer, click the Header & Footer link.
Customize Header & Footer
By default, the header displays on a white background. To display the header on a dark background, click the Inverse radio button [1].
By default, the header is the same width as the content below it. To extend the width of the header to fill the full window, click the Full Width radio button [2].
By default, there is no cover image on the storefront. To add an image, click the Cover Image toggle on [3]. Then, to select an image from your computer files, click the Upload Image tile [4].
When the header displays at full width, a background color displays behind the image. To select a background color, enter a hex value in the Background Color field [5].
By default, the separator lines above and below the listings pane are set to thin. To select wider separator lines, click the Extended radio button [6].
To select a color for the separators, enter a hex value in the Separator Color field [7].
To use the color selector to choose colors for the background or separators, click a Color icon [8]. Then, chose a color from the color selector window and click the Apply button [9].
Edit Name
To enter a new name for the theme, click the Edit icon .
Preview and Save
The preview window displays.
To view other customization options, click the Back button [1].
To close the editing window without saving your changes, click the Close Theme Editor button [2].
To save your changes, click the Save button [3].
Enable Theme in Storefront
To enable the customized theme in the storefront, click the Apply Theme icon.
Delete Theme
To delete a theme, click the Delete icon [1].
A theme that is applied can not be deleted. To apply a different theme, click the Apply icon [2], then delete the theme.
Note: A theme can only be deleted by the user who created it.
