Canvas Guides (English)CatalogCatalog GuideAdmins - CatalogHow do I customize a catalog or subcatalog using the Storefront Theme Editor?

How do I customize a catalog or subcatalog using the Storefront Theme Editor?

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:

Open Admin

Open Admin

Click the User Name drop-down menu [1]. Then, click the Admin link [2].

Open Catalog

Open Catalog

Click the Catalogs tab [1].

Then, click the catalog name link [2].

Open Customizations

Open Customizations

Click the Customizations tab.

Copy Default Theme

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

Open Editor

In the copy tile, click the Edit Theme button.

Open General Editor

Open General Editor

To make general customizations to the storefront, click the General link.

Select Images

Select Images a

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

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

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

Edit Name

To enter a new name for the theme, click the Edit icon .

Preview and Save

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

Enable Theme in Storefront

To enable the customized theme in the storefront, click the Apply Theme icon.

Delete Theme

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.