Customize Quote Form

This page explains how to control the content and appearance of the quote form that customers see when they request a quote.

---

1. Overview

The Customize Quote Form tab lets you configure:

• Which product and customer information appear in the quote pop-up

• Which fields customers must fill in

• The look and feel of the form so it match your store branding

You also have a live preview of:

• The Quote Form (before submission)

• The After Submit state (what customers see after sending a quote)

---

2. Product Information

This section controls which product details are displayed inside the quote pop-up.

You can toggle fields such as:

• Variant

  • Shows the chosen variant (e.g. size, color).

• SKU

  • Displays the SKU of each quoted item.

  • Highly recommended for B2B buyers working with SKU lists.

• Available Quantity

  • Shows current inventory quantity for the variant.

Advanced product information:

• Vendor

  • Shows the vendor or brand for each product.

• Type

  • Displays the product type.

• Barcode

  • Shows the product barcode if available.

Tip: For B2B use cases, keeping Variant and SKU visible is usually essential so buyers can verify they are quoting the correct items.

---

3. Form Fields

This section controls the fields that the customer must complete before submitting a quote.

There are three main field types:

3.1 Standard Information fields

Default information fields include:

• First Name

• Last Name

• Email

• Phone

• Shipping Address (with Country, Street, City, etc.)

Behavior:

• If the customer is logged in, these fields can be auto-filled using their Shopify profile.

3.2 Company information (Shopify Plus / B2B)

If you selected "B2B Store" as your store type, the form also shows Company Information, such as:

• Company name

• Location

• Shipping address

Notes:

• This information is synced from Shopify B2B.

• It cannot be edited directly in the quote form (Shopify remains the source of truth).

3.3 Custom fields

You can create additional fields to collect extra information specific to your business.

Supported custom field types include:

• Text

• Number

• Date

• Dropdown

• Checkbox list

• Radio buttons

• File upload

Examples of usage:

• Text / Number: For "Purchase Order Number" or "Target Price".

• Date: For "Desired Delivery Date".

• Dropdown / Radio / Checkbox: For "Budget Range" or "Installation Required?".

• File Upload: Allow customers to upload PDFs, specs, or images (e.g., "Logo for custom printing").

3.4 Additional fields (layout elements)

Additional fields help you organize the form:

• Heading: Add titles to group fields (e.g., “Project Details”, “Delivery Info”).

• Divider: Visually separate sections for better readability.

These elements do not collect data themselves but improve structure and clarity.

3.5 Managing Fields

For each field, you have simple controls:

• Show/Hide – control whether the field is visible using an “eye” toggle.

• Edit – change label text or placeholder using an edit/pencil icon.

• Delete – remove custom fields using a delete/trash icon.

You can also usually drag fields to reorder them, creating a natural flow for customers.

---

4. Form Styles

This section lets you style the form to match your storefront design.

General layout

• Border width – thickness of the form’s outline.

• Border radius – corner roundness of the form container.

Color scheme

You can customize colors for different form areas:

• General

  • Base fonts and backgrounds, including form background, text, and scrollbar.

• Form header

  • Background and text colors of the top header area of the form.

• Primary button

  • The main action button (e.g. “Submit Request”).

  • Configure normal and hover colors for background, border, and text.

• Secondary buttons

  • Additional buttons such as “Continue Shopping” or “Back to Store”.

  • Configure normal and hover colors for background, border, and text.

• Boxes/input fields

  • Background, border, and text colors for all input fields.

Adjust these to ensure the quote form feels like part of your theme, not a separate pop-up.

---

5. Preview States

At the top of the preview, you can switch between:

• Quote Form: The form customers see when they add products to quote or click the quote widget.

• After Submit: The confirmation state after the customer submits their quote.

Use these previews to:

• Check that field order, labels, and styling are clear.

• Ensure thank-you/confirmation messages look correct.

• Verify that the form is usable on both desktop and mobile layouts.