Custom CSS

To customize an element in the widget, you need to find the right class (or selector) and then apply your CSS rules. Below is a step-by-step guide.

1. Inspect the Element

The first step is identifying the element you want to style.

1. Right-click on the element in your browser (Chrome, Firefox, or Edge).
2. Select “Inspect” (or “Inspect Element”).
3. The developer tools will open, showing the HTML structure of the page on the left and CSS styles on the right.

For example: if you want to customize the title, you need to right-click on it

You can see its HTML element like this

2. Locate the Class or ID

Inside the HTML, look for attributes like:

<div class="qvl-title">Buy more, save more</div>

• class="qvl-title" → The class name is qvl-title.

3. Copy the Selector

Once you have the class or ID:

• Class → .product-title

If the element is nested, you may need a more specific selector. For example:

<div class="qvl-offer-box__header__heading">
	<div class="qvl-title">Buy more, save more</div>
</div>

To style only the title inside the card:

.qvl-offer-box__header__heading .qvl-title {
  color: blue;
}

4. Write Your Custom CSS

Now, add your custom CSS to the app:

Example:

.qvl-offer-box__header__heading .qvl-title {

    color: red;

    font-size: 20px;

}

5. Test and Refine

• Refresh the page after saving your CSS.
• If the style doesn’t apply:
• • Make sure you’re targeting the right selector.
  • Try increasing specificity (e.g., .qvl-offer-box__header__heading .qvl-title instead of just .qvl-title).
  • Use !important only as a last resort:

.qvl-title {
  color: red !important;
}

6. Bonus: Use Browser Tools to Test CSS Live

In the browser developer tools:

• Add or edit CSS rules directly in the “Styles” panel.
• See instant changes before you paste them into Custom CSS.

✅ Summary:

To add custom CSS, inspect the element → find its class or ID → write your CSS rule → test and refine. With these steps, you can take control of your site’s appearance without touching the core code.

Updated on: 25/09/2025