Articles on: Quotify

How to add a floating quote cart button

Quotify ships with a built-in theme block that adds a floating "Show Quote Cart" button to every page of your storefront. The button hovers on the side of the screen as customers browse and shows a small badge with the number of items in their quote cart. It is the quote-cart equivalent of a Shopify sticky add-to-cart bar.


When to use it


  • You want a permanent, always-visible way for customers to open their quote cart, no matter where they are in your store.
  • You want a mobile-friendly access point — the floating button works on phones where header navigation may be collapsed.
  • You do not want to edit any theme code or paste any HyperText Markup Language (HTML) into your theme.


If you would rather place a "Quote Cart" link in a specific spot — for example, your main navigation menu — see How to open the quote cart from anywhere, which uses an HTML snippet instead.


How to add it via the theme editor


  1. In your Shopify admin, go to Online Store > Themes.
  2. Click Customize on your active theme.
  3. In the theme customizer, click the App embeds icon in the left sidebar (it looks like a set of building blocks near the top of the sidebar).
  4. Find Sticky Quote Cart Button in the list.
  5. Click the toggle to turn it on.
  6. Click Save in the top-right corner.


The button will appear immediately on the storefront preview, anchored to the right edge of the screen.


Available settings


After enabling the embed, click the Sticky Quote Cart Button entry to expand its settings. You can adjust:


  • Button Text — The label shown on the button. The default is Show Quote Cart.
  • Background Color — The color behind the button. Default #ffffff (white).
  • Text Color — The color of the button label. Default #000000 (black).
  • Border Color — The color of the button's border. Default #000000 (black).
  • Button padding — The space between the text and the button edge, from 0 to 25 pixels. Default 10.
  • Button border radius — How rounded the button corners are, from 0 to 25 pixels. Default 4.
  • Custom Button CSS — A free-text field for any extra Cascading Style Sheets (CSS) you want to apply. CSS is the styling language browsers use to control colors, sizes, fonts, and layout. For example, you could enter font-weight: bold; to make the label bold.


Click Save in the top-right corner after making changes.


Visibility controls


The floating button automatically respects two settings from your Quotify dashboard:



You do not need to configure either of these on the block itself — they are picked up automatically.


How it differs from the HTML snippet approach


The floating button and the HTML snippet approach both open the same quote cart. The difference is where the trigger lives:


Floating button (this guide)

HTML snippet (open from anywhere)

Where you add it

Theme editor — App embeds

Anywhere in your theme code

Visible on every page

Yes

Only where you place it

Edit theme code required

No

Yes

Item-count badge

Yes (automatic)

Optional

Position on the page

Fixed to the right edge

Wherever you put the snippet


You can use both at the same time if you want — for example, a floating button on every page plus a "View Quote Cart" link in your main navigation.


Good to know


  • The Quotify app embed must also be enabled on your theme. If it is not, the floating button will not work. See How to add Quotify to your theme.
  • The item-count badge only appears when there is at least one item in the customer's quote cart.
  • The badge format is fixed at (:count) — for example, (3). If you want a different format, use the HTML snippet approach instead.
  • The button is anchored to the side of the viewport, so it stays visible while the customer scrolls.




Updated on: 11/05/2026

Was this article helpful?

Share your feedback

Cancel

Thank you!