How to limit the number of products shown in one row?

Advanced Customization can be done in the Additional configurations settings of Branding Configurations

Products will be displayed in the bundle as per the product image size and screen size.
Merchants can fix the products to be shown on a row through the app by replacing the D and M with the number of products you would like to be displayed in a row in desktop and mobile respectively.

To fix this issue navigate to the additional configurations within Branding Configuration
Copy and paste the code below in the Custom CSS Settings

@media screen and (max-width: 600px){


.gbbProductsItemsContainer {
grid-template-columns: repeat(M,1fr) !important;
}

}

.gbbProductsItemsContainer {
grid-template-columns: repeat(D,1fr);
}

(If you are facing any troubles or have further customization requests
Book a meeting with our team here!

Updated on: 07/04/2024