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 Controls

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 into 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 the 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;  
}

Updated on: 27/04/2026