Add custom CSS

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.

Caution

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.

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.

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

Most appearance changes are already settings — start here.

Note

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.

Caution

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.

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.

Note

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.

Finding what to target

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

Inspect the quote button on your own storefront to find what to target.

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.

Note

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.

A few practical rules

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

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.

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 — the button settings to try first
• Match your theme style — let the form follow your theme automatically
• Contact support — ask for a snippet