Discover how to create advanced layouts in your Store Framework store.
In this section, you'll learn how to use advanced layout components in your Store Framework store to improve your storefront design and functionality.
Advanced layout components, as well as other components, are built on the VTEX IO development platform using React technology. To learn more about the use of components, see the section Using components.
See below the available Layout apps:
- Condition Layout: Renders a component in your store when predefined conditions are met.
- Disclosure Layout: Creates a layout structure based on disclosure indicators.
- Flex Layout: Allows building complex custom layouts using the concept of rows and columns.
- Modal Layout: Provides blocks to help you create modals in your store.
- Overlay Layout: Provides blocks to create a Dropdown, Select, or Tooltip component.
- Responsive Layout: Allows you to declare layout structures that will only be rendered in a specific screen-size breakpoint.
- Slider Layout: Allows building block sliders, such as carousels.
- Stack Layout: Shows blocks on top of other blocks.
- Sticky Layout: Provides layout structures to build elements that remain fixed relative to the viewport in certain contexts.
- Tab Layout: Creates different layouts within the store's main one using tabs.
Before you begin
Have a Store Framework store
Make sure your store has a Store Theme developed following the Getting Started tutorial.
Check the builders
Check if the builders are properly installed in your Store Theme. To use builders, your account must have at least version vtex.builder-hub@0.293.4 installed. Also, you need to specify them in the app's manifest.json file. Learn more in Builders.
You must have at least the following builders configured:
- store builder: Enables the development of Store Framework storefronts.
- react builder: Used to develop apps with React when your project requires customized frontend solutions.
Learn about VTEX IO apps
Familiarize yourself with VTEX IO apps.