The Price Per Option requires additional steps to hide
the special “Item personalization” product that Product Personalizer uses to add option fees.Price Per Option requires several theme modifications.The installation process can be completed by following these general
instructions. However, we recommended that you are familiar with HTML and liquid to follow this general guide.

Product Personalizer Price Per Option installation

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

Product Template

At the very top of the template, add this:
{% if product.type  == 'PPLR_HIDDEN_PRODUCT' %}
	Product is not available
	{% break %}
{% endif %}
Between the variants and quantity selector / submit button (or where desired
within the add to cart form), add this:
{% include 'product-personalizer' %}

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

These changes are extensive to hide the “Item personalization”
product from the cart page, and to add its costs to the product it’s
tied to. Sometimes your cart template may vary slightly, so we also have
a couple helpful notes at the bottom of this section.

Right after {% for item in cart.items %}, add this style to the following <tr> / <div> / <li> / etc (whatever HTML element wraps each cart item):
style="{% render "product-personalizer-helper" ,item:item,pplr: "hide-pricing-item-row" %}" {% render "product-personalizer-helper" ,forloop:forloop,item:item,pplr: "cart-row-data" %}
Right after the item title (not the product image, the display title), include this:
{% render "product-personalizer-helper" ,item:item %}
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).

Replace any item prices (i.e.{{ item.price | money }}) with:
{% render 'product-personalizer-helper' ,item:item,pplr: 'item-price', items: cart.items %}

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

{% render 'product-personalizer-helper' ,item:item,pplr: 'item-line-price', items: cart.items %}

(You may not see both the item price and line item price in the template, that’s okay.)

Replace the “Remove” from cart link’s href (e.g.
/cart/change?line={{forloop.index}}&quantity=0) with this new href:
{% render 'product-personalizer-helper' ,item:item,pplr: 'remove-from-cart-href',forloop:forloop %}

and add this class to the <a> as well:

{% render 'product-personalizer-helper' ,item:item,pplr: 'remove-from-cart-class' %}

Important Note: some themes will have two
“remove from cart” links in the cart template, one of which will be
visible for mobile screens, and the other will be visible for full sized
screens. You need to ensure that all “remove from cart” links are updated.

At the very end of the file, add:
{% render "product-personalizer-helper" ,item:item,pplr: "product-personalizer-script" %}

Cart Adjustments

The price / line price may be displayed differently instead of using a normal liquid tag, ie:

{% include 'price' with item.price %}

If so, you’ll need to replace it with the raw helper and capture the price instead:

{% capture item_price %}{% include 'product-personalizer-helper' with 'item-price', items: cart.items, raw: true %}{% endcapture %}
{% include 'price' with item_price %}

You may also need to do this the item is not formatted with money, and instead uses something like money_with_currency:

{{ item.price | money_with_currency }}

To format this correctly, use a capture of our app’s raw price instead:

{% capture item_price %}{% include 'product-personalizer-helper' with 'item-price', items: cart.items, raw: true %}{% endcapture %}
{{ item_price | money_with_currency }}

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:

{% render 'product-personalizer-helper' ,item:item,pplr: 'cart-item-count' %}

You may occasionally see the cart item count used indirectly, ie
for an icon class. If so, you can capture this at the top of the file if

{% capture cart_item_count %}{% render 'product-personalizer-helper' ,item:item,pplr: 'cart-item-count' %}{% endcapture %}{% assign cart_item_count = cart_item_count | plus: 0 %}

then replace any instance of cart.item_count with:


instead. For example, you could use: {{ cart_item_count }} now that it’s captured.

Customer Order Template (Optional)

This set of directions is only needed if customer accounts are
used on the site to hide the “Item personalization” product the same was
as the cart changes.

Right after
{% for line_item in order.line_items %}, add this style to the following
<tr> /
<div> /
<li> / etc:
style="{% include 'product-personalizer-helper' with 'hide-pricing-item-row', item: line_item %}"
Right after the item title, add this line:
{% include 'product-personalizer-helper' item: line_item %}
Replace any item prices (ie
{{ line_item.price }} or
{{ item.price }}) with:
{% include 'product-personalizer-helper' with 'item-price', item: line_item, items: order.line_items %}
Replace this line:
<td>{{ line_item.quantity | times: line_item.price | money }}</td>

with this (carry over any CSS classes on the table cell):

	{% capture item_price %}{% include 'product-personalizer-helper' with 'item-price', item: line_item, items: order.line_items, raw: true %}{% endcapture %}
	{{ line_item.quantity | times: item_price | money }}