Part 15: Edit container layout for catalog page

Change the container layout to add sidebars

  • Open Catalog Page we created in previous tutorials
  • Select Container 1 from the Content panel on the left
  • Select Layout from the Properties panel
  • Change the layout to the following
  • Click Edit layout code
  • Update grid-template-columns property from the layout.
"grid-template-columns": "9fr 3fr"
  • Update the layout to add some margin with following snippet.
 "styles": {    "margin": "2rem auto 4rem 2rem"  },
  • Click Save ifnot save already
  • End result should be something like this
  • Check other properties of the layout as well which can be modified for fit your purpose like max-width, grid-gap etc.

Great!! We have successfully modified the layout to fit our purpose.

Leave a comment