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

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

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].

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

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.