> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.qikify.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 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
![](https://storage.crisp.chat/users/helpdesk/website/-/3/3/f/6/33f605886cba4e00/image_13phc0h.png)
You can see its HTML element like this
![](https://storage.crisp.chat/users/helpdesk/website/-/3/3/f/6/33f605886cba4e00/image_17yy12d.png)

## 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;
}
```
![](https://storage.crisp.chat/users/helpdesk/website/-/3/3/f/6/33f605886cba4e00/image_qoco7z.png)

## 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.