How to create a "Make an Offer" button for the product page in a BigCommerce store

By default, the BigCommerce templates display the product page containing the product details and 3 more buttons: "Add to Cart", "Add to Wishlist" and "Buy in bulk and save" (when applicable). This article will show how to create a "Make an Offer" button to receive custom offers from customers.

The Concept

This feature will use the regular contact form provided by Bigcommerce in order to send the customer offer to the store owner. We are going to modify the BigCommerce templates and add some functionality! Be prepared, there are a several modifications to be made.

Installation

Linking the necessary files in the templates

First of all, you will have to download the following files and upload them to the server via WebDAV. Just create a new directory named offer in the folder called /content/. So, the path to that directory will be /content/offer/.
Here are the files in a .zip archive:

• Make an Offer App For Bigcommerce

After uploading the files to /content/offer/, we'll open the template file called product.html and add the following links to the code, right after the body tag:

<script type="text/javascript" src="%%GLOBAL_ShopPath%%/content/offer/bs.js"></script>
<script type="text/javascript" src="%%GLOBAL_ShopPath%%/content/offer/load.js"></script>
<link href="%%GLOBAL_ShopPath%%/content/offer/button.css" type="text/css" rel="stylesheet" />

Adding the modal window code

Within that very same template file (product.html), just before the body tag closes, insert the code below. This code creates the modal window that will appear when the "Make an Offer" button is clicked.

<span id="urlp" style="display:none">%%GLOBAL_ShopPath%%</span>
<div id="my-modal" class="modal hide fade">
    <div class="modal-header">
        <a href="#" class="close" data-dismiss="modal">×</a>
        <h3></h3>
    </div>
    <div class="modal-body">
    </div>
</div>

As of this moment, the functionality is added to the product page; all we have left to do is to create the contact form and the Make an Offer button. Because we have the template files opened, we are going to add the button first and then we're going to take care of that contact form.

Adding the button

The next step is the placement of the button. This will vary from store to store. I will simply provide the code and you'll place it wherever you would like to. I prefer that button to appear inline with the product price. To do that, open the file called Panels/ProductDetails.html and insert the button code in the price div. The template will look like this:

<div class="DetailRow PriceRow" style="%%GLOBAL_HidePrice%%">
    <div class="Label">%%GLOBAL_PriceLabel%%:</div>
    <div class="Value">
        <em class="ProductPrice VariationProductPrice">%%GLOBAL_ProductPrice%%</em>
        %%GLOBAL_IncludingExcludingTax%% %%GLOBAL_YouSave%%
        <button style="float:right" class="btn primary" data-keyboard="true" data-backdrop="true" data-controls-modal="my-modal">Make an Offer</button>
    </div>
</div>

And, as you probably noticed, the code for the button is the following:

<button style="float:right" class="btn primary" data-keyboard="true" data-backdrop="true" data-controls-modal="my-modal">Make an Offer</button>

For those of you who do not want the button to be inline with the price, the button code is shown above, place it where you would like it to appear!

Creating the contact form

All you have to do is to create a new Web Page (Website Content > Create a Web Page) and set it to use a contact form by checking the option "Allow people to send questions/comments via a contact form". If you want to provide some info, or an introduction, just write in the content box.

VERY IMPORTANT: The page name should be Make an Offer and the URL should be optimized. It will look like this: [your domain]/make-an-offer/

Before saving, make sure that the newly created page does not show in the menu by deselecting the box that says "Yes, show this web page on the navigation menu".

We're almost done!

You probably noted that the BigCommerce templates contain elements with their own IDs and classes. What we're going to do now is to add an ID to a page element: the page content. This is not complicated; just open the file called PageContent.html and add an ID to the BlockContent div: id="bstr". The code should look like this:

<div class="Block Moveable Panel" id="PageContent">
    %%GLOBAL_PageNameOptimizerScriptTag%%
    <h2>%%GLOBAL_PageTitle%%</h2>
    %%GLOBAL_PageNameOptimizerNoScriptTag%%
    <div class="BlockContent" id="bstr">
    %%GLOBAL_PageDescriptionOptimizerScriptTag%%
        %%GLOBAL_PageContent%%
    %%GLOBAL_PageDescriptionOptimizerNoScriptTag%%
    </div>
</div>

This is it! You can now accept offers from your customers. Do not forget to check the email address you have set as a recipient for the contact form, from time to time, because you're gonna get some exciting offers!

If you have any improvements, or would like to say thanks just comment below!