Creating and Managing Front End Quotes

• Overview
• Enable the Feature in Store Settings
• Configure Quote Statuses
• Theme Layout Changes for V2 Foundation Themes
• Configure Quote List and Quote Detail Page Layouts
• Important Notes
• Troubleshooting
• Summary

This article explains how to enable and configure the Create Quotes From Frontend feature so customers can create, view, and edit quotes directly from the storefront. By the end of this guide, you will know how to turn on the required settings, control quote edit permissions by status, verify theme updates, and configure the My Quotes list and Quote Detail pages.

 

Enable the Feature in Store Settings

This feature allows customers to create quotes from the storefront without admin involvement. Supported entry points include the Shopping Cart, Wish List, Saved Wish List Detail, One Page Checkout, and individual product actions from the Product Details page.

1. Go to Settings → Orders → Quotes → General.
2. Enable Customer is Allowed to Create Quotes.
3. Select the Default Quote Status For Customer Created Quotes.
4. Enable Show Quotes Menu in My Account if customers should see the My Quotes link in their account navigation.

Note: These settings were previously located under Settings → Orders → General. They now live on their own dedicated page.

Important: If Customer is Allowed to Create Quotes is disabled, Create Quote buttons do not appear and the My Quotes menu is hidden.

Configure Quote Statuses

Quote edit access on the storefront is controlled by each quote status.

1. Go to Settings → Quotes → Quote Statuses.
2. Open each status you want to review.
3. Set Can Customer Edit Quote based on whether customers should be able to modify quotes in that status.

Note: By default, Can Customer Edit Quote was set to true for all existing quote statuses. Please review your current statuses and adjust them to match your workflow.

Theme Layout Changes for V2 Foundation Themes

This section applies to V2 Foundation Themes only. On upgrade, the platform attempts to patch supported theme layout files automatically through post-update events. Stores using legacy or custom themes must apply these updates manually.

Important: Even for V2 Foundation themes, verify that the expected layout and merge code updates are present after upgrade.

Shopping Cart Page

The Shopping Cart page receives styling and layout updates for the quote modal and button placement.

CSS update in base.css

The quote popup class .popupQuote is added alongside the existing save cart popup selectors. A new CSS block is also included for the quote modal heading.

/** Save Quote Popup **/
.popupQuote[id*="dvQuoteName"] h1 { text-indent: -9999px; }
.popupQuote[id*="dvQuoteName"] h1:before { font-family: var(--font-awesome); content: "\f07a"; }
.popupQuote[id*="dvQuoteName"] h1:after {
  content: "Name your quote";
  text-indent: 0;
  float: left;
  margin-left: 50%;
  transform: translateX(-50%);
  width: 100%;
}
/** END Save Quote Popup **/

Shopping Cart page layout additions

• Add the $$CREATEQUOTEBUTTON$$ merge code immediately after the existing $$SAVECARTBUTTON$$.
• Add the modal title CSS rule that references the Save Quote Modal Title theme setting.
• Add the JavaScript block that updates the quote modal icon, subtitle, and input placeholder.

$$CREATEQUOTEBUTTON[class=btn,btn-outline-dark mt-1]$$

.popupQuote[id*="dvQuoteName"] h1:after { content: "##THEMESETTING[Save Quote Modal Title,value]##" }

// Update Save Quote Modal
const saveQuoteClose = document.querySelector('[id*="dvQuoteName"] #popupCloseQuote');
const saveQuoteHeader = document.querySelector('[id*="dvQuoteName"] h1:first-of-type');
let saveQuoteInput = document.querySelector('[id*="dvQuoteName"] input[id*="txtQuoteName"]');
saveQuoteClose.insertAdjacentHTML("afterEnd", '##THEMESETTING[Save Quote Modal Icon,value]##');
saveQuoteHeader.insertAdjacentHTML("afterEnd", "<span class='text-center'>Save this quote</span>");
saveQuoteInput.setAttribute("placeholder", "Quote Name");

Product Details Page

The Product Details page adds quote actions after the <!-- END Add to Cart --> comment.

Add to Quote dropdown

<!-- Add to Quote -->
<ac:visibilityarea id="ddQuotesList">
  <div class="">
    <ac:visibilityarea id="btnVariantMatrixAddToQuote">
      <span class="ProductDetailsActions-addToQuoteDropdownLabel mb-0 mt-0 mb-0">Quote</span>
    </ac:visibilityarea>
    <ac:visibilityarea id="btnAddToQuote">
      <div class="mt-2"></div>
      <!-- spacing hack to tackle both matrix and regular layout -->
    </ac:visibilityarea>
    <span class="ProductDetailsActions-addToQuoteDropdown d-grid col-12 p-0">
      $$QUOTESDROPDOWN$$
    </span>
  </div>
</ac:visibilityarea>

Add to Quote button

<ac:visibilityarea id="btnAddToQuote">
  <div class="ProductDetailsActions-addToQuote d-grid col-12 p-0 mt-2">
    $$ADDTOQUOTE[class=btn,btn-outline-dark,wishlistbuttontestclass]$$
  </div>
</ac:visibilityarea>
<!-- END Add to Quote -->

Variant Matrix Add to Quote

$$VARIANTMATRIXADDTOQUOTE[class=btn,btn-dark]$$

Product Group Add to Quote

<div style="display: flex; gap: 10px; justify-content: flex-start;">
  <div class="right ProductGroupAddToQuote">$$PRODUCTGROUPADDTOQUOTEBUTTON[class=btn,btn-dark]$$</div>
  <div class="right ProductGroupAddToCart">$$PRODUCTGROUPADDTOCARTBUTTON[class=btn,btn-dark]$$</div>
</div>

Verify: Open the Product Details page layout in the theme editor and confirm that $$ADDTOQUOTE$$ and $$QUOTESDROPDOWN$$ are present.

Wish List Page

Add the Create Quote button after the Find A List navigation link.

<li>$$CREATEQUOTEBUTTON[class=btn,btn-outline-dark]$$</li>

Saved Wish List Detail Page

Use the same placement pattern as the Wish List page by adding the button after Find A List.

<li>$$CREATEQUOTEBUTTON[class=btn,btn-outline-dark]$$</li>

One Page Checkout Page

Add the Create Quote link before the existing Edit Cart link.

<ac:visibilityarea id="lnkCreateQuoteFromCart">
  $$CREATEQUOTELINK$$ |
</ac:visibilityarea>

This visibility area ensures the link only appears when quote creation is applicable.

Account Menu Widget

The default AccountMenuWidget.html layout now includes a My Quotes menu item. For customized account menu layouts, add the entry manually after Order Approvals.

<ac:visibilityarea id="lnkOrderApprovals">
  <li class="profMenu-orderApprovals">$$ORDERAPPROVALS$$</li>
</ac:visibilityarea>

<!-- Add here: -->
<ac:visibilityarea id="lnkQuotes">
  <li class="profMenu-quotes">$$QUOTES$$</li>
</ac:visibilityarea>

Configure Quote List and Quote Detail Page Layouts

After upgrade, two new theme pages are available for frontend quote management:

• Theme Editor → My Account → Quote List
• Theme Editor → My Account → Quote Detail

Quote List Page

The Quote List page shows customer-related quotes in the frontend My Account area. It includes basic filters for quote search and a table of results.

Available filters include:

• Quote Name
• Order Salesperson
• Quote Statuses
• Date

Default Quote List layout

<ac:pagelayout id="QuoteListPage">
  <ac:widgetarea id="Top"></ac:widgetarea>
  <div class="MyAccount-wrap row">
    <div class="MyAccount-body">
      <h1 class="QuoteList-header">My Quotes</h1>
      <span class="QuoteList-noRecords">$$NORECORDS$$</span>
      <ac:visibilityarea id="QuoteListTools">
        <div class="QuoteList-filters MyAccountSection card mb-3">
          <div class="QuoteList-filters-body QuoteListFilters MyAccountSectionInner card-body">
            <h3 class="QuoteListFilters-header MyAccountSectionHeader">Filters</h3>
            <div class="QuoteListFilters-body row">
              <div class="ml-2 col-auto mb-2"> $$QUOTENAMEFILTER$$ </div>
              <div class="ml-2 col-auto"> $$ORDERLISTSTATUSFILTERS$$ </div>
              <div class="ml-2 col-auto"> $$ORDERLISTDATEFILTERS$$ </div>
              <div class="ml-2 col-auto"> $$ORDERLISTSALESPERSONFILTERS$$ </div>
              <div class="mt-2"> $$ORDERLISTFILTERSAPPLYBUTTON[class=btn,btn-dark]$$ </div>
            </div>
          </div>
        </div>
      </ac:visibilityarea>
      <div class="QuoteList-orders MyAccountSection card mb-3">
        <h3 class="QuoteList-orders-header MyAccountSectionHeader card-header">Quotes</h3>
        <div class="QuoteList-orders-body QuoteListOrders MyAccountSectionInner card-body">
          <div class="QuoteListOrders-wrap">
            <table class="QuoteListTable" width="100%" border="0" cellpadding="3" cellspacing="0">
              <ac:layoutarea id="ItemHeader">
                <thead class="QuoteListHead">
                  <tr class="QuoteListHead-row">
                    <th class="QuoteListHead-reorder">$$EDITLINKHEADER$$</th>
                    <th class="QuoteListHead-quoteName">$$QUOTENAMEHEADER$$</th>
                    <th class="QuoteListHead-date">$$ORDERDATEHEADER$$</th>
                    <th class="QuoteListHead-orderId">$$ORDERNUMLINKHEADER$$</th>
                    <th class="QuoteListHead-total">$$ORDERTOTALHEADER$$</th>
                    <th class="QuoteListHead-status">$$ORDERSTATUSHEADER$$</th>
                    <th class="QuoteListHead-shippingAddress">$$SHIPPINGADDRESSHEADER$$</th>
                  </tr>
                </thead>
              </ac:layoutarea>
              <ac:layoutarea id="ItemDetail">
                <tr class="table-item QuoteListItem">
                  <td class="QuoteListItem-reorder">
                    <ac:if setting="Display Links on My Account" value="link">
                      $$EDITLINK[class=hide-notext]$$
                      <ac:elseif setting="Display Links on My Account" value="button">
                        $$EDITLINK[class=hide-notext,btn,btn-dark,btn-sm]$$
                      </ac:elseif>
                    </ac:if>
                  </td>
                  <td class="QuoteListItem-quoteName">$$QUOTENAME$$</td>
                  <td class="QuoteListItem-date">$$ORDERDATE$$</td>
                  <td class="QuoteListItem-orderId">$$ORDERNUMLINK$$</td>
                  <td class="QuoteListItem-total">$$ORDERTOTAL$$</td>
                  <td class="QuoteListItem-status">$$ORDERSTATUS$$</td>
                  <td class="QuoteListItem-shippingAddress">$$SHIPPINGADDRESS$$</td>
                </tr>
              </ac:layoutarea>
              <ac:layoutarea id="ItemDetailAlt">
                <tr class="table-item table-itemAlt QuoteListItem QuoteListAltItem">
                  <td class="QuoteListItem-reorder alt">
                    <ac:if setting="Display Links on My Account" value="link">
                      $$EDITLINK[class=hide-notext]$$
                      <ac:elseif setting="Display Links on My Account" value="button">
                        $$EDITLINK[class=hide-notext,btn,btn-sm,btn-dark]$$
                      </ac:elseif>
                    </ac:if>
                  </td>
                  <td class="QuoteListItem-quoteName alt">$$QUOTENAME$$</td>
                  <td class="QuoteListItem-date alt">$$ORDERDATE$$</td>
                  <td class="QuoteListItem-orderId alt">$$ORDERNUMLINK$$</td>
                  <td class="QuoteListItem-total alt">$$ORDERTOTAL$$</td>
                  <td class="QuoteListItem-status alt">$$ORDERSTATUS$$</td>
                  <td class="QuoteListItem-shippingAddress alt">$$SHIPPINGADDRESS$$</td>
                </tr>
              </ac:layoutarea>
              <ac:layoutarea id="ItemFooter">
              </ac:layoutarea>
            </table>
          </div>
        </div>
      </div>
    </div>
    <ac:widgetarea id="Bottom"></ac:widgetarea>
  </div>
</ac:pagelayout>

Available merge codes for the Quote List page

Note: This functionality currently covers the quote list for the logged-in customer and includes access to quote view or edit behavior from that list.

Quote Detail Page

The Quote Detail page allows customers to view or modify a quote based on the quote’s current status.

• The default layout includes $$QUOTENAMETEXTBOX$$ at the top.
• The page uses the Large Shopping Cart widget and standard cart merge codes to render quote contents.
• The bottom of the page includes $$SAVECHANGESBUTTON$$.
• Remove item icons are styled as trash icons using inline JavaScript.

Important: No separate template is required for edit and read-only behavior. The page mode is controlled entirely by the quote status using Can Customer Edit Quote.

Admin Order Edit Screen

On the admin side, the Edit Order screen now includes a Quote Name field so admins can update the quote name directly.

Important Notes

• Customer is Allowed to Create Quotes controls both the frontend Create Quote buttons and the My Quotes menu item.
• All automatic layout patching only runs on V2 Foundation Themes.
• Stores using older or custom themes must complete the manual layout updates described in this article.
• In the Shopping Cart, the $$CREATEQUOTEBUTTON$$ merge code is added next to the existing Save Cart button rather than replacing it.
• If Customer is Allowed to Create Quotes is unchecked, the My Quotes menu item does not appear in My Account.

Troubleshooting

Create Quote buttons do not appear

• Confirm Settings → Orders → Quotes → General → Customer is Allowed to Create Quotes is enabled.
• Verify the required merge codes were added to the relevant page layouts.
• For non-V2 Foundation themes, confirm the manual layout changes were applied.

My Quotes is missing from My Account

• Make sure Show Quotes Menu in My Account is enabled.
• Confirm Customer is Allowed to Create Quotes is also enabled.
• If the account menu layout is customized, verify that the $$QUOTES$$ menu item was added to AccountMenuWidget.html.

Customers can open quotes but cannot edit them

• Review the quote’s current status in Settings → Quotes → Quote Statuses.
• Enable Can Customer Edit Quote for any status that should allow frontend editing.

Quote List page is available but layout looks incomplete

• Open Theme Editor → My Account → Quote List and compare the page to the default layout.
• Verify the required filter and list merge codes are present.

Quote Detail page is read-only when it should be editable

• Confirm the quote’s status has Can Customer Edit Quote enabled.
• Check that the Quote Detail page includes the expected editable controls and $$SAVECHANGESBUTTON$$.

Summary

The Create Quotes From Frontend feature lets customers create quotes across key storefront pages, access them through My Quotes, and view or edit them based on quote status. To implement it successfully, enable the feature settings, review quote status edit permissions, verify theme layout updates, and confirm the Quote List and Quote Detail pages are configured correctly. For V2 Foundation Themes, many layout updates are patched automatically, but custom and legacy themes require manual implementation.