> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://support.app-hive.dev/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).

# How to customize widget elements with CSS

The Quotify widget exposes named CSS classes and data attributes on every important element. You can use these to hide, restyle, or script individual parts of the widget without depending on the widget's internal layout classes.

This guide is for advanced users who are comfortable writing Cascading Style Sheets (CSS) or JavaScript (JS). If you only want to change colors, fonts, or the corner style, see [How to customize the widget appearance](how-to-customize-the-widget-appearance.md) instead.



## What this is

The widget's Hypertext Markup Language (HTML) — the structure of the page that the customer sees — includes two kinds of hooks on each meaningful element:

* **CSS class** — A name that starts with `quotify-` (for example, `quotify-close-button`). A CSS class is a label you can target from a stylesheet using a selector like `.quotify-close-button { ... }`. A *selector* is the part of a CSS rule that tells the browser which elements the rule applies to.
* **Data attribute** — An attribute that starts with `data-quotify` (for example, `data-quotify="close-button"`). A data attribute is a piece of extra information attached to an element. JavaScript can read it to find elements in the Document Object Model (DOM), which is the live in-memory representation of the page.

Both hooks point at the same elements. CSS authors usually prefer classes; JavaScript authors usually prefer data attributes. Either works.

These hooks are guaranteed to stay stable across Quotify versions, while internal utility classes may change without notice.



## When you would use this

* **Hide an element you do not need.** For example, hide the variants table on certain products.
* **Restyle a specific button.** For example, change the close button color to match your brand.
* **Script behavior.** For example, run JavaScript when the customer reaches the thank-you screen.



## Reference: available hooks

The following hooks are available throughout the widget. Each row lists the element, its CSS class, and its data attribute.

### Container and shell

| Element | CSS class | Data attribute |
| ---- |
| Modal root | `quotify-widget` | `data-quotify="widget"` and `data-quotify-root` |
| Modal backdrop | `quotify-widget-backdrop` | `data-quotify="backdrop"` (id `quotify-widget-backdrop`) |
| Modal container | `quotify-widget-container` | `data-quotify="container"` (also `data-quotify-view="..."`) |
| Form wrapper | `quotify-form` | `data-quotify="form"` |
| Content scroll area | `quotify-content` | `data-quotify="content"` |
| Footer button row | `quotify-buttons` | `data-quotify="buttons"` |
| Loading overlay | `quotify-loading-overlay` | `data-quotify="loading-overlay"` |
| Close X)  button | `quotify-close-button` | `data-quotify="close-button"` |

The `data-quotify-view` attribute on the container reflects the current step (for example, `products-overview`, `contact-information`, `review`, `thank-you`).

### Step indicator

| Element | CSS class | Data attribute |
| ---- |
| Step container | `quotify-steps` | `data-quotify="steps"` |
| Step button | `quotify-step-button` | `data-quotify="step-button"` plus `data-quotify-step-index="1"` (1-based) |

### Product selection step

| Element | CSS class | Data attribute |
| ---- |
| Product card | `quotify-product-card` | `data-quotify="product-card"` plus `data-quotify-product-id="..."` |
| Variants table wrapper | `quotify-variants-table-wrapper` | `data-quotify="variants-table-wrapper"` plus `data-quotify-product-id="..."` |
| Variant row | `quotify-variant-row` | `data-quotify="variant-row"` plus `data-quotify-variant-id="..."` |
| Quantity input | `quotify-qty-input` | `data-quotify="qty-input"` plus `data-quotify-variant-id="..."` |
| Product actions wrapper | `quotify-product-actions` | `data-quotify="product-actions"` plus `data-quotify-product-id="..."` |
| Edit product button | `quotify-product-action quotify-product-action--edit` | `data-quotify="product-action"` plus `data-quotify-action="edit"` |
| Delete product button | `quotify-product-action quotify-product-action--delete` | `data-quotify="product-action"` plus `data-quotify-action="delete"` |

### Contact information step

| Element | CSS class | Data attribute |
| ---- |
| Step root | `quotify-contact-information` | `data-quotify="contact-information"` |
| Fieldset | `quotify-fieldset` | `data-quotify="fieldset"` plus `data-quotify-fieldset-id="..."` |
| Individual field | `quotify-field` | `data-quotify="field"` plus `data-quotify-field-id="..."` and `data-quotify-field-type="..."` |
| Field error message | `quotify-field-error` | `data-quotify="field-error"` |

### Review step

| Element | CSS class | Data attribute |
| ---- |
| Step root | `quotify-review` | `data-quotify="review"` |
| Products summary | `quotify-review-products` | `data-quotify="review-products"` |
| Fieldset summary | `quotify-review-fieldset` | `data-quotify="review-fieldset"` plus `data-quotify-fieldset-id="..."` |

### Thank-you screen

| Element | CSS class | Data attribute |
| ---- |
| Step root | `quotify-thank-you` | `data-quotify="thank-you"` |
| Close button | `quotify-close-window-button` | `data-quotify="close-window"` plus `data-quotify-action="close-window"` |

### Navigation buttons (footer)

All footer navigation buttons share the class `quotify-nav-button` and the attribute `data-quotify="nav-button"`. Each one also has a more specific modifier:

| Button | Modifier class | Data attribute |
| ---- |
| Next step | `quotify-nav-button--next` | `data-quotify-action="next"` |
| Previous step | `quotify-nav-button--prev` | `data-quotify-action="prev"` |
| Submit quote | `quotify-nav-button--submit` | `data-quotify-action="submit"` |
| Add to quote | `quotify-nav-button--add-to-quote` | `data-quotify-action="add-to-quote"` |
| Back to overview | `quotify-nav-button--back-to-overview` | `data-quotify-action="back-to-overview"` |
| Open product browser | `quotify-nav-button--open-product-browser` | `data-quotify-action="open-product-browser"` |
| Close window (thank-you) | `quotify-nav-button--close-window` | `data-quotify-action="close-window"` |



## Examples

### Hide the variants table

Hide the table of variants on the product card (for example, if you only sell single-variant products and the table is redundant):

```css
.quotify-variants-table-wrapper {
    display: none;
}
```

### Change the close button color

Change the color of the X button in the top-right corner of the widget:

```css
.quotify-close-button {
    color: #d33;
}
```

### Hide a specific field

Hide a specific form field by its field ID. Right-click the field in your storefront and use the browser's inspector to find the `data-quotify-field-id`.

```css
.quotify-field[data-quotify-field-id="42"] {
    display: none;
}
```

### Listen for the thank-you screen with JavaScript

Run code when the widget reaches the thank-you screen — useful for tracking conversions in an analytics tool:

```html
<script>
document.addEventListener('DOMContentLoaded', () => {
    const observer = new MutationObserver(() => {
        const container = document.querySelector('[data-quotify="container"]');
        if (container && container.dataset.quotifyView === 'thank-you') {
            console.log('Quote submitted');
            // Fire your tracking pixel or analytics event here
        }
    });
    observer.observe(document.body, { childList: true, subtree: true, attributes: true });
});
</script>
```



## Where to put the CSS

In the Shopify theme editor, open your active theme and locate your custom CSS area. Most themes provide a "Custom CSS" or "Custom Liquid" block for global styles. You can also add a `<style>` block to your `theme.liquid` layout if you are comfortable editing theme code.

You do not need to publish the changes to Quotify — these rules live on your storefront, not inside Quotify.



## Good to know

* Hooks are additive. The widget's existing utility classes are still present; the `quotify-*` hooks just sit alongside them.
* The product browser modal (the search overlay used by **Instant Add**) is not covered by these hooks at this time.
* The `data-quotify-product-id` and `data-quotify-variant-id` attributes use the Shopify product/variant IDs, which you can also see in your Shopify admin URLs.



## Related guides

* [How to customize the widget appearance](how-to-customize-the-widget-appearance.md)
* [How to open the quote cart from anywhere](how-to-open-quote-cart-from-anywhere.md) — uses the same `data-quotify-cart` attribute pattern