How to wrap sections in containers using JSON templates?

Solved

How to wrap sections in containers using JSON templates?

shellbryson
Shopify Partner
45 2 17

(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:

 

Screenshot 2022-05-27 at 12.19.46.png

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

 

Screenshot 2022-05-27 at 12.35.01.png

 

Screenshot 2022-05-27 at 12.37.00.png

 

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

 

Accepted Solution (1)

shellbryson
Shopify Partner
45 2 17

This is an accepted solution.

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

 

Screenshot 2022-05-27 at 14.24.16.png

View solution in original post

Replies 2 (2)

shellbryson
Shopify Partner
45 2 17

This is an accepted solution.

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

 

Screenshot 2022-05-27 at 14.24.16.png

peasquared
Shopify Partner
14 0 8

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? 

 

Screenshot 2023-01-25 at 9.10.14 PM.png

 

Thanks!