Offer Your Price Button

• Navigate to Offer Your Price Button settings.
• These settings control the appearance and behavior of the Offer Your Price button displayed on the product page.

Enable/Disable the Suggested Price:

To Enable the Suggested Price:

• Click on the Show Suggested Price toggle button to enable.
• When the toggle is ON, the Suggested Price will appear next to the Offer Your Price button on the product page.

Suggested Price Label

• You’ll see a text input field labeled Suggested Price Label.
• By default, it displays Suggested Price, but you can change it to whatever suits your store.

Button Style

• Here are the available customization options for the Offer Your Price button:

Shape

• Rounded: The button has smooth, rounded edges.
• Square: The button has sharp, squared edges.
• Adjust according to your design preferences.

Width:

• Custom values: Adjust button width according to your design preferences.

Button Background Color:

• Set the background color of the button using a hex code (e.g., #DD2727 for a red color).

Button Text Color:

• Set the color of the text on the button using a hex code (e.g., #000000 for black text).

Popup Settings

• These settings control the design of the popup/modal that appears when the customer clicks the Offer Your Price button:

Popup Variant Style:

• Background Color: Set the background color of the popup using a hex code (e.g., #FFFFFF for a white background).
• Text Color: Set the color of the text inside the popup using a hex code (e.g., #000000 for black text).
• Border Color: Set the border color of the popup to help it stand out from the rest of the page. You can use a hex code (e.g., #CCCCCC for a light gray border).

Predefined Option Style

• These settings control the appearance of predefined options inside the popup, such as the customization options for the offer form:

Options Style:

• Pill: The options appear in a pill-shaped format with rounded edges.
• Dropdown: The options appear in a dropdown menu, providing a more compact display.

• Option Background Color: Set the background color of each option using a hex code (e.g., #FFFFFF for a white background).

• Option Text Color: Set the text color for each option using a hex code (e.g., #000000 will make the text appear black).

• Option Border Color: Set the border color of each option using a hex code (e.g., #CCCCCC for a light gray border).

Front-End-Impact

• Go to the website.
• Navigate to the Catalog page.
• Click on the Product.

• The user is now on the Product page.

• The customer will now see the Offer Your Price button displayed on the product page.
• Upon clicking the button, a Popup/Modal will appear on the screen.
• This popup contains a custom price field, allowing the customer to enter and submit their desired price for the product.

• You can now see the Offer Your Price button on the product page, reflecting all the customizations you’ve made.
• The Button Style will appear as configured — including shape, width, background color, and text color.
• Inside the popup, any Predefined Options you set (e.g., pill or dropdown style) will be visible with your chosen background, text, and border colors.

• When clicked, the Popup will display with your selected background color, text color, and border styling.

• For Variable Products.