Layout Switch
This element allows users to switch between the Listing Grid layouts on the front end to select the most convenient one.
![](https://help.ecomposer.io/wp-content/uploads/2023/12/image-38-1024x518.png)
1. Content
Note: This element only works on live page of the Collection page, and with the Grid layout of the Collection products element.
![](https://help.ecomposer.io/wp-content/uploads/2023/12/image-42-1024x518.png)
Under the Content tab of this element, you can change the size and adjust the space between each switcher.
![](https://help.ecomposer.io/wp-content/uploads/2023/12/image-39-1024x518.png)
2. Design
2.1 General
You can adjust the Alignment, Background, Box Shadow, Border, Border Radius, and Spacing for the Layout Switch.
![](https://help.ecomposer.io/wp-content/uploads/2023/12/image-43-1024x518.png)
2.2 Button
You can adjust Color, Background, Border, Border Radius and Spacing for the Button on Normal, Hover, and Active mode
![](https://help.ecomposer.io/wp-content/uploads/2023/12/image-41-1024x518.png)
This is a result of the live page
![](https://help.ecomposer.io/wp-content/uploads/2024/05/z5419524760567_ce0bbdc5f2e6c7423886ebb08c01d792.jpg)