> For the complete documentation index, see [llms.txt](https://magecomp.gitbook.io/shopify/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://magecomp.gitbook.io/shopify/apps/rfq-hide-price/customize.md).
# 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.