Allow My Customers to Set the Price
Most of the pricing options on your Shift4Shop store involve creating products with static prices assigned to them. However, in some cases, you might need to specify a product where your shoppers can set the price.
For example, perhaps you'd like to offer a donation type of product where the amount is set by the customer, or you'd like to offer a gift certificate where the customer can personally set the gift certificate amount themselves.
For these situations, we've created the following article, which will show you how to customize a template that will accommodate a custom price. Below are the steps to follow:
For this tutorial, we will detail the basic concept of creating a modified version of your store's default listing template and editing it to allow for custom pricing. You will then upload this modified file to your store and use it for whichever products you'd like to offer custom pricing on. To successfully use this tutorial, you will need the following:
Some basic HTML knowledge
Either an HTML editor like Dreamweaver or a simple text editor like Notepad.exe.
FTP access to your site
Patience and a little bit of "Trial & Error" time
Editing your Template:
The first step will involve retrieving a copy of the listing template normally used for your product listings. We'll be editing this file and using the modified version for your custom-priced products. So first, we'll need to retrieve the appropriate template file from your store's FTP folders. The process will differ depending on whether your site uses an HTML5 theme or a non-HTML5 theme.
FTP into your account's FTP folders and navigate to /web/assets/templates/common-core.
Within the folder, find listing_0.html and download it to your desktop.
Once the file is on your desktop, rename the file and change its name from listing_0.html to listing_10.html.
Now that the file is downloaded and re-named, you are ready to edit it
4. Open up the file in your HTML or text editor.
5. Using the program's search function (Usually CTRL-F), search for the following comment tags:
<!--START: ITEMPRICE--> and <!--END: ITEMPRICE-->
6. In the code found between these two tags, find the "[price]" code and change it to "Enter Amount Below."
7. Save your progress and continue.
The above change is needed so that the product's "Your Price" section indicates to your shoppers that their desired amount will be entered further down the page. Of course, you may change the wording as needed if you want it to say something other than "Enter Amount Below."
To continue:
8. With the file still open, now search for the following comment tags:
<!--START: qtybox--> and <!--END: qtybox-->
9. Replace the code within these tags with the following:
<label>Enter Amount $</label>
<input type="text" size="5" name="specialamount" value="0">
<input type="hidden" size=3 name="qty-0" value=1 onChange="validateValues(document.add,1);" class="txtBoxStyle" />
Save your file.
Upload the new file to your Theme Folder.
Your Theme Folder will be located via FTP by navigating to "/web/assets/templates/[theme-name]" If you do not know your site's current theme name, navigate to Settings > Design > Themes & Styles in your Shift4Shop Online Store Manager, where the name will be shown at the top next to the label "Selected Theme."
Setting Your Product's Listing Template
Now that the template has been modified and uploaded, you will need to assign the listing template you created so that it applies to the custom price product(s).
Log into your Shift4Shop Online Store Manager and go to Products > View/Edit.
Select the product you would like to modify and click on its Edit button.
Click on the product's Advanced tab.
4. For "Listing Template," select "Style 11."
Once complete, the product will allow your customers to set the purchase price as they would like.