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

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

Step indicator

Product selection step

Contact information step

Review step

Thank-you screen

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:

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):

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

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

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

<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 open the quote cart from anywhere — uses the same data-quotify-cart attribute pattern

Updated on: 11/05/2026