Edit Json templates to achieve desired look

[rak-NY]

Hi all,

I like the switch to Json to enable adding design sections to pages. The tradeoff for me, however, is far less ability to customize a page’s look and feel. In the past I could easily edit liquid code to make design changes, but how does one do this in a Json file?

Here is an example using a content page. The goal here is to get as much content as possible above the fold, but because the Json sections are adding empty blocks above and below the elements, content is stretched vertically:

In the past, with liquid, I could simply delete unwanted blocks or adjust padding and margins to fix this. But with a Json template I’m at a loss on how to achieve the desired look. How can I deleted empty blocks that Json is adding, or also set vertical padding and margins in a Json file? Is there a design-oriented Json editor available?

Also, why is the Liquid section not available in Json themes? This was a powerful tool to get precise customizations when needed.

thanks to anyone who can help!

[PaulMartin_1]

The JSON templates are just templates. It’s like a blueprint on how the page should look like. The sections inside the JSON templates are the one you should be editing.

JSON templates (shopify.dev)

[rak-NY]

Hi PaulMartin,

thank you for replying! I see the Sections files, so I understand what you’re saying. But these Sections are shared across the site on any page they are used, while my aim is to edit design elements of only one specific page.

So is the best option to duplicate a Section, change the name, and then change the name of the section in page’s Json file to match? I can do this, but each section called in the Json file also has random charachters added to its name (ie: video.liquid_aCjjD4 or rich_text_TDn8wh) so do I need to include this random charachters (_aCjjD4 ) in the new names?

Also, is there a way to delegate a custom.css file to only 1 page template that is using json? thanks again!!