Customize
The Customize section allows merchants to customize how the RFQ (Request for Quote) buttons, quote widget, and RFQ success message appear on their storefront.
Step 1: Open the Customize Section
From the Shopify admin, go to:
Apps → RFQ Request Quote & Hide Price → Customize
The Customize page contains different settings for controlling the storefront RFQ design.
Step 2: Configure Button Style
The Button Style section allows merchants to customize the appearance of the RFQ buttons displayed on product pages.
2.1 Select Language
The Language dropdown allows merchants to select the language in which the RFQ button text will be displayed.
Example: If the store targets English-speaking customers, select English.
Why use it? To display RFQ-related button text in the appropriate language for the store's customers.
2.2 Button Color
The Button color option changes the background color of the RFQ button.
Example:
If the store's primary brand color is blue, the merchant can set the RFQ button background to blue.
Why use it? To make the RFQ button match the store's branding.
2.3 Button Hover Color
The Button hover color controls the button's background color when a customer moves their mouse over it.
Example:
Normal state:
Request Price by Email
When the customer hovers over it, the button changes to a darker shade.
Why use it? It gives customers visual feedback when interacting with the button.
2.4 Font Color
The Font color controls the text color displayed inside the RFQ button.
Example:
Background: Blue Text: White
This creates a clear contrast and makes the button easier to read.
2.5 Font Hover Color
The Font hover color controls the text color when the customer hovers over the RFQ button.
Why use it? It allows merchants to create a different hover effect and maintain good text visibility.
2.6 Button Width
The Button width setting allows merchants to control how wide the RFQ button appears.
Example:
A merchant can increase the width so that:
Request Price by Email
fits properly without looking cramped.
Why use it? To ensure the button fits the store's product-page design.
2.7 Button Height
The Button height setting controls the vertical size of the RFQ button.
Example:
If the store uses larger buttons throughout the product page, the merchant can increase the RFQ button height to match them.
2.8 Request Price by Email Text
This field allows merchants to customize the text displayed on the email RFQ button.
Default example:
Request Price by Email
Custom example:
Get a Quote by Email
Why use it? Merchants can use wording that better matches their store's terminology.
2.9 Request Price by Phone Text
This field allows merchants to customize the text displayed on the phone RFQ button.
Default example:
Request Price by Phone
Custom example:
Call Us for Pricing
Why use it? To make the call-to-action clearer and more relevant to customers.
Step 3: Configure Quote Widget
The Quote Widget allows merchants to display a floating RFQ button on their storefront.
3.1 Enable Quote Widget
Turn on:
Enable quote widget
Once enabled, the floating quote widget will appear on the storefront.
Example:
A customer is browsing different product pages. Instead of going back to find the RFQ button, they can click the floating Quote widget to access the quotation functionality.
Why use it? It keeps the RFQ option easily accessible while customers browse the store.
3.2 Widget Background Color
The Background color setting controls the background color of the floating quote widget.
Example:
A merchant can use the store's primary brand color.
Why use it? To keep the floating widget consistent with the storefront design.
3.3 Widget Font Color
The Font color controls the color of the text displayed inside the quote widget.
For example:
Quote
can be displayed in white on a dark background.
Why use it? To maintain good readability and contrast.
3.4 Widget Text
The Widget text field allows merchants to change the text displayed on the floating widget.
Example:
Default:
Quote
Custom:
Request a Quote
Why use it? A merchant can use a more descriptive call-to-action to make the RFQ feature easier for customers to understand.
3.5 Widget Position
The merchant can choose where the floating quote widget appears on the storefront.
Available options shown in your screenshot include:
Bottom right
Half bottom right
Half top right
Bottom left
Half bottom left
Half top left
Example:
If the store's live-chat button is already positioned at the bottom right, the merchant can place the RFQ widget somewhere else to prevent the two buttons from overlapping.
Why use it? To position the quote widget where it is visible without interfering with other storefront elements.
Step 4: Check the Quote Widget Preview
The Preview section displays how the quote widget will look on the storefront.
Check:
Widget position
Widget text
Widget color
Button appearance
Overall placement on the product page
Why use it? Merchants can verify the widget's appearance before applying the changes to their storefront.
Step 5: Configure Design Modal Box
The Design Modal Box controls the success message displayed after a customer successfully submits an RFQ form.
5.1 Success Message Type
The merchant can select how the success message should appear after form submission.
For example:
Pop-up modal
Toast-style notification, if available
Example:
After the customer submits the RFQ:
Form successfully saved!
appears in a popup.
Why use it? It immediately confirms to the customer that their RFQ request was submitted successfully.
5.2 Modal Color
The Modal color controls the background color of the success popup.
Example:
A merchant can use the same background color as their store's branding.
5.3 Border Color
The Border color controls the color of the modal's border.
Why use it? To make the success popup visually match the store's design.
5.4 Font Color
The Font color controls the color of the text displayed inside the success modal.
Example:
Form successfully saved!
The merchant can select a color that provides sufficient contrast against the modal background.
5.5 Font Size
The Font size setting controls the size of the success message text.
Example:
A merchant can increase the font size if they want the confirmation message to be more noticeable.
5.6 Button Color
The Button color controls the background color of the button displayed inside the success popup.
For example:
OK
The merchant can match the button color with their store's primary color.
5.7 Button Font Color
The Font color option under the button settings controls the color of the text displayed on the button.
Example:
Button background: Dark color Button text: White
5.8 Success Message
The Success message field allows merchants to customize the message displayed after a successful RFQ submission.
Default example:
Form successfully saved!
Custom example:
Your quote request has been submitted successfully!
Why use it? A customized message gives customers clear confirmation that their request has been received.
5.9 Button Text
The Button Text field allows merchants to customize the text displayed on the success popup button.
Default:
OK
Custom example:
Continue
or
Close
Why use it? Merchants can use wording that matches the rest of their website.
Step 6: Check the Design Modal Preview
The Preview section shows how the success popup will look after the customer submits the RFQ form.
For example:
✓ Form successfully saved! OK
Merchants can use this preview to check the colors, font, message, and button before saving.
Step 7: Save the Changes
After completing all design settings, review the preview and click Save.
The selected design settings will then be applied to the RFQ elements on the storefront.
Last updated