Product Personalizer Price Per Option installation

There are 5 main steps to complete the Price Per Option installation for Product Personalizer.

Product Template

Between the variants and quantity selector / submit button (or where desired within the add to cart form), add this:

<div id="pplr-{{ product.id }}" data-id="{{ product.id }}" class="product-personalizer" data-handle="{{product.handle}}"></div>

The add to cart form is, from time to time, stored outside of the product template file in the “Snippets” section of the theme (usually in a short-form.liquid or product-form.liquid file). If so, install the one-line snippet here.

Cart Template

  1. Right after {% for item in cart.items %}, add this code inside the following <tr> / <div> / <li> / etc tag (whatever HTML element wraps each cart item):
    data-line="{{ forloop.index }}" data_pplr_row= "{{ forloop.index }}"
  2. Right after the item title (not the product image, the display title), include this:
    <span class="pplr_cart_item_property" data-line="{{item.index}}" ></span>

    If the theme already adds line item properties, comment them out with a note they’re removed for Product Personalizer.The helper we just added will display them and has the added benefit of properly distinguishing public and private line item properties (most themes don’t do this).

  3. Replace any item prices (i.e.{{ item.price | money }}) with:
    <span class='pplr_item_price' data-line='{{item.index}}' >{{ item.price | money }} </span>

    and any line item (all quantities) prices (i.e. {{ item.line_price | money }}) with:

    <span class='pplr_item_line_price' data-line='{{item.index}}' >{{item.line_price | money}}</span>
    

 

Collection template

Find any “for” loops for products in the collection: {% for product in collection.products %}  and add this snippet right after the opening of the loop:

{% if product.type == 'PPLR_HIDDEN_PRODUCT' %}{% continue %}{% endif %}

You may also need to do this if the collection shows a list of product types in a dropdown — replace product.type with whatever is needed to skip our type. Sometimes there are multiple collection templates, and this change should be applied to each template.

Find any “for” loops for items in the search results: {% for item in search.results %} and add this snippet right after the opening of the loop:

{% if item.type == 'PPLR_HIDDEN_PRODUCT' %}{% continue %}{% endif %}

Theme Main Layout

In the main Layout > theme.liquid file (or in some themes, you may see Snippets > header-bar.liquid), replace any instances of {{ cart.item_count }} with:

<span class='pplr_cart_count'>{{ cart.item_count }}</span>