All Collections
Smart Cart
Advanced Settings
CSS Tricks for Customizing Smart Cart
CSS Tricks for Customizing Smart Cart

Create Impactful Smart Cart Designs Using Custom CSS Code

Tom Eschler avatar
Written by Tom Eschler
Updated over a week ago

Customizing the look and feel of your Rebuy Smart Cart can significantly enhance the shopping experience for your customers. This document guides you through the process of using CSS to personalize the appearance of the Rebuy Smart Cart on your Shopify store.

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


WHERE DO I ADD CSS STYLING CODE IN SMART CODE?

Custom CSS code can be directly integrated into the Rebuy Smart Cart Settings to further modify your Smart Cart. Here is where you can place your CSS code:

  1. Go to the Rebuy Dashboard

  2. Click on Smart Cart on the side navigation

  3. Create or Select the Smart Cart you want to edit

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 Smart Cart's settings, proceed to the next step by scrolling down to locate the "Custom CSS" tab. 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 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

The Checkout Button along with the Subtotal are a crucial element in the shopping cart. By default, it might appear in a standard color.

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 CART

Enhancing the presentation of cart line items for products in your shopping cart is a crucial aspect of providing a seamless and user-friendly online shopping experience. This customization involves tailoring the visual aspects of each product listed in the customer's cart, ensuring that the information is clear, concise, and visually appealing.

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

Remove the pointer event on the gift items in the Smart Cart.

This removes the Product Link so that customers cannot click on the gift and go to that items product page.

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

Below illustrates changing the background color for Smart Cart's Product Recommendations section to make your cart appear more organized.

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

Similar to the Checkout Button, you can modify the Color, Border, Roundness, and Font for the Empty Cart "Shop Now" Button that redirects the customer to your products.

.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 your Smart Cart Settings you have the ability to change where the Shop Now button redirects the customer when the cart is empty.


TIER PROGRESS BAR

TIER PROGRESS BAR COLORS & SIZING

You can modify the Color of Smart Cart's Tiered Progress Bar and Icon Color.

/* 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

Sometimes when adding extra widgets to your Smart Cart you may want to free up some space for a better viewport. Here you can remove parts of the Tiered Progress Bar Section.

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


ADDITIONAL WAYS TO RESIZE PROGRESS BAR


LEARN MORE STYLING PROPERTIES

For a wider range of unique CSS properties, explore further at:


ADDITIONAL SELECTORS FOR SMART CART ELEMENTS

Here's a list of typical elements you might find in a Smart Cart interface, along with empty CSS brackets for adding customization properties. Note that the exact class names and structure can vary depending on the specific implementation of the Smart Cart in your theme, so you may need a developer to adjust the selectors to match your setup.

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

Did this answer your question?