Home App Docs Blog Github

How do I turn a collection in to a table of products?

Hello
Is posible to turn a collection in to a table of products? how i do that?

If you select the “Product Container” layer of the collection and navigate to the style tab, you can change the child layout to adjust how those blocks sit on the page. However, we don’t have a ready made table for collections, but you could build one out in the editor! If you go that route, I’d save the component as a template so you can reuse it in the future!

The table in the example above can be achieved by adding a box to your page and adding product boxes within this box. Then, you can select your product boxes, navigate to the styles tab, and change the flex direction from “column” to “row” (this can be done in the child layout section or the custom CSS properties section).

From here, you can add the background colors, borders, and other styling in the “Styles” tab. Here is a quick fiddle example of how this can be achieved in Builder: https://builder.io/fiddle/324c83ddaa28461ea8d9ff269cb2d8a6

Let us know if you have any questions.

1 Like