Resize item in product list and product sale issue

Is there a way to reduce the size of the items in the product list? And I also want to ask about the product sale, when the item is on sale in reflow, it doesn’t appear to be on sale in bootstrap studio, the sale badge text doesn’t appear either.

The Reflow tree is a fixed design rendered dynamically. So, if you want to impact its look n’ feel, the only way I see is to play with the classes and styles of the elements you can observe through the dev tools of any browser. Here how a product list appears in my browser:

snap_2022-08-26_12-07-52

1 Like

The product sale is using v2 of reflow, where bootstrap studio is still using v1, there are ways (search the forom) to update to use v2. I believe v2 will be included in the next update of bss, don’t know when that will be.

To reduce the size of the product list (as a card grid) just change the number of cards per row in your css:

.reflow-product-list.ref-cards .ref-products {
    --ref-products-per-row: 1;}

@media (min-width: 576px){
.reflow-product-list.ref-cards .ref-products {
    --ref-products-per-row: 2;}
}

@media (min-width: 768px){
.reflow-product-list.ref-cards .ref-products {
    --ref-products-per-row: 4;}
}

@media (min-width: 1200px){
.reflow-product-list.ref-cards .ref-products {
    --ref-products-per-row: 5;}
}
2 Likes

@danny explained how to upgrade to v2: How to edit or remove reflow store properties - #7 by danny. Also, he said that BSS will be updated to use Reflow v2 next week (that was a week ago, so it should be now; or very soon).

1 Like

Thank you guys for your answers. Since I am just a beginner in frontend development I thought there was a much easier workaround for this situation. I greatly appreciate your help and will look forward for the upcoming BSS update.

1 Like

Don’t be discouraged yourself so quickly. What @richards wrote for you is very easy to add to your store. You just create a new .css file (eg. global.css) in the Styles tab at the right side of BSS. Then you copy/paste his sample.

image

To see the result, you simulate different browser sizes clicking on the icons below (visible at top of BSS). If the number of products per row doesn’t please you for a specific screen size, you change the number in the CSS file you just created.

image

I still have a lot to learn. Thank you @elroot and @richards for guiding me, I will try this out!

1 Like