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!

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.

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:

You can find the Widget ID Number in TWO Places:

Widget Settings -> After the Widget Title

Or the Widget Settings -> "Placement" tab:

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

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

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.

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.

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.

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.

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

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.

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:

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:

*After placing CSS fix, example:

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:

Here's an example of the differences

Mobile view:

Desktop View:

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:

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.

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

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