Top

Buy the Measurement Install Instructions

Warning!

This article requires technical knowledge and prior experience with liquid code. If you are not comfortable with this, Email our Merchant Success Specialists for help.

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

Select each step below to view the instructions.

Buy the Measurement is currently not available for download from the Shopify App Store. If you already have a copy, you can use these instructions to complete the install. Please keep in mind this app is not currently being developed so bugs are not being fixed and improvements are not being completed.

  1. From "Shopify Admin", select Online Store.

    select online store

  2. Select Actions.

    Actions

  3. Select Edit code.

    Edit code

  4. Under "Templates", select product.liquid.

    Note: If your template contains sections, you will need to select the product-template.liquid section instead.

    select product.liquid

  5. Paste this code at the top of the file:

    {% include 'bold-btm-init' %}
    {% include 'bold-btm-include' with product %}
    * These includes add the necessary code to make Buy the Measurement function.

    paste this code at the top

  6. Paste this code where you want the measurement form:

    Note: This needs to be placed within the product form.

    {% include 'bold-btm-display' %}
    * This include displays the measurement box.

    paste this code where you want the measurement form

  7. Add the class btm-qty-hide to the quantity <input> tag.

    Note: 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 wrapping this input, add the class to it instead.

    Your code should look like this:

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

    or this:

    <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.

    add this class

  8. Add the btm-quantity class to the quantity <input> tag:

    Note: You can skip this tag if your theme does not have a quantity selector.

    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.

    add this class

  9. Find the code that displays the price field and paste this code below it:

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

    Note: The price will usually include {{ product.price | money }}.

    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

    add this code below the price field

  10. Find any instances of {% for variant in product.variants %} and add the btm_select class to the wrapping select tag.

    add the btm_select class

  11. Within the <select> tag, find the <option> tag add add the data attribute:

    data-price="{{ variant.price | divided_by: 100.00 }}"

    Your code should look 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

    add the data attribute

  12. Select Save.

    select save

  1. From "Shopify Admin", select Online Store.

    select online store

  2. Select Actions.

    Actions

  3. Select Edit code.

    Edit code

  4. Under "Templates", select cart.liquid.

    Note: If your template contains sections, you will need to select the cart-template.liquid section instead.

    find cart.liquid

  5. Find the quantity box inside an <input> tag and add this code right before the />.

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

    Your code should look 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.

    add this tag in the quantity box code

  6. Find the line of code containing item.product.title and add this code below that line:

    {% 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 %}

    add this code below item.product.title

  7. Select Save.

    select save

That's it!

Next Steps: