This guide shows you how to customize the look and feel of your Rebuy Product Page "Complete the look" Widgets with easy to use CSS snippets. Each section focuses on a different part of the layout. Copy a snippet. Paste it into your theme’s custom CSS. Adjust colors, sizes, and spacing to match your brand.
Edit your Widgets using Rebuy Preview Mode
Before making any changes, it's recommended to install a copy of your Widget to test on first! Use Rebuy Preview Mode to review your updates before publishing them live.
Where to Add CSS Styling for Widgets
You have the ability to simply place CSS styling code directly within a Specific Widget’s Settings.
Log in to Your Rebuy Dashboard:
Open your web browser and login to the Rebuy Admin page.
Navigate to the Widgets Tab:
Once logged in, locate the sidebar on the left side of your Rebuy Dashboard.
Click on the "Merchandising Widgets" tab. This will take you to the Widgets Dashboard where you can manage all your widgets.
Select your Product Page Cross-Sell Widget:
In the Widgets Dashboard, find the list of your active widgets and find the Widget you wish to edit.
Or create a new widget: How To Create A Standard Product Page Recommendation Widget
Access Your Widget's Settings:
Open the widget and go to the Styles tab.
Add Custom CSS Code:
In the Styles section, enter your CSS code in the text box.
If a widget doesn't include a Style's Tab with a Custom CSS Box, CSS customizations are not supported. This applies to widgets such as the Checkout Extensions Widget, Post Purchase Widgets, and the Gift With Purchase Widget.
Using Your Widget's ID Number For CSS
Since the Widget CSS Editors are global, always scope your CSS to your specific widget to avoid affecting other widgets on your site!
Locating Your Widget's ID Number
The Widget CSS Editors are GLOBAL, it's important to scope any css code to your specific widget so that they don't override other widgets!
Example:#rebuy-widget-12345 .primary-title { }
In this guide, snippets will use
#rebuy-widget-12345Replace the12345with your widget id number. Without this change, your code will not work!
Additional CSS Tips
Here are some additional CSS styling tips and key terms to remember.
Selector/Element: This is what you're styling. Each part of the widget has a specific selector. For example .primary-title is a selector.
To identify selectors for customization, you can use your browser's "Inspect Element" tool, like Chrome's Developer Tools.
Properties & Values: Properties define styling for a selector, written inside curly brackets. Example: #rebuy-widget-12345 { background: #ffffff; } - here, background: is the property and the color hex is the value. Every property must have a value!
For a wider range of unique CSS properties, explore further at: w3schools.com
Comment code: Comments in CSS use /* Your CSS Note */ Use them to add notes or explanations for your code. It does not execute as part of the code.
Now let's explore some commonly used techniques that you can easily copy, paste, and modify to apply CSS for improving your Product Page widgets.
Widget Background Color
/* Widget background color */
#rebuy-widget-12345 {
background: #AddYourColorHex;
}
Be sure to substitute
12345with the widget's ID number.Replace
AddYourColorHexwith the #hex number of the color you want to use.
Popup Widget Background Color
If the widget is configured as a popup, the process to change its background color differs slightly. Use the following CSS code to adjust the background color of the popup widget.
/* Popup Widget background color */
#rebuy-widget-12345 .rebuy-widget-content {
background: #AddYourColorHex;
}
Widget Title, Super Title & Description
Adjust the color, font style, size for Widget titles.
Add/remove or adjust properties from the snippets below as needed.
Primary Title:
Styles the main heading text of the widget for prominence and readability.
/* Widget Primary Title: */
#rebuy-widget-12345 .primary-title {
color: #AddYourColorHex; /* Text Color */
font-family: "Montserrat"; /* Choose your font */
font-size: 20px;
text-align: center;
font-weight: bold;
}
Super Title:
Styles the smaller heading displayed above the primary title for added context.
/* Widget Super Title */
#rebuy-widget-12345 .primary-title {
color: #AddYourColorHex; /* Text Color */
font-size: 14px;
}
Widget Description:
Styles the descriptive text beneath the titles to match your widget’s design.
/* Widget Description */
#rebuy-widget-12345 .description {
color: #AddYourColorHex; /* Text Color */
font-size: 14px;
}
Product Blocks
Customize how product recommendations appear in your Product Page Widget.
Replace
12345with your widget’s ID NumberReplace
#AddYourColorHexwith your color's #color hex.Add/remove or adjust properties from the snippets below as needed.
Product Images
Style the product images within each product block, controlling size and corner shape.
Widget Product Images:
Styles the product images within each product block, controlling size and corner shape.
/* Widget Product Images: */
#rebuy-widget-12345 .rebuy-product-block .rebuy-product-media a.rebuy-product-image {
width: 100% !important;
height: 100% !important;
border-radius: 5px !important; /* 0px makes sharp corners */
/* increasing border-radius amount for rounded corners. */
}
Product Titles
Style the product titles within each product block of the Product Page Widget.
Widget Product Titles:
Styles the product titles and links within each product block to match your store’s branding.
/* Widget Product Title: */
#rebuy-widget-12345 .rebuy-product-title,
#rebuy-widget-12345 .rebuy-product-title-link {
color: #AddYourColorHex; /* Text Color */
font-size: 16px;
}
Variant titles (the variant option's dropdown)
Styles the variant dropdown selector for each product block. Control text color, size, and corner shape.
/* Widget Variant Dropdown */
#rebuy-widget-12345 .rebuy-select {
color: #AddYourColorHex; /* Text Color */
font-size: 16px;
border-radius: 0px; /* 0px makes sharp corners */
/* increase border-radius px amount for rounded corners. */
}
Product Prices
Control sale and compare-at price colors and sizes. Use a strong color for sale prices to draw attention. Keep sizes consistent with your product text.
Product Price:
Styles the regular product price displayed in the widget.
/* Widget Sale Price: */
#rebuy-widget-12345 .rebuy-money {
color: #AddYourColorHex; /* Regular Price Color */
font-size: 16px;
}
Sale Price:
Styles the discounted sale price to differentiate it from the regular price.
/* Widget Sale Price: */
#rebuy-widget-12345 .rebuy-money.sale {
color: #AddYourColorHex; /* Sale Price Color */
font-size: 16px !important;
}
Compare at Price:
Styles the slash-out price shown alongside a discounted sale price.
/* Widget Compare at slash-out Price: */
#rebuy-widget-12345 .rebuy-money.compare-at {
color: #AddYourColorHex; /* Compare at Price Color */
font-size: 16px !important;
}
Product "Add to Cart" Button's
Style Add to Cart buttons. Set background, text color, borders, size, and corner style. Add a hover color for feedback when customers point or tap.
Widget Add to Cart Buttons:
Styles the “Add to Cart” buttons in the widget, controlling color, border, font, and corner shape.
/* Product Page Widget add to cart Buttons */
#rebuy-widget-12345 .rebuy-button {
background: #AddYourColorHex; /* Background color */
color: #AddYourColorHex; /* Text color */
border: 2px solid #AddYourColorHex; /* Border size, style and color */
font-size: 16px; /* Font size */
border-radius: 5px !important; /* 0px makes sharp corners */
/* increasing border-radius amount for rounded corners. */
}
Styling Tip: Add more styling properties for unique effects.
Additional Product Block Elements
The dropdown below includes additional Product Block elements for your Product Page Widgets.
Product Block Element List
Product Block Element List
For more specific elements refer to Rebuy's Widget Template Code.
The Widget CSS Editors are GLOBAL, it's important to scope any css code to your specific widget so that they don't override other widgets!
Example:#rebuy-widget-12345 .primary-title { }
Widget Product Titles:
.rebuy-product-info
.rebuy-product-title
.rebuy-product-title-link
.rebuy-product-vendor-container
.rebuy-product-vendor
.rebuy-variant-title
.rebuy-product-description
.rebuy-product-options
Widget Product Variants:
.rebuy-variant-title
.rebuy-product-options
.rebuy-select
.rebuy-product-options__option
.rebuy-product-options__option--oos
.rebuy-size-input
.rebuy-size-label
Widget Product Reviews:
.rebuy-product-review
.rebuy-star-rating
.rebuy-star-rating-value
.rebuy-star-rating-background
.rebuy-star-rating-foreground
.rebuy-review-count
Widget Product Quantity:
.product-quantity
Widget Subscription Options:
.subscription-frequency
.rebuy-product-actions
.subscription-checkbox
.rebuy-checkbox-label
.checkbox-input
.rebuy-checkbox
.checkbox-label
.rebuy-select-wrapper
.rebuy-label
Rebuy Support Policy for Customizations
Our tools also allow for customization of widget behavior, including hiding elements or tailoring recommendations through CSS and data source rules. Please note advanced configurations or custom templates fall outside standard support.
At Rebuy, we are committed to providing exceptional support for features and functionalities within the standard Rebuy package. However, our support services do not extend to third-party plugins or customizations beyond the scope of Rebuy.
SUPPORT POLICY
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
Third-party integrations
Please refer to our policy page Please be mindful of this when proceeding.
Get matched with the right Service Partner
If you don’t have access to a developer, we can connect you with our partner team to discuss your project and explore options for one of our accredited experts to assist you.
Find the perfect partner for your project or let us introduce you to one of our trusted partners for free. You can book a consultation here: