There are many ways to customize Smart Cart to better match your stores theme, one fun option available is to add your stores logo directly into Smart Cart!
We suggest testing in a duplicate Smart Cart, before editting the live Smart Cart.
Step 1: Add custom CSS to Smart Cart
In the Rebuy Admin, click on the Smart Cart you're working in. Then click on settings and scroll down to the Custom CSS section.
Copy and paste this CSS code.
.rebuy-cart__title {
text-indent: -9999px;
line-height: 0;
content: '';
}
.rebuy-cart__title:after {
content: "";
background: transparent url(URL HERE) no-repeat; /* Update this line */
display: flex;
width: auto;
height: 25px;
background-size: contain;
background-position: center;
margin: 5px auto;
}
Note: this line will need updating. See Step 2.
background: transparent url(URL HERE) no-repeat;
Step 2: 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.
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.
Access the logo URL from wherever you have it saved internally on your end.
You can inspect your website and pull the URL directly from your browser.
Step 3: Add logo URL to the custom CSS
Now that you have the URL link for your logo, simply go back to Step 1 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;
How the complete code should look once placed in your Smart Cart > Custom CSS section.
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.