CMS Development

dannyalva
Member

Extending Theme Fields JSON file

The theme I'm using has the fields.json file locked and I can't clone into my child theme. 

 

Is there a way to extend the theme fields JSON in the child theme?

 

Thanks

0 Upvotes
11 Replies 11
Jaycee_Lewis
Community Manager
Community Manager

Extending Theme Fields JSON file

Hi, @dannyalva. Thanks for reaching out. Can you share any additional details with the community?

  • what theme are you using?
  • what tier are you on? — Free, Starter, etc.

These details help the community understand how they can assist.

 

Thank you! —Jaycee

linkedin

Jaycee Lewis

Developer Community Manager

Community | HubSpot

0 Upvotes
dannyalva
Member

Extending Theme Fields JSON file

The theme is Krazy 
https://app.hubspot.com/ecosystem/21628696/marketplace/website/krazy-theme-by-juice-tactics-snacks

 

and we are on "Marketing Hub Enterprise - Marketing Contacts" package.

 

Hope this helps.

 

Thank you,

Danny

0 Upvotes
Jnix284
Most Valuable Member | Diamond Partner
Most Valuable Member | Diamond Partner

Extending Theme Fields JSON file

Hi @dannyalva  I'm curious what you're looking to achieve by extending the fields.json - this just controls the options available in theme settings, but you can define new variables in the child.css and overwrite any existing definitions.

 

Would this just be so that you can make it accessible on the marketing side?


If my reply answered your question please mark it as a solution to make it easier for others to find.



Jennifer Nixon - Delivery Lead at Aptitude 8

connect with Jen on Linkedin

romerocam
Member

Extending Theme Fields JSON file

Hello Jnix! Im having the same issue... I've created a child theme from a free marketplace theme and would love to customize it's fields.json so i can control my options accordingly... How can i achieve this? 
Thank you!

0 Upvotes
Jnix284
Most Valuable Member | Diamond Partner
Most Valuable Member | Diamond Partner

Extending Theme Fields JSON file

@romerocam modifying the fields.json requires you to use the HubSpot CLI (command-line-interface) and can't be done via Design Tools.

 

For a free theme, it's probably not the end of the world to modify the fields.json, but adding a caution here for any other users who might read this - once you change the fields.json for the theme, you lose access to future updates to this file when the theme developers issue a new version. This could cause you to lose functionality or create breaking changes.

 

 


If my reply answered your question please mark it as a solution to make it easier for others to find.



Jennifer Nixon - Delivery Lead at Aptitude 8

connect with Jen on Linkedin

romerocam
Member

Extending Theme Fields JSON file

Thanks @Jnix284 ! Im using th CLI but dont seem to get how im supossed to edit the fields.json as it it a clone of the original fields.json . I tried making font changes hoping to see them reflected on my design tools theme options and didnt see them. Is there any way to achieve this? Any extra documentation?

0 Upvotes
Jnix284
Most Valuable Member | Diamond Partner
Most Valuable Member | Diamond Partner

Extending Theme Fields JSON file

@romerocam as long as the fields.json is located in the child theme folder, it will overwrite the original fields.json

 

What font changes are you hoping to make? Are you adding new font settings that aren't currently available in Theme Settings?

 

This is the fields.json documentation - once you push your changes to the child theme you should be able to see them in the Theme Settings, but you'd have to use the child.css to define your new variables, etc. if they don't exist already.

 


If my reply answered your question please mark it as a solution to make it easier for others to find.



Jennifer Nixon - Delivery Lead at Aptitude 8

connect with Jen on Linkedin

0 Upvotes
romerocam
Member

Extending Theme Fields JSON file

Thanks! Actually im trying to set different typography for every h1,h2,h3 etc..  I will take a look at the documentation you gave me and hope it works! Thanks again for your time and help!
Take care!

0 Upvotes
Jnix284
Most Valuable Member | Diamond Partner
Most Valuable Member | Diamond Partner

Extending Theme Fields JSON file

@romerocam you're welcome!

 

In that case, it'd be so much easier to just add overwrites to your child.css since you're only trying to change it for a single website and not developing a theme...

 

If they're custom fonts or google fonts that aren't selected in the theme settings already, you can add the @fontface declarations using local files and/or the google code provided depending on your preference.

 

Then you can just add the CSS to overwrite the headings.

 

Honestly not worth the effort to update the fields.json just to do this - the only reason you'd need to do it that was would be if you're going to be changing them constantly and wanted to do it without code...🙃

 

It's a big lift to change the fields.json when you can do it all with CSS in a few minutes.

 


If my reply answered your question please mark it as a solution to make it easier for others to find.



Jennifer Nixon - Delivery Lead at Aptitude 8

connect with Jen on Linkedin

romerocam
Member

Extending Theme Fields JSON file

wow! Ok! i trust you! I'll try your approach then!! Thank you very much!!

0 Upvotes
Jnix284
Most Valuable Member | Diamond Partner
Most Valuable Member | Diamond Partner

Extending Theme Fields JSON file

You're welcome @romerocam this custom font documentation (for Power Pro theme) shows how to add your font-face declrations and also how to overwrite the root variables (you'll have to pull those from your theme). Then all you need are your heading overwrites and you're all set.

 

You can also use :root to define new variables and then apply your changes with the variables instead of individually per heading.

 

I'm happy to review the CSS if you have questions once you get going.

 


If my reply answered your question please mark it as a solution to make it easier for others to find.



Jennifer Nixon - Delivery Lead at Aptitude 8

connect with Jen on Linkedin