Top

Buy the Measurement Liquid Install Instructions

Warning!

This article requires technical knowledge and prior experience with liquid code. If you are not comfortable with this, Email our Support Wizards 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.

  1. Log into your Bold Partners account.
  2. Select Visit Shopify App Store.
  3. Under "Buy the Measurement", select Install App.
  4. Enter your myshopify domain.
  5. Select Install app.
  6. Select Install Yourself.
  7. Select Approve charge.
  8. Select Accept and Continue.
  1. From "Shopify Admin", select Online Store.

    select online store 

  2. Select Actions.

    select actions 

  3. Select Edit HTML / CSS.

    select edit html/css 

  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 the class btm-qty-hide 

  8. Add this 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 the btm-quantity 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. 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 

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

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

  4. Select Save.

    select save 

That's it!

Have more questions? Submit a request