### Declare Responsive Layout App Dependency in manifest.json Source: https://github.com/vtex-apps/responsive-layout/blob/master/docs/README.md This JSON snippet illustrates how to add the `vtex.responsive-layout` app as a dependency in your VTEX theme's `manifest.json` file. Declaring this dependency, typically with a version range like '0.x', makes the app's blocks available for use throughout your theme's configuration. ```json "dependencies": { "vtex.responsive-layout": "0.x" } ``` -------------------------------- ### Configure Responsive Layout Blocks in VTEX Theme Source: https://github.com/vtex-apps/responsive-layout/blob/master/docs/README.md This comprehensive JSON configuration demonstrates how to integrate `responsive-layout` blocks into a VTEX theme. It defines a `store.custom` block that utilizes `responsive-layout.desktop`, `responsive-layout.tablet`, and `responsive-layout.phone` to display distinct `rich-text` content based on the detected screen size. Each `responsive-layout` block expects an array of `children` blocks, which will be rendered only when the current screen-size matches its specified breakpoint. ```json "store.custom#about-us": { "blocks": [ "responsive-layout.desktop", "responsive-layout.tablet", "responsive-layout.phone" ] }, "responsive-layout.desktop": { "children": ["rich-text#desktop"] }, "responsive-layout.tablet": { "children": ["rich-text#tablet"] }, "responsive-layout.phone": { "children": ["rich-text#phone"] }, "rich-text#desktop": { "props": { "text": "# This will only show up on desktop.", "blockClass": "title" } }, "rich-text#tablet": { "props": { "text": "# This will only show up on tablet.", "blockClass": "title" } }, "rich-text#phone": { "props": { "text": "# This will only show up on phone.", "blockClass": "title" } } ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.