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.

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:

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.

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!

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.

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.

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:

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:

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.

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.

In your Smart Cart Settings you have the ability to change where the Shop Now button redirects the customer when the cart is empty.

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

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.

This makes more room by removing chunks of the gift section for a simpler look

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

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.

Follow this guide for some helpful tips to customize the styling specifically for your Rebuy Widgets!