How to limit the number of products shown in one row? For Full page and Product page bundles

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 choose how many products appear in each row on desktop and mobile. Just replace D with the number of products you want per row on desktop, and M with the number you want on mobile.

For example, if M = 3, then 3 products will show in each row on mobile. If D = 4, then 4 products will show in each row on desktop.

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

For Full page bundle

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


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

}

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

For product page bundle

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


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

}


.gbbMixProductsContainer .gbbMixProductsItemsContainer {
grid-template-columns: repeat(D,1fr) !important;
}

(If you are facing any troubles or have further customization requests

Book a meeting with our team here!

Updated on: 27/08/2025