Grid settings
Two examples how you can use here column gaps
First example:
- Add images to your column blocks.
- In the image settings of the multicolumn section, enable the “Show borders” option.
- Adjust the column gaps according to your preferences.
Second example:
- Add images to your column blocks.
- In the image settings of the multicolumn section, locate the “Show borders” option and ensure it is unchecked.
- Navigate to “Column style” option and choose “With borders” style in grid settings of multicolumn section.
- Adjust the column gaps according to your preferences.
| Items in row | Shows items in a row according to the chosen quantity in a dropdown list:
|
| Items in row for mobile |
|
| Column gap | Choose the spacing between columns in the grid layout. You have options for “None”, “Small”, or “Large” gaps, allowing you to adjust the spacing between product images accordingly. |
| Column gap mobile | Similar to the column gap setting, this option specifies the spacing between columns specifically for mobile devices. Choose between “None” or “Small” gaps to optimize the grid layout for mobile viewing. |
| Row gap | This setting determines the spacing between rows in the grid layout. You can select from "None," "Small," or "Large" options to control the vertical spacing between product images. |
| Row gap mobile | Similar to the row gap setting, this option specifies the spacing between rows specifically for mobile devices. Choose between “None”, “Small”, or “Large” gaps to ensure a consistent grid layout across different screen sizes. |
| Column alignment | Sets the alignment of the column:
|
| Column style |
|
| Enable custom width for description | You can set the description width by enabling this option. |
| Description width | You can try to choose the best width solution for your theme. |