Hello Everyone!
Welcome to journeying with ZylkerShop on setting up its Help Center. ZylkerShop set up the customer portal for its users to have a self-service platform as well as grab the mind share of its customers with Branding.
ZylkerShop made use of the customization option available on Zoho Desk to customize the content, theme, colors and tabs. Zoho Desk also offered no-code drag and drop features to add widgets, banners, and edit placeholders on the Help Center. ZylkerShop made use of these features to make announcement on new products, and festival bonanzas. ZylkerShop went a step further, tweaking the placement of buttons to create a Help Center that truly reflects their brand. How about doing the same for your Help Center?
Zoho Desk made this process a breeze for ZylkerShop by revealing exclusive CSS codes that unlock the full potential of customization. Now, we’re excited to share the same privilege with you! These codes, once reserved for ZylkerShop, are now yours to use, giving you the opportunity to create a Help Center that is perfectly tailored to your needs. Consider yourself fortunate to have access to this level of customization!
Steps to add the CSS code
i. Navigate Setup (S) >> Channels >> Help Center >> Select the Help Center portal >> Select Customization. Click Customize on the theme you want to change.
ii. On the left panel, under Customize, click on CSS and paste the code. On the top right of the screen, click Preview to view the changes, and then click Publish to see the live changes.
Help Center Customization
I. ZylkerShop decided to hide the company name since its logo and page already conveyed their identity. The CSS codes provided below can be used with the respective themes to remove the company name from the Help Center UI.
- /*Elegant Theme*/
- .Header__name{
- display:none
- }
- /*Materialized Theme*/
- .Header__brand .Header__brandName { display: none; }
- /*Flat Theme*/
- .Header__brandName{
- display:none;
- }
- /*Classic Theme*/
- .Header__logotxt {
- display:none
- }
II. The footer of the Help Center displayed 'Powered by Zoho Desk,' indicating the service platform used by ZylkerShop. To customize and hide the footer, Zoho Desk provides the following CSS codes, which can be implemented across different themes of the Help Center.
- /*Elegant Theme*/
- .Footer__footerCopyrigt{
- display:none
- }
- /*Materialized theme*/
- .Footer__footer {
- display: none;
- }
- /*Flat Theme*/
- .FooterContainer__footer {
- display: none;
- }
- /*Classic Theme*/
- .Footer__footer {
- display: none;
- }
III. By default, Zoho Desk allows Help Center users to delete their profiles. To prevent accidental deletions and protect their customer base, ZylkerShop chose to hide the Delete Profile option.
- /*Elegant Theme*/
- .ManageAccount__deleteBox{
- display:none
- }
- /*Materialized theme*/
- .ManageAccount__deleteBox {
- display: none;
- }
- /*Flat Theme*/
- .ManageAccountContainer__deleteBox {
- display: none;
- }
- /*Classic Theme*/
- .ManageAccountContainer__deleteBox {
- display: none;
- }
These customizations ensured that users seamlessly navigated from ZylkerShop's website to the Help Center, powered by Zoho Desk, without any disruption. Stay tuned for exciting codes in our upcoming series that will allow you to enhance and personalize your own Help Center!
Regards,
Lydia Kiruba | Zoho Desk
P.S: The CSS codes for customization are optional and can be used as needed based on the organization's requirements.