New in - Catalog Storefront Theme Editor is out on Beta!

[KataKeri]

Dear Catalog users,

I’m happy to announce that the first iteration of the long awaited in-house customization feature for Catalog has been released to beta yesterday.

With the Catalog Storefront Theme Editor admins are now able to customize/brand their Catalog storefront without using custom JS/CSS code.

We also expanded the list of features on the Subcatalog admins page with the Theme Editor - root admins are now able to give specific subcatalog admins permission to have access to the Theme Editor and apply the themes they have created. This is off by default for all subcatalog admins, so only root catalog admins can see the Theme Editor by default.

And so, to be able to see the Theme editor, root admins have to enable it for the catalog under ‘Catalog info’ (Enable the new Storefront). Once enabled, custom code cannot be applied anymore - but rest assured the code won’t be lost. If admins change their minds about the Theme Editor and want to switch back to using custom JS/CSS they just have to switch the toggle back off, and their previously created customizations will be present again. This also applies to the themes created - they will be saved, and you do not have to re-create them if they switch it back on.

With the switch turned on they will also be able to see the new design we applied to the main page of Catalog - we did some improvements e.g., the course/program cards, the course/program detail pages, and we also pumped up the filtering options on the main page to help students find relevant content faster.

However, I’d like to emphasize that this is only the first iteration. We’re aware that the feature set is limited as of now, but as we go ahead we will add more and more customization features, so this will be a long road. We’d like to enable schools to use the in-house solution, so they could save time, resources, and also this way we can make sure that we won’t break their JS/CSS customizations with our releases which affect the User Interface of Catalog.

In this iterations admins are able to:

• Add header image, favicon, logo, and cover image
• Set primary color, filter pill background color, header and footer color, background color and separator colors
• Set the width and height of separators and cover image

Production release is set to Mar 25, 2024. Given the size of this feature we’d like to ensure a longer beta testing phase to all institutions so they can properly check out the feature and provide feedback.

Please don’t hesitate to get back to us on what you think, and also, we’d like to hear you out on the features you need to be able to switch to using the Theme editor only and leave custom JS/CSS overall in the future. That way we can also prioritize the next iteration’s improvements.

You can contact me through your CSMs or leave a reply here.

Your feedback is always appreciated as we’re working for you to make your work easier!

All the best,

The Catalog Team

Screenshots:

[rpsloan]

Hi @KataKeri! Is it possible to also have this toggle on the subcatalog themselves to override the root admin control for that subcatalog (Similar to how Bulk Purchase is)? I see some of our Catalogs being interested in this, but others would want to stay on the original CSS/JS.

My initial testing with the subcatalog admin toggle for the Theme Editor seems like it doesn't work? If the Theme Editor is enabled in the root, and whether or not the Theme Editor is toggled for a subcatalog admin, they can still see and edit the Theme in the Customizations tab. Can more information be provided for the subcatalog admin toggle for this?

[KataKeri]

@rpsloan 

1. I have to think it through with the team, and I'll get back to you. Thank you for the suggestion, I see the use case here.
2. You need to log in with that subcatalog admin again to see the changes. I just tested it on my account and it works for me -- did you log out and log in again? 

[rpsloan]

@KataKeri

1. Thank you for looking into it!

2. It worked now. I was initially just refreshing the page when I toggled Theme on/off. It worked when I log out every time I made a change and the log back in. Thanks!

[YaejuneLee]

yippee

[makraft]

It is great to see this coming along, but without the ability to disable the new theme at the subaccount level, we won't be able to use it. We have some heavily stylized sub catalogs that we would not want to exchange for this system. I hope you can find a way to make this happen @KataKeri !

[KataKeri]

@makraft Thanks for the feedback, yes, we know it's a limiting factor now. I'll discuss with the team how we can make this happen, hopefully we can provide a solution. 

[chriscas]

Hi @matekiss,

Would it be possible to have the "inverse colors" theme setting change the color of both the header and footer, or add a similar option for the footer?  Our image is white text with an invisible background, which looks great with the inverted blue header, but for the footer with a white background the logo text (University of Michigan-Dearborn) is invisible :(.  I'll upload a screenshot to demo the problem...

-Chris

[matekiss]

Hi @chriscas ,

Thank you for bringing this to our attention and for the detailed explanation!

I understand how having an "inverse colors" theme setting that also applies to the footer would be beneficial, especially in your case with the University of Michigan-Dearborn logo. Ensuring consistent visibility and branding across different sections of the interface is crucial, and we want to make sure your content looks great wherever it’s displayed.

I’m pleased to let you know that we will be adding this feature to our product roadmap. Our goal will be to extend the "inverse colors" setting to include both the header and footer, or alternatively, provide an additional option specifically for the footer.

We’ll keep you updated on our progress, and I’ll make sure to notify you once this enhancement is released.

Thank you for your valuable input!

Best regards,
Máté

[chriscas]

Thank you so much, @matekiss.  I know it's difficult for developers to anticipate all of the situations that your customers will run in to, so I appreciate your willingness to make some enhancements, so the new theme functionality works better for us (and probably some others)!

-Chris