For some merchants the default size of the Tiered Progress Bar gift section is too large, they feel it takes up to much space in Smart Cart.
This is an area we plan to improve upon in the next version of the Tiered Progress Bar.
For now there is an adjustment that can be easily applied to reduce the default size.
CSS to reduce the size of the Tiered Bar gift section
Add the below CSS to your Smart Cart > Custom CSS section.
/* resize Tiered Progress Bar free gifts */
.rebuy-cart__progress-free-products {
padding: 5px !important;
}
.rebuy-cart__progress-bar-container {
padding: 5px 10px 10px 10px !important;
}
.rebuy-cart__progress-free-product {
padding: 0 !important;
justify-content: start;
}
.rebuy-cart__progress-free-products {
padding-top: 5px;
}
.rebuy-cart__progress-free-product-info {
padding-bottom: 0;
height: 40px;
}
Smart Cart > Custom CSS section
Before Resizing:
One line item is fully visible below the Tiered Bar gifts.
After Resizing:
Two line items are fully visible below the Tiered Bar gifts.
Recommendations
After you've tested the CSS in Smart Cart and decide to keep it, we recommend placing it in the Rebuy Theme CSS section. This allows the code to run on all Smart Carts, instead of only a specific Smart Cart.
