How to set up 'Add to Quote' button in your store?
This guide will help you details step by step to set up the display of 'Add to Quote' button in your storefront
Last updated
This guide will help you details step by step to set up the display of 'Add to Quote' button in your storefront
Last updated
Step 1: In the page of Configurations, switch the toggle of the 'Request for Quote' module to enable the feature
Step 2: Click 'Configure', then go to 'Settings' icon button to access the page of Installations
Step 3: Select the theme that you want to install the 'Add to quote' button, then check the compatibility of our app block to your theme
Step 4: Click 'Enable button on Cart page', then in your Theme customization, when you add one product to your Cart page, the 'Add to quote' button should appear
Step 5: Click 'Save' to save the configurations of your Theme editor, then now the 'Add to quote' button is displayed on your Cart page now.
By accessing the Tab "Request for Quote" rule, merchants can control the rule apply to specific customers and specific products
Step 1: Accessing the Customization Options
Navigate to the Request for Quote section within the BSS B2B Portal.
Select Configurations.
You will find a panel labeled 'Add to quote button' under the "Request for Quote" setup, which allows you to customize the "Add to Quote" button.
Step 2: Display the "Add to Quote" button on product page or collection pages
Product Page: By checking this box, the button will appear on the individual product page.
Collection Page: By checking this box, the button will appear on the product listings page (where multiple products are displayed).
For further customization, you can select where exactly the button will appear on the Product Page. The dropdown labeled Position on product page offers several options. These options let you choose the placement of the "Add to Quote" button relative to other product details or controls on the page:
Under Product Title: Displays the "Add to Quote" button just below the product's title.
Under Product Price: Places the button below the product price display.
Under Variant Picker: Displays the button below the variant selector (if your product has multiple variants like colors or sizes).
Under Quantity Selector: Positions the button just under the quantity input field.
Under 'Add to Cart' Button (currently selected): Places the "Add to Quote" button directly beneath the "Add to Cart" button.
Step 3: Customizing the Text
Text Settings allow you to change the appearance of the button label.
Text Label Customization:
To change the button label, click the link next to the information icon labeled "You can change the text of button label in Translations".
Font Size:
Use the slider under Font Size to adjust the size of the text on the button. The current size is set to 21 px, but you can drag the slider to make the text larger or smaller based on your preference.
Text Formatting:
You can apply text formatting options such as Bold, Italic, and Underline by selecting the respective buttons.
Alignment:
Choose the alignment of the text within the button. Options include:
Left (Align text to the left)
Center (Align text to the center, currently selected)
Right (Align text to the right)
Text Color:
To change the color of the text, click on the Text Color box (currently set to black, #000000). You can select a new color from the color picker or enter a specific hex code.
Step 4: Customize the Button:
Button Settings control the appearance of the actual button.
Editor Mode:
You can switch between different editor modes (currently set to Default Editor).
Corner Radius:
Adjust the button's corner radius using the slider. The current setting is 15 px, which gives the button rounded corners. You can increase or decrease the radius to make the corners more or less rounded.
Border Thickness:
Control the thickness of the button's border by adjusting the Border Thickness slider. The current thickness is set to 3 px.
Button Color:
Change the main background color of the button. The current button color is set to #ffffff (white).
Outline Color:
Customize the button's outline (border) color. The current outline color is #ff0000 (red). You can change this by selecting a new color from the color picker or inputting a different hex code.
Step 5: Previewing the Changes
On the right side of the screen, you will see a Preview panel. This panel provides a live preview of how the "Add to Quote" button will look after applying your customizations. As you adjust text formatting, alignment, and button styles, the changes will be reflected here in real time.
Step 6: Saving Your Changes
Once you are satisfied with the customizations, click the Save button located at the top-right corner of the screen.
If you wish to discard any changes made during the session, use the Discard button next to the Save button.
Once you have set up and installed the 'Add to Quote' feature on your theme, the 'Add to Quote' button should appear as shown in the image below on your storefront.
When customers click the 'Add to Quote' button, a modal will appear, confirming that the product has been added to the quote. At this stage, customers can choose between viewing their quote or continuing to shop.
By selecting 'View Quote', customers will be redirected to the Quote Portal, where all products added to the quote will be displayed. On this page, they can enter their proposed prices and provide any additional information through the form you've configured in our app.
After successfully submitting their quote, customers will be directed to a Thank You page. If needed, we can assist with customizing this page to suit your brand's requirements.
If you have any problem while using our feature, please feel free to contact us via Live Chat or via support-sbc@bsscommerce.com
