There are many ways to customize Smart Cart to better match your stores theme, one of the coolest options available is to add your stores logo directly into Smart Cart!
Step 1: Remove default text from Smart Cart
From the Rebuy Admin, open the Smart Cart settings for the Smart Cart you want to edit. Remember, only one Smart Cart can be live at a time but you can have multiple Smart Carts created for testing purposes or to customize them for upcoming promotions.
Scroll down to the Language block and remove any text that is present in the "Cart Title" box.
Step 2: Add custom CSS to Smart Cart
Next, scroll down to the "Custom CSS" block and paste in the CSS snippet shown below.
Copy this text.
.rebuy-cart__flyout-title:after {
content: "";
background: transparent url(URL HERE) no-repeat;
display: flex;
width: auto;
height: 25px;
background-size: contain;
background-position: center;
margin: 0 auto;
}
Note: this line will need updating. See Step 3.
background: transparent url(URL HERE) no-repeat;
Step 3: Locate the URL for your store logo
Now you need to grab the unique URL for your stores logo! There are 3 ways you can achieve this.
1) From your Rebuy Admin Dashboard, click on "Manage Rebuy Theme" and you should see your logo URL underneath the "Edit Your Theme" box. Simply copy this URL.
2) Access the logo URL from where ever you have it saved internally on your end.
3) You can inspect your website and pull the URL directly from your browser.
Step 4: Add logo URL to the custom CSS
Now that you have the URL link for your logo, simply go back to Step 3 and add the URL link to the background CSS property.
For example, that code would now look like this.
background: transparent url(https://try.rebuyengine.com/cdn/shop/files/Rebuy-logo-gradient_100x.png?v=1651092034) no-repeat;
Which matches the screen shot from above.
That's it! Your stores logo should now be appearing in Smart Cart. If you'd like to apply additional CSS to adjust the size or placement of the logo in Smart Cart, you're welcome to do so.