Enhancing the look and feel of your Legacy Rebuy Smart Cart can greatly improve your customers' shopping experience. This guide will walk you through the process of using CSS to customize the appearance of the Rebuy Smart Cart on your Shopify store.
A new and improved cart version has recently been launched to replace the legacy Smart Carts. We recommend switching to the new cart template to access the latest features. If you'd like to learn some CSS tips for Smart Cart v2, we have a dedicated guide for that!
Where do I add CSS in my Legacy Smart Cart Code?
Integrate Custom CSS for Legacy Smart Cart
You can directly add custom CSS code to your Legacy Smart Cart through the Rebuy Smart Cart settings for further customization. Follow these steps to place your CSS code:
Go to the Rebuy Dashboard.
Click on Smart Cart in the side navigation.
Create or select the Smart Cart you wish to edit.
From here, you can add your custom CSS to modify the appearance and behavior of your Legacy Smart Cart to better suit your store's needs.
Before making any changes, it's recommended to create a duplicate copy of your Live Smart Cart to test on first! You can view the changes in your Smart Cart copy using Rebuy Preview Mode
Once you are in the legacy Smart Cart settings, proceed to 'custom css' section.
This tab provides the designated area where you can input and apply your custom CSS code for fine-tuning the appearance and functionality of your Smart Cart.
CSS Styling Tips for the Legacy Smart Cart
*Important Terms
Selectors: This is what you're styling. .rebuy-cart__checkout-button { } is the selector. This specifies the element you're targeting for styling changes, with curly brackets following the selector used to enclose the CSS properties.
For example .rebuy-cart__checkout-button { } means you're targeting the Checkout Button
element.
Properties: These are the styling changes you're making to the element's selector. Properties get placed between { } background: is a styling property. You'll then give the property a value. background: #fff changes the button color by using a color hex.
Comment code: Comments are enclosed in /* and */ in CSS. This is used to add notes or explanations. Comment code does not run as code. They're helpful for reminding yourself or informing others about what a specific part of the code is for.
Style the Checkout Button, Subtotal Text, and Price in Legacy Smart Cart
The Checkout Button, along with the Subtotal, are crucial elements in the Legacy Smart Cart. By default, these elements may appear in a standard color. Customizing their appearance can help them stand out, encouraging customers to proceed with their purchase and improving the overall shopping experience.
In most cases you can make changes to the styling of your Smart Cart by updating your Rebuy Theme Settings. This allows you to customize the look and feel of your cart to match your brand and website design.
You also have the ability to customize more than the options available in the Rebuy Theme Settings by using some styling code.
The Before and After images showcased below illustrate the transformation from the default green to a customized appearance. With code, you can modify the Color, Button Border, Roundness, and Font. Also incorporate a Button Hover Effect.
These changes enhance the button's prominence and ensure it aligns seamlessly with your website's overall theme!
Before:
After:
You can copy and paste the code directly into the Settings of your created Smart Cart in the Smart Cart -> Custom CSS Box. Once you place that, make adjustments to the code as needed.
Making adjustments:
For example, the background: property uses a color #hex. Change the hex to your desired color. Adjust any sizing pixel's px amount, remove any properties you don't need or add any additional ones.
.rebuy-cart__checkout-button {
background: #1B2140 !important; /* Button background color */
border-color: #7d38c4 !important; /* Button border color */
border-width: 2px !important; /* Button border width */
color: #fff !important; /* Button text color */
text-align: center !important;
text-transform: uppercase !important;
font-size: 16px !important;
padding: 15px 15px !important;
font-family: Arial !important;
border-radius: 0px !important; /* Rounded corners, 0px for sharp corners */
}
.rebuy-cart__checkout-button:hover {
background-color: #BE2198 !important; /* Button hover color */
}
/* Subtotal Text color: */
.rebuy-cart__flyout-subtotal-label {
color: #1B2140 !important;
}
/* Subtotal Price color: */
.rebuy-cart__flyout-subtotal-final-amount {
color: #BE2198 !important;
font-weight: bolder !important;
}
/* Subtotal Compare At Price color: */
.rebuy-cart__flyout-subtotal-compare-amount {
text-decoration: line-through !important;
color: #939393 !important;
font-weight: lighter !important;
}
All punctuation shown above is crucial for your code to run!
Customize Cart Line Items for Products in Legacy Smart Cart
Enhancing the presentation of cart line items for products in your Legacy Smart Cart is crucial for providing a seamless and user-friendly online shopping experience. This customization allows you to tailor the visual aspects of each product listed in the customer's cart, ensuring that all product details are presented in a clear, concise, and visually appealing manner. By customizing the Legacy Smart Cart, you can make the shopping experience more engaging, even as we transition to newer versions of the Rebuy Smart Cart.
Example:
Below illustrates the ability to Underline Product Titles, change Colors and Font Size for Product Descriptions, Price/Compare At Price/Discounted Price as well as adjusting the Product Images:
You can copy and paste the code below directly into the Settings of your created Smart Cart in the Smart Cart -> Custom CSS Box. Once you place that then you can make adjustments to the code as needed:
Making adjustments:
For example, the color: property uses a color #hex for changing the Text Color. Change the hex to your desired color. Adjust any sizing pixel's px amount, add or remove any properties you don't need.
/* Cart Line Items for products added to cart: */
.rebuy-cart__flyout-item-product-title {
font-family: Arial, sans-serif !important;
font-size: 13px !important;
color: #1B2140 !important;
text-decoration: underline !important;
}
/* Targets the product images: */
.rebuy-cart__flyout-item-media img {
width: 80px !important;
height: 80px !important;
/* Ensure the image covers the set dimensions: */
object-fit: cover !important;
}
/* Text Color for Product discount message: */
.rebuy-cart__flyout-item-discount-message {
color: #BE2198 !important;
}
/* Color for Product Price: */
.rebuy-cart__flyout-item-price .rebuy-money {
color: #1B2140 !important;
font-size: 14px !important;
font-weight: bolder !important;
}
/* Color for Product Sale Price: */
.rebuy-cart__flyout-item-price .rebuy-money.sale {
color: #BE2198 !important;
}
/* Compare At Price: */
.rebuy-cart__flyout-item-price .rebuy-money.compare-at {
color: #9a9a9a !important;
font-size: 14px !important;
font-weight: lighter !important;
}
Remove PDP Links on Gift Items in Smart Cart
Disable the pointer event on gift items in the Legacy Smart Cart to remove the product link. This prevents customers from clicking on the gift and navigating to its product page, maintaining focus within the cart.
Place this code in the Smart Cart -> Custom CSS Box. block:
/* replace XXXXX with the Gift Widget's ID */
.rebuy-cart__flyout-item.property-value-XXXXX .rebuy-cart__flyout-item-product-title, .rebuy-cart__flyout-item.property-value-XXXXX .rebuy-cart__flyout-item-media {
pointer-events: none !important;
}
Cart Recommendations Background for Legacy Smart Cart
The following explains how to change the background color for the Product Recommendations section of the Legacy Smart Cart. Adjusting the background color can help make your cart appear more organized and visually cohesive.
Example: Changing the Recommendations section a lighter shade of grey.
.rebuy-cart__flyout-recommendations {
background-color: #fafafa !important;
}
Customize the Empty Cart 'Shop Now' Button in Legacy Smart Cart
Just like the Checkout Button, you can customize the color, border, roundness, and font of the Empty Cart "Shop Now" button. This button encourages customers to continue browsing and redirects them to your products, so personalizing its appearance can help make it more inviting and consistent with your brand style.
.rebuy-cart__flyout-empty-cart a {
border-color: #7d38c4 !important; /* Button border color */
background: #1B2140 !important;
color: #fff !important; /* Button text color */
font-weight: 700 !important;
font-size: 16px !important;
}
Change 'Shop Now' Button Link in Legacy Smart Cart
In your Legacy Smart Cart settings, you can modify the destination of the "Shop Now" button for when the cart is empty. To do this, navigate to your Smart Cart settings, select the 'cart items' block, and click on the 'Shop Now' link to edit where it redirects customers.
Tier Progress Bar in Legacy Smart Cart
Tier Progress Bar Colors & Sizing for Legacy Cart
You can customize the color of the Tiered Progress Bar and the icon color in the Legacy Smart Cart. Adjusting these elements allows you to match the progress bar to your brand's color scheme and enhance the visual appeal of the cart.
/* Color for the tiered progress bar icon: */
/* Change the color #hex as needed */
.complete .rebuy-cart__progress-step-icon {
background: #5a31f4 !important;
}
/* Color for the tiered progress bar meter: */
.rebuy-cart__progress-bar-meter-fill {
background: #5a31f4 !important;
}
/* adjusting the tiered progress bar section */
.rebuy-cart__progress-bar-container {
width: 100% !important; /* Adjust the width as needed */
margin: auto !important; /* Centers everything in the container */
border-bottom: 1px solid #eee !important;;
color: #808291 !important; /* text color */
/* Use padding to Adjust the spacing: */
padding: 5px 10px 10px 10px !important;
}
Simplify Progress Bar Gift Section for More Space in Legacy Smart Cart
When adding extra widgets to your Legacy Smart Cart, you may need to create more space for a better view. You can simplify the Tiered Progress Bar section by removing certain elements, making the cart layout cleaner and more spacious.
Before:
After:
This makes more room by removing chunks of the gift section for a simpler look
WARNING! *Do not use if the Gift Products have Variant options to choose from such as sizes etc. The gift product will not be applied at checkout if the customer is not able to select a variant first!
.rebuy-cart__progress-free-product-variant-title{
display: none !important;
}
.rebuy-cart__progress-free-products-list{
display: none !important;
}
.rebuy-cart__progress-free-products-title {
display: none !important;
}
Learn More About Styling Properties
For a wider range of unique CSS properties, explore further at:
Additional Selectors for Legacy Smart Cart Elements
Below is a list of common elements found in the Legacy Smart Cart interface, with empty CSS brackets ready for customization. Keep in mind that exact class names and structure may vary depending on your Smart Cart's implementation. You may need a developer’s assistance to ensure the selectors match your specific setup accurately.
Legacy Smart Cart Elements List
Legacy Smart Cart Elements List
You can add your CSS properties inside these brackets to customize the appearance of each element. Remember to inspect the elements in your specific Smart Cart implementation to ensure the class names and structures align with this list.
.rebuy-cart__flyout-header
.rebuy-cart__flyout-close
.rebuy-cart__flyout-body
.rebuy-cart__flyout-announcement-bar
.rebuy-cart__flyout-announcement-bar-message
.rebuy-cart__flyout-shipping-bar
.rebuy-cart__flyout-shipping-bar-message
.rebuy-cart__flyout-shipping-bar-meter
.rebuy-cart__flyout-shipping-bar-meter-fill
.rebuy-cart__flyout-shipping-bar-meter-fill-text
.rebuy-cart__flyout-shipping-bar-helper
.rebuy-cart__progress-bar-container
.rebuy-cart__progress-step-wrapper
.rebuy-cart__progress-step
.rebuy-cart__progress-step-icon
.rebuy-cart__progress-step-label
.rebuy-cart__progress-bar-wrapper
.rebuy-cart__progress-bar-meter
.rebuy-cart__progress-bar-meter-fill
.rebuy-cart__progress-bar-prompt
.rebuy-cart__progress-free-products
.rebuy-cart__progress-free-products-title
.rebuy-cart__progress-free-products-list
.rebuy-cart__progress-free-product
.rebuy-cart__progress-free-product-image
.rebuy-cart__progress-free-product-info
.rebuy-cart__progress-free-product-title
.rebuy-cart__progress-free-product-variant-title
.rebuy-cart__progress-free-product-variant-select
.rebuy-cart__progress-free-product-variant-select-prompt
.rebuy-cart__progress-free-product-remove
.rebuy-cart__flyout-content
.rebuy-cart__flyout-items
.rebuy-cart__flyout-item
.rebuy-cart__flyout-item-media
.rebuy-cart__flyout-item-info
.rebuy-cart__flyout-item-product-title
.rebuy-cart__flyout-item-variant-title
.rebuy-cart__flyout-item-discount-message
.rebuy-cart__flyout-item-properties
.rebuy-cart__flyout-item-property
.rebuy-cart__flyout-item-property--delivery-frequency
.rebuy-cart__flyout-item-property-name
.rebuy-cart__flyout-item-property-separator
.rebuy-cart__flyout-item-property-value
.rebuy-cart__flyout-item-remove
.rebuy-cart__flyout-item-quantity
.rebuy-cart__flyout-item-quantity-widget
.rebuy-cart__flyout-item-quantity-widget-button
.rebuy-cart__flyout-item-quantity-widget-label
.rebuy-cart__flyout-item-price
.rebuy-money
.rebuy-cart__flyout-item-subscription
.rebuy-cart__flyout-empty-cart
.rebuy-cart__flyout-empty-cart-footer
.rebuy-cart__flyout-recommendations
.rebuy-cart__upsells
.rebuy-cart__flyout-footer
.rebuy-cart__flyout-discount-container
.rebuy-cart__flyout-discount-form
.rebuy-input-wrapper
.rebuy-input-wrapper--floating-label
.rebuy-input-label
.rebuy-input
.rebuy-cart__flyout-subtotal
.rebuy-cart__flyout-subtotal-label
.rebuy-cart__flyout-subtotal-amount
.rebuy-cart__checkout-button
.rebuy-cart__view-cart-button
.rebuy-cart__continue-shopping-button
CONGRATS! YOU ARE NOW READY TO ENHANCE YOUR WIDGETS
Follow this guide for some helpful tips to customize the styling specifically for your Rebuy Widgets!
NOTICE: Rebuy support services encompass all aspects directly associated with Rebuy, providing assistance and guidance for features and functionalities within the standard Rebuy package. However, please note that we cannot provide support for third-party plugins or customizations beyond the scope of Rebuy. Unsupported items include, but are not limited to, custom template modifications/troubleshooting, headless configurations/troubleshooting, native cart configurations/troubleshooting, Custom CSS/Javascript, custom scripts, and third-party integrations. Proceed with caution if you plan to make any customizations.
Please refer to our Support Policy Page