Layout Switch

The Layout Switch element allows customers to switch between multiple product listing layouts on the storefront, helping them choose their preferred viewing style for a better shopping experience.

1. Adding Layout Switch

Navigate to Elements → Collection Page, then drag and drop the Layout Switch element into your desired location on the page.

2. Content

Note: This element only works on live page of the Collection page, and with the Grid layout of the Collection products element.

Under the Content tab of this element, you can configure the following settings:

• Gap: Control the spacing between each layout switch icon.
• Size: Adjust the size of the layout switch icons.

3. Design

3.1. General

Under the Design tab, you can customize the appearance of the Layout Switch element with the following options:

• Spacing: Adjust the margin and padding to control the space inside and around the Layout Switch.
• Alignment: Align the Layout Switch to the left, center, or right.
• Background: Set a background color or gradient for the Layout Switch container.
• Box Shadow: Add or customize a shadow effect around the Layout Switch.
• Border: Configure the border style, width, and color.
• Border Radius: Round the corners of the Layout Switch container.

3.2. Button

Under the Button section, you can customize the appearance of the layout switch buttons for Normal, Hover, and Active states:

• Color: Defines the icon color for each button state.
• Background: Applies a background color to the button.
• Border: Controls the border width, style, and color.
• Border Radius: Adjusts the roundness of the button corners.
• Spacing: Controls the margin and padding of each button to fine-tune its spacing and clickable area.

This is the result on the live page. Customers can click the Layout Switch to change the product listing layout instantly without reloading the page.