> For the complete documentation index, see [llms.txt](https://docs.samita.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.samita.io/sa-request-a-quote/settings/custom-css.md).

# Add custom CSS

Use the app's own style settings first, and add CSS in your theme only for the few things they don't cover.

The app's style settings cover most of what stores need. When they don't — a particular border radius, a tweak that should only apply on mobile — you can add CSS of your own.

{% hint style="warning" %}
This is the one genuinely technical page in this documentation. If you aren't comfortable with CSS, describe what you want to <support@samita.io> instead. The team can usually supply the exact snippet, and CSS you never write is CSS that can't break when your theme updates.
{% endhint %}

## Start with the built-in settings

Almost every appearance change people reach for CSS to make is already a setting in **Quote settings** > **Customize**. Check these before writing anything.

<table><thead><tr><th width="260">Where</th><th>What you can set</th></tr></thead><tbody><tr><td><strong>Button &#x26; widget</strong> > <strong>Style</strong></td><td><strong>Button type</strong> (Filled / Outline / Text link), <strong>Size</strong> (Medium / Large / Full width), <strong>Text color</strong>, <strong>Background color</strong> and <strong>Font size</strong>.</td></tr><tr><td><strong>Quote form</strong> > <strong>Style</strong></td><td>A style preset, plus <strong>Match theme styling if possible</strong>.</td></tr><tr><td><strong>Quote form</strong> > <strong>Customize text</strong></td><td><strong>Font style</strong>.</td></tr><tr><td><strong>Quote form</strong> > <strong>Customize form color</strong></td><td><strong>Title bar color</strong>, <strong>Title bar background</strong>, <strong>Color</strong>, <strong>Background color</strong>, <strong>Border color</strong> and <strong>Quote popup primary color</strong>.</td></tr><tr><td><strong>Quote cart page</strong> > <strong>Enable Quote Cart Widget</strong></td><td><strong>Text color</strong> and <strong>Background color</strong> — these are the only two the floating widget takes.</td></tr></tbody></table>

<figure><img src="https://2993310686-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIvNtDAMNVIdy5nl9kiOU%2Fuploads%2Fgit-blob-e187e595304e56dbc1276f8f833874a6521e0561%2Fscreenshot-quote-settings-button-styles.png?alt=media" alt="The Style section of the Button and widget tab, showing Button type, Size, Text color, Background color and Font size"><figcaption><p>Most appearance changes are already settings — start here.</p></figcaption></figure>

{% hint style="info" %}
**Match theme styling if possible** does a lot of the work on its own: "Theme styling applies on your storefront and is not shown in this preview." Turn it on and look at your live storefront before deciding the form needs CSS. See [Match your theme style](/sa-request-a-quote/quote-form/match-theme-style.md).
{% endhint %}

{% hint style="warning" %}
One job CSS should never be given is hiding a price or a buy button. **Advanced settings** > **Hide price** has proper settings for that, including **Hide Add To Cart button** and **Hide Buy Now button**. A CSS rule leaves the price in the page, where it can flash before your stylesheet loads — see [Hide Add to Cart and Buy now](/sa-request-a-quote/hiding-prices/hide-buy-buttons.md).
{% endhint %}

## Where to keep your CSS

Wherever you keep custom CSS, keep it somewhere you can find again and undo. CSS kept in your own theme has a useful side effect: it is versioned with the theme, so duplicating the theme before you edit gives you something to roll back to.

{% hint style="info" %}
Work through the built-in settings above before you write anything. If you can't tell whether a change belongs in a setting or in CSS, ask <support@samita.io> first — it saves you maintaining a rule you never needed.
{% endhint %}

## Finding what to target

Right-click the element on your storefront and choose **Inspect**. That shows you the class names to write rules against.

<figure><img src="https://2993310686-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIvNtDAMNVIdy5nl9kiOU%2Fuploads%2Fgit-blob-228d1efc6842b244a307ff0a232c0b697f21b848%2Fscreenshot-storefront-product-page.png?alt=media" alt="A storefront product page with the quote button below Add to cart, ready to be inspected in the browser"><figcaption><p>Inspect the quote button on your own storefront to find what to target.</p></figcaption></figure>

Two things are worth knowing before you start:

* The quote button renders with whatever **Button text** you set, in the place you picked under **Button position** — so check **Product page button position** before you go looking for it.
* The floating quote widget, labelled **Quote (n)**, sits in a container with the class `grfq-quote-widget-container`.

{% hint style="info" %}
Can't find the button on a collection page to inspect it? Hover a product card. On modern themes the app attaches it to the theme's own quick-add control, so it sits at zero opacity until the card is hovered and then appears as a small icon rather than a labelled button. That is the theme's behaviour, not a missing style — see [Quote button on collection pages](/sa-request-a-quote/collecting-quote-requests/button-on-collection-pages.md).
{% endhint %}

## A few practical rules

<table><thead><tr><th width="270">Rule</th><th>Why</th></tr></thead><tbody><tr><td>Change one thing at a time</td><td>When something breaks you'll know which rule did it.</td></tr><tr><td>Test on mobile</td><td>Most quote requests come from phones, and a desktop-only tweak often breaks there.</td></tr><tr><td>Keep a copy elsewhere</td><td>Paste your CSS into a note as well, so you can restore it if needed.</td></tr><tr><td>Avoid <code>!important</code> where you can</td><td>It wins today and makes every future change harder.</td></tr><tr><td>Comment every rule</td><td>In six months, an unexplained block of CSS is something nobody dares delete.</td></tr></tbody></table>

## After a theme change

Start with the app embed on the new theme. It is enabled in your theme, and until it is enabled nothing the app does appears on your storefront — see [Enable the app in your theme](/sa-request-a-quote/getting-started/enable-app-in-theme.md).

Then check your CSS. It is written against your theme's markup, so after a theme switch or a major theme update, look at your quote button, quote form and floating widget — rules may need adjusting.

## Next steps

* [Change button text and colors](/sa-request-a-quote/collecting-quote-requests/change-button-style.md) — the button settings to try first
* [Match your theme style](/sa-request-a-quote/quote-form/match-theme-style.md) — let the form follow your theme automatically
* [Contact support](/sa-request-a-quote/help/contact-support.md) — ask for a snippet


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.samita.io/sa-request-a-quote/settings/custom-css.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.