All Collections
Widgets
Custom & Advanced Settings
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 For Widgets?

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

First click to a Widget you want to style from the Widgets Dashboard:

Once you are in the settings for the Specific Widget you want to style, open up the STYLES Tab:

Place CSS code directly within a Widget’s Settings -> Styles -> Custom CSS

In the Custom CSS Box, you can input CSS styling code that will be applied to your widget. Let's explore how to use CSS code to make changes.

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.


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-XXXXX before the Selector/Element you want to style.

For example:

#rebuy-widget-XXXXX .primary-title { 

}

*Replace the XXXXX with the widget id number.

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


Locating Your Widget's ID Number

You can find the Widget ID Number in TWO Places:

Widget Settings -> After the Widget Title

Or the Widget Settings -> "Placement" tab:


CSS Styling Tips For Widgets

*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-XXXXX with .primary-title means you're targeting the primary title of the widget. #rebuy-widget-XXXX .primary-title { }

    **** When using #rebuy-widget-XXXXX Replace the XXXXX with the widget id number.***

  • Properties: These specify the styling modifications to the element’s selector and are placed within curly brackets following the selector.
    For example, #rebuy-widget-12345 { background: #ffffff; } , background: is the property, and you assign it a value.
    Here, background: #ffffff sets the background color of Widget #12345 to white using the color hex #ffffff.
    *Ensure a semicolon ; follows every property-value pair in your CSS.

  • Comment code: Comments are enclosed in /* and */ in CSS. This is used to add notes or explanations. Comment code does not run as code. They're helpful for reminding yourself or informing others about what a specific part of the code is for. We recommend including the comment code alongside the code to maintain organization.

  • Use the !important tag to guarantee your style applies when it's being overridden by other theme styles. It's not always required but is included in this guide's code for precaution.

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


Widget Background Color

Place CSS styling code directly within a Widget’s Settings -> Styles -> Custom CSS

/* Widget background color */
#rebuy-widget-XXXXX {
background: #yourColorHex !important;
}

*Important!

  • Replace the XXXXX with the widget id number.

  • Replace yourColorHex with 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.

  • Be sure to substitute XXXXX with the widget's ID number.

  • Replace yourColorHex with the #hex number of the color you want to use.

/* Widget background color -FOR POPUP WIDGETS- */

#rebuy-widget-XXXXX .rebuy-widget-content {
background: #yourColorHex !important;
}


Widget Add to Cart Button's

Modify the color and text of the Add To Cart Buttons in Rebuy Widget's as needed. Extra styling options have been provided to allow for more text customization. Adjust, remove, or change these properties to suit your preferences.

Place CSS styling code directly within a Widget’s Settings -> Styles -> Custom CSS

Be sure to substitute XXXXX with the widget's ID number.

Replace yourColorHex with the #hex number of the color you want to use.

/* Widget Buttons */ 
#rebuy-widget-XXXXX .rebuy-button {
background: #yourColorHex !important;
color: #yourColorHex !important;
border-color: #yourColorHex !important;
width: 100% !important;
height: 100% !important;
border-radius: 4px !important;
/* border-radius amount for rounded corners. */
}

Important Note:

Additional styling properties are included for further customization. Feel free to adjust or omit them, or alter their values as you see fit.

  • border-color: property modifies the button's border color.

  • background: property modifies the Button's fill Color

  • color: property modifies the Button's TEXT Color

  • border-radius: property modifies the corners of the button.
    A higher px amount = more roundness. Use 0px for Sharp edges.

  • Replace yourColorHex with the #hex number of the color you want to use.


Changing Colors, Text alignment, and Fonts Etc. for Widget Elements

The CSS code below allows you to customize various visual elements of your widget, such as colors, text alignment, and fonts. You can apply these code snippets to different components of the widget.

/* Widget Super Title: */ 
#rebuy-widget-XXXXX .super-title {
color: #yourColorHex !important;
font-family: "Helvetica";
font-size: 20px !important;
text-align: center !important;
font-weight: bold !important;
}

/* Widget Primary Title: */
#rebuy-widget-XXXXX .primary-title {
color: #yourColorHex !important;
font-family: "Helvetica";
font-size: 20px !important;
text-align: center !important;
font-weight: bold !important;
}

/* Widget Product Titles: */
#rebuy-widget-XXXXX .rebuy-product-title {
color: #yourColorHex !important;
font-family: "Helvetica";
font-size: 20px !important;
text-align: center !important;
}

/* Widget Product Regular Price */
#rebuy-widget-XXXXX .rebuy-money {
color: #yourColorHex !important;
}

/* Widget Product SALE Price */
#rebuy-widget-139858 .rebuy-money.sale {
color: #yourColorHex !important;
}

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

Adjust any of these properties as needed to fit your design requirements.

  • replace yourColorHex with the #hex number of the color you want to use.

  • Ensure to replace XXXXX with the actual widget ID to apply these styles.

  • font-family: property changes the font of the text. While Rebuy typically uses the default font from your theme, you can specify a different font through CSS if necessary. The code block below will use Font "Helvetica" as an example.

  • For a wider range of unique CSS properties, explore further at: w3schools.com


Adjusting Widget Sizing

Modify the width of a Widget using the code below. To center the widget on the page, set the margin to auto. You can alter the width percentage to fit your needs; the default setting is width: 100%.

Be sure to substitute XXXXX with the widget's ID number.

/* Change widget width - change the percentage as needed. */
#rebuy-widget-XXXXX {
margin: auto !important;
width: 70% !important;
}

*If the widget is configured as a popup see below.


Popup Widget Sizing

This CSS code snippet is used for adjusting the size of a popup widget. If your widget is configured to appear as a popup, applying this code to the widget will scale its content to 70% of its original size. The !important rule ensures that this scaling overrides any other size settings that may be specified elsewhere.

Feel free to adjust the scale value as needed to achieve the desired size.

Be sure to substitute XXXXX with the widget's ID number.

#rebuy-widget-XXXXX .rebuy-widget-content {
scale: 0.7 !important;
}

If you feel that the popup widget is too large, using the CSS scale property will shrink down the size of the popup, for example:


Fix Checkboxes for Bundle/Addon widgets

Sometimes, the checkboxes in Bundle and Addon widgets may appear distorted due to conflicts with Shopify theme code.

For example:

If you encounter this issue, adding the following CSS snippet can help correct the appearance of the checkboxes:

/* 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;
}

*After placing CSS fix, example:


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-XXXXX .rebuy-button {
background: #yourColorHex !important;
color: #yourColorHex !important;
border-color: #yourColorHex !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

Here's a compilation of all the Widget CSS Selectors for enhancing the visual appeal and applying style modifications to widgets. These selectors are applicable across various widget types. While most selectors are universal to all widget types, specific selectors unique to certain widget types are noted in the accompanying code comments.

Widget Element List

/* Rebuy's Standard Widget CSS Selectors */ 
#rebuy-widget-XXXX .rebuy-widget { }
#rebuy-widget-XXXX .rebuy-widget-container { }
#rebuy-widget-XXXX .rebuy-widget-content { }
#rebuy-widget-XXXX .rebuy-modal-close { }
#rebuy-widget-XXXX .rebuy-timer { }
#rebuy-widget-XXXX .rebuy-timer-title { }
#rebuy-widget-XXXX .rebuy-timer-minutes { }
#rebuy-widget-XXXX .rebuy-timer-seconds { }
#rebuy-widget-XXXX .super-title { }
#rebuy-widget-XXXX .primary-title { }
#rebuy-widget-XXXX .description { }
#rebuy-widget-XXXX .rebuy-product-grid { }
#rebuy-widget-XXXX .rebuy-product-block { }
#rebuy-widget-XXXX .rebuy-product-media { }
#rebuy-widget-XXXX .rebuy-product-image { }
#rebuy-widget-XXXX .rebuy-product-info { }
#rebuy-widget-XXXX .rebuy-product-title { }
#rebuy-widget-XXXX .rebuy-variant-title { }
#rebuy-widget-XXXX .rebuy-product-review { }
#rebuy-widget-XXXX .rebuy-star-rating { }
#rebuy-widget-XXXX .rebuy-star-rating-value { }
#rebuy-widget-XXXX .rebuy-star-rating-background { }
#rebuy-widget-XXXX .rebuy-star-rating-foreground { }
#rebuy-widget-XXXX .rebuy-review-count { }
#rebuy-widget-XXXX .rebuy-product-price { }
#rebuy-widget-XXXX .rebuy-money { }
#rebuy-widget-XXXX .sale { }
#rebuy-widget-XXXX .compare-at { }
#rebuy-widget-XXXX .rebuy-product-description { }
#rebuy-widget-XXXX .rebuy-product-options { }
#rebuy-widget-XXXX .rebuy-select { }
#rebuy-widget-XXXX .rebuy-color-swatches { }
#rebuy-widget-XXXX .rebuy-color-swatch { }
#rebuy-widget-XXXX .rebuy-color-input { }
#rebuy-widget-XXXX .rebuy-color-label { }
#rebuy-widget-XXXX .rebuy-size-swatches { }
#rebuy-widget-XXXX .rebuy-size-swatch { }
#rebuy-widget-XXXX .rebuy-size-input { }
#rebuy-widget-XXXX .rebuy-size-label { }
#rebuy-widget-XXXX .rebuy-product-actions { }
#rebuy-widget-XXXX .subscription-checkbox { }
#rebuy-widget-XXXX .rebuy-checkbox-label { }
#rebuy-widget-XXXX .checkbox-input { }
#rebuy-widget-XXXX .checkbox-label { }
#rebuy-widget-XXXX .subscription-frequency { }
#rebuy-widget-XXXX .product-quantity { }
#rebuy-widget-XXXX .rebuy-select-wrapper { }
#rebuy-widget-XXXX .rebuy-label { }
#rebuy-widget-XXXX .rebuy-button { }
#rebuy-widget-XXXX .rebuy-modal-actions { }
#rebuy-widget-XXXX .powered-by-rebuy { }
#rebuy-widget-XXXX .decline { }

/* Rebuy's Addon Widget CSS Selectors. Unique Selectors Specific for Addon Widgets */
#rebuy-widget-XXXX .rebuy-addon { }
#rebuy-widget-XXXX .rebuy-addon__items { }
#rebuy-widget-XXXX .rebuy-addon__item { }
#rebuy-widget-XXXX .rebuy-addon__item-checkbox { }
#rebuy-widget-XXXX .rebuy-addon__item-image { }
#rebuy-widget-XXXX .rebuy-addon__item-info { }
#rebuy-widget-XXXX .rebuy-addon__item-product-title { }
#rebuy-widget-XXXX .rebuy-addon__item-variant-title { }
#rebuy-widget-XXXX .rebuy-addon__item-product-review { }
#rebuy-widget-XXXX .rebuy-addon__item-product-price { }
#rebuy-widget-XXXX .rebuy-addon__item-product-options { }
#rebuy-widget-XXXX .rebuy-addon__item-product-description { }
#rebuy-widget-XXXX .rebuy-addon__item-learn-more { }
#rebuy-widget-XXXX .rebuy-addon__item-learn-more-link { }
#rebuy-widget-XXXX .rebuy-addon__subtotal { }
#rebuy-widget-XXXX .rebuy-addon__subtotal-label { }
#rebuy-widget-XXXX .rebuy-addon__subtotal-value { }

/* Rebuy's Bundle Widget CSS Selectors. Unique Selectors Specific for Bundle Widgets */
#rebuy-widget-XXXX .rebuy-bundle { }
#rebuy-widget-XXXX .rebuy-bundle__images { }
#rebuy-widget-XXXX .rebuy-bundle__image { }
#rebuy-widget-XXXX .rebuy-bundle__image-item { }
#rebuy-widget-XXXX .rebuy-bundle__image-divider { }
#rebuy-widget-XXXX .rebuy-bundle__actions { }
#rebuy-widget-XXXX .rebuy-bundle__actions-price { }
#rebuy-widget-XXXX .rebuy-bundle__actions-price-label { }
#rebuy-widget-XXXX .rebuy-bundle__actions-price-value { }
#rebuy-widget-XXXX .rebuy-bundle__actions-buttons { }
#rebuy-widget-XXXX .rebuy-bundle__items { }
#rebuy-widget-XXXX .rebuy-product-checkbox { }
#rebuy-widget-XXXX .rebuy-product-label { }

/* Rebuy's Pre Purchase Widget CSS Selectors. Unique Selectors Specific for Pre Purchase Widgets */
#rebuy-widget-XXXX .rebuy-pre-purchase-block { }
#rebuy-widget-XXXX .rebuy-button-container { }
#rebuy-widget-XXXX .rebuy-button--selected { }
#rebuy-widget-XXXX .rebuy-button__remove { }
#rebuy-widget-XXXX .rebuy-button__text { }
#rebuy-widget-XXXX .rebuy-button__upsell-add { }
#rebuy-widget-XXXX .rebuy-button__upsell-remove { }
#rebuy-widget-XXXX .bottom-container { }
#rebuy-widget-XXXX .rebuy-button-actions { }
#rebuy-widget-XXXX .rebuy-pre-purchase-actions { }
#rebuy-widget-XXXX .rebuy-button--mlr-10 { }

/* Rebuy's Thank You Page Widget CSS Selectors. Unique Selectors Specific for Thank You Page Widgets */
#rebuy-widget-XXXX .rebuy-thank-you-block { }


More Widget Properties You Can Use

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

Widget Template Code

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


*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?