Customize the 'Add to Quote' button

This article will provide a detailed step-by-step guide to customize the 'Add to Quote' button in your storefront.

Step 1: In the page of Quoting & Ordering , navigate to the 'Request for Quote' module, then click 'Configure' to access the Request for Quote tab.

Step 2: Navigate to the 'Settings' tab. In this section you can customize and preview the 'Add to Quote' button on your storefront.

Step 3: Select where you want to display the 'Add to quote" button.

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 4: Customize the appearance of text in the button.

• You can switch between different editor modes (currently set to Default Editor).

• To change the label of the button into a different text instead of 'Add to quote', click the link next to the information icon labeled 'You can change the text of button label in Translations'.

• Use the slider under Font Size to adjust the size of the text on the button. The current size is set to 12 px, but you can drag the slider to make the text larger or smaller based on your preference.

• You can apply text formatting options such as Bold, Italic, and Underline by selecting the respective buttons.

• 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)

• 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 5: Customize the appearance of the button.

• You can switch between different editor modes (currently set to Default Editor).

• Adjust the button's corner radius using the slider. The current setting is 0 px, which gives the button no rounded corners. The higher the radius, the more rounded the corners will be.

• Control the thickness of the button's border by adjusting the Border Thickness slider.

• Change the main background color of the button. The current button color is set to #ffffff (white).

• Customize the button's outline (border) color. You can change this by selecting a new color from the color picker or entering a different hex code.

Step 6: Preview changes.

On the right hand 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 7: Saving your changes

• Once you are satisfied with the customizations, click the Save button located at the top corner of the screen.

• If you wish to cancel all changes made during the session, use the Discard button next to the Save button.

If you have a problem, please feel free to reach us at [e-mail] or Live Chat if you need any assistance.