CSS can be a tricky thing! If you're looking for more advanced changes and need a developer check out some of our Rebuy Experts here.
The Rebuy Theme
You have full control over button colors, text colors, border colors, review colors and more all within the Rebuy Theme. If you haven't created one yet, start here. Each created widget will inherit the settings in this theme. If you want to change the colors for a specific widget, you can select "Custom" and the widget will use these settings and not the Rebuy Theme settings.
Adding Custom CSS
You can place custom CSS in the Rebuy Theme, or the widget's Style section. This CSS will load with Rebuy, making it so you don't need to add custom CSS to your Shopify Theme and make everything much cleaner to use! We suggest only adding Rebuy specific styling here, but you can add other styling here as well.
Remember! You can add CSS only to the widget settings as well.
NOTE! CSS is only as specific as you tell it to be. If you only want styling to apply to a specific Rebuy widget and not all of them, you'll need to state that! Examples below:
General Rebuy Language Selectors:
These selectors are similar to what can be found in your language settings. The button, super title, money, etc. You'll copy and paste whatever you'd like to use/ modify, add the CSS properties within the selector, then click Save in the Rebuy Theme/ Widget settings. You should see your changes being reflected after you refresh your page!
#rebuy-widget-XXXX { //will apply changes to everything within the widget. }
.super-title { //Widget's Super Title. }
.primary-title { //Widget's Primary Title. }
.description { //Widget's Description. }
.rebuy-product-title { //Widget's Product Title. }
.rebuy-product-price { //Widget's Product Price. }
.rebuy-product-options { //Widget's dropdown menu. }
.rebuy-button { //Widget's clickable button. }
.rebuy-money.sale { //Widget's displayed sale price. }
.rebuy-money.compare-at { //Widget's displayed compare at price. } .rebuy-money { //Widget's displayed price (no compare at/ sale). }
Common CSS Properties Used
The CSS properties listed below are the most commonly requested changes. Being able to change the font being used, aligning the text on the left, font-size, etc.
//Align the text on the left. text-align: left;
//Change the font being used. font-family: "font-goes-inside-these-quotes";
//Change font size. font-size: 12px;
//Change letter spacing. letter-spacing: 1px;
//Underline the text. text-decoration: underline;
//Make element unclickable. pointer-events: none;
//Make all letters uppercase (can also just change the language from widget settings). text-transform: uppercase;
//Change the background color of the element. background-color: #fff; //Remove all/add padding to all sides. padding: 0px;
//Specify side to remove/ add padding. padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;
//Remove all/add margin to all sides. margin: 0px;
//Specify side to remove/add margin. margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px;
Putting Selectors and Properties Together!
Now that you have a list of common selectors and properties, let's put them together. The properties are places INSIDE the CSS selector. Like so:
//A single selector with a single property: .the-selector { my: properties; }
//Multiple Properties: .the-selector { property: first; property: second; property: third; }
//Multiple Selectors (Specific to widget only):
//Replace with "XXXX" with the widget ID. #rebuy-widget-XXXX .the-selector { property: first; property: second; property: third; }
Add it to your Rebuy Theme or widget CSS settings!
Let's say we want to change our primary title styling for our widget, underline the product title, and make the price stand out more.
Pro Tip! If you aren't seeing your change reflected and you've confirmed your selector/ property is correct, add "!important" to the end of your property before the ";". Example below:
.primary-title {
font-family: "Helvetica";
text-align: left !important;
font-size: 22px;
letter-spacing: 1px;
text-transform: uppercase;
}
.rebuy-product-title {
text-decoration: underline !important;
}
.rebuy-money {
font-size: 20px;
}
Before Adding CSS:
After Adding CSS:
Now you're a master! Remember there are infinite things you can do with CSS. Hopefully, this helps you push your styling a little bit further. If you have any questions, reach out to support for help. If you want much more custom CSS, check out our experts mentioned above!