How to wrap sections in containers using JSON templates?

[shellbryson]

(Precursor: I’m an experience web dev, fluent in liquid and legacy template design)

Our current product theme has product images on the left (desktop) and product information on right. We achieve this using CSS grids. This requires the entire page to be wrapped in a div (which can be done in JSON templates with the ‘wrapper’ property). However I can’t figure out a way to wrap the customisable sections. This is what we have now:

With JSON templates, those sections disappear as they’re defined in the JSON. But how on Earth do I get to this same layout?

TLDR: need to wrap various sections in containers, no obvious way to do this with JSON templates

[shellbryson]

Ahah, found a way to do it (mostly). Converted the sections to snippits, then use blocks:

[peasquared]

Hi There! I was searching for a way to add a wrapping container to various sections on the home page index of a custom theme. I think that is essentially what you were trying to do too. Can you share any more detail of how you went about this?

For example, I have this section here on the home page but I want to add more content sections to the page but it can’t share the same Wrapper. Each section should have its own wrapper for styling. What am I missing?

Thanks!