Top

Buy the Measurement Liquid Install Instructions

Getting Started

Before installing, review our Notes Before Installing. This article can help get you prepared, and answers many common questions.

Difficulty: Moderate
Time Required: 30 to 40 minutes

Need Help? Frustrated with Liquid Code? Request an Install!

We know Liquid code can be tough to wrap your head around at first or that you may not have a developer to assist you with coding your theme. That is okay! We can help by installing the app's code for you on request. If you would like to request a paid install just click on the tab above titled "Install Request".

Note
 Code installs are per theme. If the theme is changed or updated re-installing the app's code may be subject to another install fee.

1 - Open the App 

To access the app you'll need to login to your store's Shopify admin page, click on the Apps button in the navigation bar on the left, then click on the icon of the app you need installed.

2 - App Menu

You will see several buttons on the home screen after opening the app. Click on the Liquid Installation button then scroll down to Option 2 on the new page. Click on the blue Please insert liquid code button to bring up the install request form. Fill out the form entirely and make sure to select the theme you need the code to be installed on (pictured below). Click "Looks good! Send Away!" when you are done filling out the form.

3 - Accept the Charge

After submitting your information you will be prompted to approve the charge. Once you approve the charge it will immediately be charged to the credit card you have on file in your Shopify store.

4 - Create a Staff Account

Finally, to install the Liquid code for the app our team will require a staff account. Please see "How do I create a staff account?" to ensure our team has access and can start your install as soon as possible.


Part 1: Edit the product.liquid

1-1

At the top of product.liquid, add the following lines:

{% include 'bold-btm-init' %}
{% include 'bold-btm-include' with product %}

* These includes add the necessary code to make Buy the Measurement function.

1-2

Add the following line of code where you want the measurement form to be. Note: This include needs to be in placed within the product form.

{% include 'bold-btm-display' %}

* This include displays the measurement box.

1-3

Add the class btm-qty-hide to the quantity input tag if your theme has one. If your theme does not have a quantity tag, Buy The Measurement will automatically add a hidden quantity field for you and you can skip this step. If there is a div tag directly wrapping this input, add the class to the div instead:

btm-qty-hide

Your code should look something like this:

<input id="quantity" type="number" name="quantity" value="1" min="1" class="tc btm-qty-hide" />

Or

<div class="selector-wrapper btm-qty-hide">
<label>Quantity</label>
<input id="quantity" type="number" name="quantity" value="1" min="1" class="tc" />
</div>

* This class is used to hide the Shopify quantity when a Buy The Measurement variant is selected.

1-4

Also add the following class to the quantity input tag. You may skip this step if your theme does not have a quantity selector.

btm-quantity

Your code should look something like this:

<input id="quantity" type="number" name="quantity" value="1" min="1" class="tc btm-quantity btm-qty-hide item-quantity" />

* This allows the app to add information to the quantity box.

1-5

Find the code that displays the price field and add the following below (the code will typically include {{ product.price | money }} and may be a few lines in total):

<span class="btm_unit" style="display:inline; padding-left: 10px;"></span>

Your code should look something like this:

<h2 class="price" id="price-preview" style="display:inline; padding-left: 10px;">
<span itemprop="price" style="display:inline; padding-left: 10px;">{{ product.price | money }}</span>{% if product.price < product.compare_at_price %} <del>{{ product.compare_at_price | money }}</del>{% endif %}
</h2>
<span class="btm_unit" style="display:inline; padding-left: 10px;"></span>

* These adds the unit of measurement to your product page

1-6

Find any instances of {% for variant in product.variants %} .

Add the class 'btm_select' to the <select> tag that wraps it

Within the <select> tag, find the <option> tag and add the data attribute data-price="{{ variant.price | divided_by: 100.00 }}" .

Your code should look something like this:
<select id="product-select" class="btm_select" name="id" style="display:none">
{% for variant in product.variants %}
<option value="{{ variant.id }}" data-price="{{ variant.price | divided_by: 100.00 }}">{{ variant.title }} - {{ variant.price | money }}</option>
{% endfor %}

* This allows the app to generate the price of the measurement

1-7
Save the file.

Part 2: Edit the cart.liquid

2-1

Find the quantity box (it would be in an <input... /> tag) and right before the /> add the following:

{%if item.variant.metafields.bold_measurement.formula %} style="opacity: 0;"{% endif %}

Your code should look something like this:

<input type="text" size="4" name="updates[]" id="updates_{{ item.id }}" value="{{ item.quantity }}" onfocus="this.select();" class="tc item-quantity" {%if item.variant.metafields.bold_measurement.formula %} style="opacity: 0;"{% endif %} />

* This hides the quantity box on the cart page for Buy The Measurement products.

2-2

Find the line of code that has item.product.title in it and add the following below that line:

Your code should look something like this:

{{ item.product.title }}
<br>
{% for p in item.properties %}
{% unless p.last == blank %}
{% if p.last contains '/uploads/' %}
{{ p.first }}: <a href="{{ p.last }}" target="_blank"><em>uploaded file</em></a><br />
{% else %}
{{ p.first }}: <em>{{ p.last }}</em><br />
{% endif %}
{% endunless %}
{% endfor %}
2-3
Save the file and you're all done!
Have more questions? Submit a request