{"title":"Arrange content with nested content blocks","slug":"nesting-content-blocks","url":"https://support.storeconnect.com/articles/nesting-content-blocks","url_markdown":"https://support.storeconnect.com/articles/nesting-content-blocks.md","subtitle":null,"summary":"Create multi-column layouts and styled sections by nesting content blocks inside container blocks. Walk-through example builds a two-column layout with a full-width background.","type":"Help_Documentation","video_url":"","keywords":"nested content blocks, content block layout, multi-column layout, container blocks, two-column layout, page layout, content arrangement, store design, full-width background, layout style, content template, nesting blocks","last_modified":"2026-08-21T07:12:35+0000","body_markdown":"When you build your StoreConnect store, you'll want control of how content is arranged on each page, so that you can meet product and brand needs.\n\nIn StoreConnect, nested content blocks give you full control.\n\n## Two-column layout\n\nHere’s an example of a page layout where two content blocks are nested within another one, to form columns:\n\n![Sample Layout](https://res.cloudinary.com/hzkr6fi81/image/upload/v1781677828/documentation-media/content-blocks/layout-dimensions.png)\n\nTo create this layout:\n\n1.  **Add text blocks** - Create two content blocks with the **Content Template** set to `Text`. Add your text for column one in the first content block and your text for column two in the second content block. Add titles, subtitles and content as required.\n\n2.  **Add a container for text columns** - Create a content block with the **Content Template** set to `Container` with a **Layout Style** of `Full width on smaller screens and two columns on larger`. In the **Related** tab, add the content blocks you created above, as children of this container. Assign the first text content Block Position 10, and the second Text Content Block Position 20. We can now use Custom CSS to target this content block and restrict it’s width to 1200px. [Learn about Styling Content Blocks here.](using-css-with-content-blocks)\n\n3.  **Style the background** - Create a content block with the **Content Template** set to `Container` and add the earlier container content block as it’s child. We can now assign custom CSS to this content block to create a full-width background colour or image.\n\n\n![3D view of Content Blocks](https://res.cloudinary.com/hzkr6fi81/image/upload/v1781677829/documentation-media/content-blocks/layout-3d.png)\n\n## More about content blocks\n\nThe **Content Template** for each content block determines which fields in the Salesforce page are used when the system renders the content block. \n\n-   [Content block containers](content-block-containers)\n-   [Content block templates](content-block-templates)\n\n## More about styling content\n\nOnce you have created the content blocks, use the content block’s **Identifier** as your CSS selector to apply styles.\n\n-   [Using CSS with content blocks](using-css-with-content-blocks)\n-   [Adding custom CSS](adding-custom-css)"}