The Product Summary is a VTEX native app responsible for displaying important product data in your store's components, such as the Shelf and the Minicart.

Thanks to the Flex Layout app, it is possible to customize the default presentation showed above and thereby display the Product Summary blocks in a horizontal alignment to your users:

Learn in the instructions below how to use the powerful combination between the Flex Layout and the Product Summary apps in order to display your product data horizontally.

This recipe requires previous understanding of the Flex Layout app. It is strongly advised that you read the app documentation before performing the steps below!

1. Make sure the Flex Layout app has been declared as a theme's dependency in the manifest.json file:

2. Add the flex-layout.row block as a child of the product-summary.shelf and/or the product-summary blocks, according to the desired scenario:

The flex-layout.row block allows its children to be displayed side by side on the UI.

Notice that the block naming always depends on your store scenario. In the example above, #product-summary-mobile is only being used for identification purposes.

3. Add the flex-layout.col blocks as children of the flex-layout.row block to define the desired disposition of elements on the screen - the first flex-layout.col's children will be displayed on the left side of the horizontal Product Summary, whereas the second will be on the right side:

4. Add the product-summary-image block to the flex-layout.col#product-image's children list and then declare it as desired:

5. Add the desired blocks responsible for displaying product data to the flex-layout.col#product-summary-details's children list and then declare them as desired. For example:

6. Deploy your changes.