The Rebuy Theme
You have full control over button colors, text colors, border colors, review colors, and more all within the Rebuy Theme. If you haven't created one yet, start here. The Smart Cart will inherit the settings in this theme. If you want to change the colors for a specific widget, you can select "Custom" and the widget will use these settings and not the Rebuy Theme settings.
Adding Custom CSS
You can place custom CSS in the Rebuy Theme. This CSS will load with Rebuy, making it so you don't need to add custom CSS to your Shopify Theme and make everything much cleaner to use! We suggest only adding Rebuy specific styling here, but you can add other styling here as well.
Never done CSS before? Here are some common properties that you can copy and paste!
//Align the text on the left. text-align: left;
//Change the font being used. font-family: "font-goes-inside-these-quotes";
//Change font size. font-size: 12px;
//Change letter spacing. letter-spacing: 1px;
//Underline the text. text-decoration: underline;
//Make element unclickable. pointer-events: none;
//Make all letters uppercase (can also just change the language from widget settings). text-transform: uppercase;
//Change the background color of the element. background-color: #fff; //Remove all/add padding to all sides. padding: 0px;
//Specify side to remove/ add padding. padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;
//Remove all/add margin to all sides. margin: 0px;
//Specify side to remove/add margin. margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px;
Looking for more on CSS? Check out this article.
General Smart Cart CSS selectors
These selectors have been named in a way that makes it easy to understand what part of the Smart Cart you are targeting. You'll copy and paste whatever you'd like to use/ modify, add the CSS properties within the selector, then click Save in the Rebuy Theme. You should see your changes being reflected after you refresh your page!
.rebuy-cart__flyout { //Add CSS properties here }
.rebuy-cart__flyout-header { //Add CSS properties here }
.rebuy-cart__flyout-title { //Add CSS properties here }
.rebuy-cart__flyout-body { //Add CSS properties here }
.rebuy-cart__flyout-announcement-bar { //Add CSS properties here } .rebuy-cart__flyout-announcement-bar-message { //Add CSS properties here }
.rebuy-cart__flyout-shipping-bar { //Add CSS properties here } .rebuy-cart__flyout-shipping-bar-message { //Add CSS properties here } .rebuy-cart__flyout-shipping-bar-meter { //Add CSS properties here } .rebuy-cart__flyout-shipping-bar-meter-fill { //Add CSS properties here }
.rebuy-cart__flyout-shipping-bar-meter-fill-text { //Add CSS properties here }
.rebuy-cart__flyout-content { //Add CSS properties here }
.rebuy-cart__flyout-items { //Add CSS properties here }
.rebuy-cart__flyout-item { //Add CSS properties here }
.rebuy-cart__flyout-item-media { //Add CSS properties here }
.rebuy-cart__flyout-item-info { //Add CSS properties here }
.rebuy-cart__flyout-item-remove { //Add CSS properties here }
.rebuy-cart__flyout-item-product-title { //Add CSS properties here } .rebuy-cart__flyout-item-variant-title { //Add CSS properties here } .rebuy-cart__flyout-item-discount-message { //Add CSS properties here }
.rebuy-cart__flyout-item-quantity { //Add CSS properties here } .rebuy-cart__flyout-item-quantity-widget { //Add CSS properties here } .rebuy-cart__flyout-item-quantity-widget-button { //Add CSS properties here }
.rebuy-cart__flyout-item-quantity-widget-label { //Add CSS properties here }
.rebuy-cart__flyout-item-price { //Add CSS properties here }
.rebuy-money .sale { //Add CSS properties here }
.rebuy-money .compare-at { //Add CSS properties here }
.rebuy-money { //Add CSS properties here }
.rebuy-cart__flyout-item-subscription { //Add CSS properties here } .rebuy-button .outline { //Add CSS properties here }
.rebuy-select .muted { //Add CSS properties here }
.rebuy-cart__flyout-note { //Add CSS properties here }
.rebuy-cart__flyout-note-toggle { //Add CSS properties here }
.rebuy-cart__flyout-note-toggle-input rebuy-checkbox { //Add CSS properties here }
.rebuy-cart__flyout-note-toggle-label { //Add CSS properties here } .rebuy-cart__flyout-note-content { //Add CSS properties here }
#rebuy-cart-notes { //Add CSS properties here }
.rebuy-textarea .rebuy-cart__flyout-note-textarea { //Add CSS properties here }
.rebuy-cart__flyout-empty-cart { //Add CSS properties here }
.rebuy-cart__flyout-recommendations { //Add CSS properties here } .rebuy-cart__flyout-footer { //Add CSS properties here }
.rebuy-cart__flyout-subtotal { //Add CSS properties here }
.rebuy-cart__flyout-subtotal-label { //Add CSS properties here } .rebuy-cart__flyout-subtotal-amount { //Add CSS properties here } .rebuy-cart__flyout-actions { //Add CSS properties here }
.rebuy-cart__flyout-installments { //Add CSS properties here }
.rebuy-cart__background { //Add CSS properties here }
You can see the full Smart Cart template here.
There are tons of ways to customize the Smart Cart! Here are some common changes made to the smart cart:
Remove Smart Cart Padding, Radius (rounded corners), or Both!
.rebuy-cart__flyout { margin: 0px; border-radius: 0px; }
Shipping Bar Background
.rebuy-cart__flyout-shipping-bar.has-free-shipping { background: #fff; }
Load Smart Cart from the Right instead of the Bottom on Mobile!
@media only screen and (max-width: 480px) { .rebuy-cart__flyout { right: -100%; left: auto; top: 0; transition: right 0.5s ease-in-out; } }
/* Or try this */
@media (max-width: 480px) { .is-visible .rebuy-cart__flyout { top: 0; right: 0; transform: translateX(0%); } .rebuy-cart__flyout { top: 0; left: 0; right: 0; bottom: 0; width: 100%; max-width: 100%; transform: translateX(100%); transition: transform 0.5s ease-in-out; } }
Hide the Quantity Buttons for a Gift With Purchase Item
.property-value-rebuy-gift-with-purchase .rebuy-cart__flyout-item-quantity-widget { display: none; }