All Collections
Widgets
Enhance Widget Styling Using Custom CSS Code
Enhance Widget Styling Using Custom CSS Code

Streamline Your Widgets: Simple CSS Tricks for Impactful Widget Designs

Tom Eschler avatar
Written by Tom Eschler
Updated over a week ago

In the following sections, we'll dive into a variety of commonly used styling elements that can be significantly enhanced and personalized through the application of CSS code. These techniques will enable you to create more visually appealing widgets, elevating the overall user experience on your platform!

Where to Add CSS Styling Code in Rebuy?

Custom CSS can be directly integrated into the Rebuy Theme. By doing this, your CSS loads seamlessly with Rebuy, eliminating the need to modify your Shopify Theme. This approach not only streamlines the process but also maintains a cleaner and more organized setup for your site's design.

Here is where you can place your CSS code:

Rebuy Dashboard -> Manage Rebuy Theme -> Custom CSS Box

To make things more organized, you also have the option to place CSS styling code directly within a Widget’s Settings:


Widget Specific Styling

Suppose you're aiming to alter the style exclusively for a particular widget. Here's how to precisely target that specific widget by adding #rebuy-widget-XXXX before the Selector/Element you want to style.

For example:

#rebuy-widget-XXXX .primary-title { 

}

*Replace the XXXX with the widget id number.

We'll show how you can use styling properties within the brackets { } in the next section.

You can find the widget ID number in the Widget Settings "Placement" tab:


Changing Colors, Text alignment, and Fonts Etc. for Widgets Using Selectors/Elements

*Important Terms

  • Selector/Element: This is what you're styling. .primary-title is the selector. It specifies what you're targeting to make changes to. Using #rebuy-widget-XXXX with .primary-title means you're targeting the primary title of the widget. #rebuy-widget-XXXX .primary-title { }

  • Property: This is the aspect of the selector you're changing. color and font-family are properties. color changes the text color, and font-family changes the typeface of the text.

  • Comment code: like /* Widget background color */, is used in CSS to add notes or explanations. They're helpful for reminding yourself or informing others about what a specific part of the code is for.

Now let's explore some commonly used techniques that you can easily copy, paste, and modify to apply CSS for improving your widgets:

*Don't forget to add a space between the Selectors! All punctuation's shown below are crucial for your code to run!

/* Widget background color */
#rebuy-widget-XXXX {
background: #ffffff !important;
}

/* Change widget width on a page, change the percentage as needed. */
#rebuy-widget-XXXX {
width: 100% !important;
}

/* Widget Titles: super title, primary title, product title */
#rebuy-widget-XXXX .super-title {
color: #ff0000 !important;
font-family: "Helvetica";
font-size: 20px !important;
text-align: center !important;
font-weight: 400 !important;
}


#rebuy-widget-XXXX .primary-title {
color: #ff0000 !important;
font-family: "Helvetica";
font-size: 20px !important;
text-align: center !important;
font-weight: 400 !important;
}

#rebuy-widget-XXXX .rebuy-product-title {
color: #ff0000 !important;
font-family: "Helvetica";
font-size: 20px !important;
text-align: center !important;
}

/* Widget Product Prices */
#rebuy-widget-XXXX .rebuy-money {
color: #ff0000 !important;
}

/* Product slash/out Compare at Price */
#rebuy-widget-XXXX .compare-at {
color: #9a9a9a !important;
}

/* Widget Buttons */
#rebuy-widget-XXXX .rebuy-button {
background: #00b4ff !important;
color: #ffffff !important;
border-color: #00b4ff !important;
width: 100% !important;
height: 100% !important;
border-radius: 5px !important;
}

/* Remove "Powered by Rebuy" Text */
.powered-by-rebuy {
display: none !important;
}

/* Fix Checkboxes for Bundle widgets */
.rebuy-checkbox {
appearance: none !important;
-webkit-appearance: none !important;
padding: 0 0 0 15px !important;
}

.rebuy-checkbox:checked:before {
appearance: none !important;
-webkit-appearance: none !important;
display: inherit !important;
}

/* Hide the Quantity Buttons for a Gift With Purchase Widget Item */
.property-value-rebuy-gift-with-purchase .rebuy-cart__flyout-item-quantity-widget {
display: none;
}

/* Remove Product Page redirect links from item(s) returned in a widget. replace XXXXX with the widget's ID */
.rebuy-cart__flyout-item.property-value-XXXXX .rebuy-cart__flyout-item-product-title, .rebuy-cart__flyout-item.property-value-XXXXX .rebuy-cart__flyout-item-media {
pointer-events: none;
}

/* Reorder landing page color */
#rebuy-reorder-landing-page {
background-color: #F5E9E3 !important;
}

Mobile Phone Specific Styling

When it comes to tailoring styles specifically for mobile devices, media queries are your go-to solution. By employing media queries, you can ensure that your styles adapt seamlessly to smaller screens. Here's how you can use media queries to apply custom styles that will only take effect on mobile devices. Simply wrap your CSS rules within a Media Query Block like @media only screen and (max-width: 480px) { ... } to target screens smaller than 480 pixels, typically associated with mobile devices.

We can use a Media Query Block to change the button colors Etc. for Just Mobile Devices:

@media only screen and (max-width: 480px) { 
#rebuy-widget-16468 .rebuy-button {
background: #000 !important;
color: #ffff !important;
border-color: #000 !important;
width: 100% !important;
height: 100% !important;
border-radius: 0px !important;
}
}

Here's an example of the differences

Mobile view:

Desktop View:


Global Widget Styling

Suppose you're aiming to alter the style for all widgets. Here's how to target every widget by adding .rebuy-widget before the selector you're targeting.

For example:

.rebuy-widget .primary-title { } 

This will affect every widget and future widgets you add which could cause conflicting code for widget specific styling!


More Widget Elements You Can Style

We also have Widget Template code for developers who wish to customize widgets even further:

More Widget Properties You Can Use

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


*Please Note

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, and third-party integrations.

Please refer to our policy page Please be mindful of this when proceeding.


Did this answer your question?