Customizing the Settings panel (Guide Professional and Enterprise)

Have more questions? Submit a request

23 Comments

  • Brad Marshall

    Where do I find the `manifest.json` file? I thought it would be in the assets, but cannot find it.

    Thank you!

    0
  • Jennifer Rowe

    Hi Brad,

    Again, you've caught me without the doc ready! I'm working on a Export doc.

    But here's what you do:

    Click the options (gear) menu on the theme, then select Export.

    When you finished editing the manifest file, you can re-import it by clicking Import in the upper-right of the Themes page.

    0
  • Jennifer Rowe

    Brad, I edited my commend to add the all-important import step, if you edit the manifest file. 

    0
  • Brad Marshall

    Okay, so there is no way to modify that single file, but rather I have to export/import to modify the manifest.json. Correct? 

    Thank you for your help!

    0
  • Jennifer Rowe

    That's right, Brad. You have to export the theme to modify the manifest file.

    0
  • Trapta

    It will be good idea to have examples on range, and text types.

    Please also document the rules that you run.

    We noticed, if we use "list" type with only one option, manifest won't pass validation stage (while theme is being imported after upload). It took a while to find out this which I think is decision by design (i.e a list with one option shouldn't be allowed anyway).

    Thank you

    1
  • Stas

    Is there a way to make a hidden type of variables? For example, it would be good to save the media queries breakpoints which are not needed to be editable in the Theming Center?

    Thanks for the great update!

    0
  • Augusto Cravo Silva

    @Trapta,

    We are woking on adding better error messages on import. These will tell you the exact reason why Import failed.

     

    @Stas,

    Our vision with the Theming Center (TC) variables is to allow less experienced people to do smaller tweaks in the theme that don't require a theme developer.

    It feels you are looking for SCSS variables :) We currently don't support SCSS compilation in TC but you can still compile SCSS into CSS offline and then import it. We have an example of that in https://github.com/zendesk/copenhagen_theme

    0
  • Trapta

    @Augusto Cravo Silva,

    I have a different update here :)

    0
  • Devorah

    I just spent a while trying to figure out why I couldn't add any new variables to my manifest.json file. Each time I got this cryptic import error:

    The property '#/settings/0/variables/0' of type object did not match any of the required schemas

    I finally figured out you can't put raw text into "label" and "description" fields. Instead you have to add a translation key to AT LEAST the default locale in the translations directory and point "label" and "description" to that newly created key.

    It would be great if you could add this caveat to the documentation - it wasn't clear.

    Thanks!

     

    1
  • Jessie - Community Manager

    Thanks for the heads up on that, Devorah! I'll pass your feedback along in our Documentation team!

    0
  • Brad Marshall

    I'm getting the same error:

    The property '#/settings/0/variables/0' of type object did not match any of the required schemas

    Do you really have to create a translations folder and then place all of the strings into it to get it to import correctly? That is a lot of extra work that shouldn't be required. There are examples above that do not follow this method and when I exported my theme to make alterations to it, it didn't have these translation folder/files to begin with. Would this mean I would need to export, make all of the translation changes, to get it to import again?

    0
  • Augusto Cravo Silva

    Hi @Brad,

    Sorry to hear you're experiencing issues. We need to look into improving this error message.

    What it means is that the 1st variable of the 1st group of settings is not correctly defined.

    You don't need to create translations if you do not want to provide this functionality. If we can't find a translation, we will show what is set in the manifest. However, you should be aware that the label string length is limited to 40 characters, when not using the translation file. This might be the issue. Which type of setting are you trying to add?

    0
  • Brad Marshall

    I had exported the default, Zendesk-provided theme. I then modified it and then attempted to reupload it and then experienced the error. I created the translation file and it worked without any issues. Also, as an FYI, none of the label strings had more than 40 characters.

    The first variable of the first group of settings was:

    • Label: Primary Color
    • Description: Color for generic navigational elements
    • Type: color
    0
  • Augusto Cravo Silva

    Hi @Brad, thanks for providing those details.

    I think we would need to have a look at the ZIP file to understand what the problem could be.

    If you are still experiencing issues, please send us a Support request with the ZIP file.

    Thanks

    0
  • Joel Hellman

    @Augusto, @Brand: I also got stuck here for a while, despite finding this thread and shortening my attribute lengths. 

    The property '#/settings/0/variables/0' of type object did not match any of the required schemas 

    In my case I discovered it was whenever I used a identifier longer than 30 chars. 

    Please add this to the documentation now, so we can skip the guesswork. It seems your schema is very restrictive (30 chars, that's fairly short) with its validation as well as its error output. Schema should be useful both to the client and server, IMO...

    And I'd like if we could allow for longer values. Guess I'm just that verbose ;)

    0
  • Joel Hellman

    What is the max lengh of the 'value' property in the manifest.json file for a field of type 'text' ?

    My use case is to hold a list of comma-separated form id that my theme uses, thinking the Zendesk admin could maintain these through the theme settings, instead of editing the theme code directly, where there is always the risk they break something editing the html or javascript.

    I'm unsure how well this would scale for those accounts that have forms though, in case the value field cannot hold that much data...

    0
  • Charles Nadeau

    @Joel

    I added to 30-character limit to the identifier property in the doc.

    Thanks.

    0
  • Joel Hellman

    @Charles: thanks. But what about the max length of the value property for text fields?

    Also can we add to the reference table that there is a 40 char limit, unless you use translation files, i.e. as this comment from Augusto Cravo Silva explained:

    However, you should be aware that the label string length is limited to 40 characters, when not using the translation file. 

    This limit also applies to the description field.

    0
  • Harjinder Dhanjal

    Thank you so much appreciated thanks

    0
  • Antoine Puel

    Hello,

    I have a question concerning the use of the manifest.json file in parallel of SASS variables. 

    manifest.json allows users to define default and custom variables, that you can change directly from the Guide Admin user interface (as shown in this tutorial), and that's great.

    But if you use SASS files for your theme, you got a _variables.scss file with the same variables (brand_color, text_color...etc). 

    Which file override the other ? And what happens if I define some variables in my _variables.scss file, and then change them from the guide admin interface ?

    For more context, I work with this kind of boilerplate, that allow me to work with SASS/ES6...etc and compiles the all theme inside a /dist folder.

    Thank you !

     

    EDIT :

    I think the solution is to use this to get the variables from Zendesk settings. So in your _variables.scss file, it should look like this :

    $brand_color: unquote("$brand_color");
    $brand_text_color: unquote("$brand_text_color"); //Color for text with an accent color background
    $text_color: unquote("$text_color");
    $link_color: unquote("$link_color");
    $background_color: unquote("$background_color");
    0
  • Abdul Qabiz

    Hi Charles

    This page would be a good place to document the limits with some example. For example, we have discussed how label field is restricted to have N number of characters. Similarly, there is a limit on number of settings, why not give an example what does a setting mean, and how do you calculate the total number of settings?

    At Diziana, we are having hard time to have our own settings along with what Zendesk exposes in Copenhagen? We have worked with thousands of customers, and they want more flexibility. I am sure Zendesk is working to improve theming experience, I like Shopify a lot for their tools and theming experience.

    I am requesting following features, and will appreciate if you can at least discuss it internally and think of doing these:

    1. Please bump the limit on settings to 200-250. It's json which can be easily compressed and stored in database (if that's a concern); even parsing shouldn't cost more than a few msecs than it currently takes.
    2. Please provide a way to authors to associate icons (image/asset, or font-awesome or similar) with categories/sections
    3. Please provide a way (a setting object of type Dynamic Content), so users can pick a dynamic content placeholder from drop-down. It's basically a list of Dynamic Content placeholders. Diziana started exposing a text-field to let customer enter DC name for multilingual text; we see Zendesk also follows similar pattern in their own help-center theme. Not having to manually type, and be able to pick from a drop-down would be super useful.
    4. Please expose a template helper which mimics HelpCenter JavaScript object; or at least let us find out user tags/organizations, and other related details in template.
    5. Please update asset helper so it can take asset-name as variable (a string), and we can use it in loops (each, etc.), e.g. id + ".png"  can be passed to asset helper within loops. This will allow us to build a lot of dynamic behavior -- like iterate categories, pass <category-id + ".png"> to asset helper, and get path of image (assuming we have uploaded images with name of category-id as filename) -- that's pattern we followed for years in Diziana themes, and it worked fine until CDN changes broke all asset URIs (Cool URIs don't change)

    Theme authors  and Zendesk customers spent thousands of hours to figure out things, solve basic things, and build abstractions on top of Zendesk templating language and tools. That all can change by adding little more smartness in tools, and templating language. Once again Shopify is a good example to look at.

    Thank you

    Team Diziana

    0
  • Charles Nadeau

    Hi Abdul,

    This is excellent feedback. You might also want to share it in the Guide product feedback forum, which the product team monitors more closely:

    https://support.zendesk.com/hc/en-us/community/topics/360000029847

    Other users can add their support to get these ideas on the product roadmap.

    Thanks.

    0

Please sign in to leave a comment.

Powered by Zendesk