Buy the Measurement - Minimum and Maximum Input - Different Display Price from Product Price

Article Summary

Buy The Measurement is limited in the sense that minimum and maximum inputs can not yet be set up. Use this article to find out how to create these limits to customer input for specific products, or groups of products.

Difficulty: Moderate
Time Required: 10 to 15 Minutes

Part 1: Create New BTM Asset


Within your themes' editor create a new asset called "btm-enhanced.min.js.liquid" and save it with the following lines of minified codes.

Part 2: Edit theme.liquid


Open up theme.liquid and just before the closing head tag insert the following line of code.

Part 3: Edit product.liquid


Open up product.liquid and just before the closing form tag insert the following lines of code. Each line will be explained below and you can edit them to your liking.

NOTE "e1" can be replaced with any variable name you please.

Part 4: Making Changes (Explaining Step 3)

This line is mandatory for the script to work. The number '6670963649' is optional, this specifies that the changes to the e1 object should only effect the product with this id. Product ids can be found in the URL of the product within your Shopify admin. Alternatively you can leave it to say "e1 = new BTME();" which will then apply changes to all BTM products using the product template file with this script.

Although in the script above they are all part of the same chain of commands, each line can act independantly as well. This line of code is useful when you are needing to price a product in lower units such as inches, but wish to display the price in feet. The first parameter is the text you wish to display in replace of the default BTM unit, and the second parameter is how much you need to multiply the displayed price by for it to be represented as intended. 1 Inch x 12 = 1 Foot.

The last parameter is the id of the container element that holds the product price displayed to the customer. This is different across most themes. If there is no direct container or container id, you have to create one. Here are some examples of where you can find it:

Example 1:

Example 2:

NOTE This only changes what the customer sees. This is used with the assumption that your actual product price is a smaller number you would rather be replaced with something of higher units.

Warning This is only tested to work with US, Canadian, and European store currencies.

These two lines of code do similar tasks. The first line sets a global maximum value for all the input fields. The second line similarly sets a global minimum value for all the input fields. These can be overriden by field specific limitations such as only having a max and min on the second input field (next tab).

These two lines of code apply maximum and minimum input values for specific BTM input fields. The first line sets a maximum value of 100 for the second (as marked by 2) input field. Similarly, the second line of code sets a minimum value of 20 for the same input field. These limits will override any global limits that exist. The last parameter of each line is the error message you wish to show when a user enters a value that does not work.

Simply put, this line will commit to all the changes you ask for. No changes will be made until this line is reached.

Well done! You now know how to expand your use of Buy The Measurement! Get yourself a snack! You deserve it! :-)
Have more questions? Submit a request