Product Customizer basic plan installation
Order Confirmation Notification
This is the email that is sent automatically to the customer after they place their order.
Log into your Shopify store admin and go to Settings > Notifications, then click on Order Confirmation:
2. Next, scroll down or search for the lines that look like:
<span class="order-list__item-variant">{{ line.variant.title }}</span> {% endif %}And on the next line add the following code:
{% assign previous_property = null %}{% for p in line.properties %}{% assign hp = p.first | first | replace: '_', true %}{% if p.last == blank or hp == 'true' %}{% assign previous_property = p %}{% continue %}{% endif %}<br/><span class="order-list__item-variant">{{ p.first }}: {% if p.last contains '/uploads/' %}{% assign original_file_name = null %}{% assign previous_hidden_property = previous_property.first | first | replace: '_', true %}{% if previous_hidden_property == 'true' %}{% assign previous_hidden_property_key = previous_property.first | remove_first: '_' %}{% if previous_hidden_property_key == p.first %}{% assign original_file_name = previous_property.last %}{% endif %}{% endif %}<a style="font-size:14px;" href="{{ p.last }}">{{ original_file_name | default: 'Click to see' }}</a>{% else %}{{ p.last | newline_to_br }}{% endif %}</span>{% assign previous_property = p %}{% endfor %}As shown below:
3. Click "Save"! You can repeat a similar process for any of the other notification templates if you'd like to include the customizations in them as well. You can also preview the order confirmation email to confirm that the above changes were made correctly.
New Order Notification
This is the email that is sent to order notification subscribers (e.g. you the store owner) when a customer places an order.
Log into your Shopify store admin and go to Settings > Notifications, then click on New Order
Next, scroll down or search for the lines that look like:
<ul> {% for line in line_items %} <li> <img src="{{ line | img_url: 'thumb' }}" /> {{ line.quantity }}x {{ line.title }} {% if line.sku != "" %}(SKU: {{line.sku}}){% endif %} for {{ line.price | money }} each </li> {% endfor %} </ul>And replace it with the following code:
<ul> {% for line in line_items %} <li> <img src="{{ line | img_url: 'thumb' }}" /> {{ line.quantity }}x {{ line.title }} {% if line.sku != "" %}(SKU: {{line.sku}}){% endif %} for {{ line.price | money }} each {% assign previous_property = null %}{% for p in line.properties %}{% assign hp = p.first | first | replace: '_', true %}{% if p.last == blank or hp == 'true' %}{% assign previous_property = p %}{% continue %}{% endif %}<br/>{{ p.first }}: {% if p.last contains '/uploads/' %}{% assign original_file_name = null %}{% assign previous_hidden_property = previous_property.first | first | replace: '_', true %}{% if previous_hidden_property == 'true' %}{% assign previous_hidden_property_key = previous_property.first | remove_first: '_' %}{% if previous_hidden_property_key == p.first %}{% assign original_file_name = previous_property.last %}{% endif %}{% endif %}<a href="{{ p.last }}">{{ original_file_name | default: 'Click to see' }}</a>{% else %}{{ p.last | newline_to_br }}{% endif %}{% assign previous_property = p %}{% endfor %}</li> {% endfor %} </ul>As shown below:
3. Click "Save"! You can repeat a similar process for any of the other notification templates if you'd like to include the customizations in them as well.
Fulfillment Request Notification
This is the email that is sent to custom fulfillment service emails when an order is fulfilled.
Log into your Shopify store admin and go to Settings > Notifications, then in the Shipping section click on Fulfillment request
Next, scroll down or search for the line that look like:
<p>Vendor: {{ line.line_item.vendor }}</p>And on the following line add:
{% assign previous_property = null %}{% for p in line.line_item.properties %}{% assign hp = p.first | first | replace: '_', true %}{% if p.last == blank or hp == 'true' %}{% assign previous_property = p %}{% continue %}{% endif %}<p>{{ p.first }}: {% if p.last contains '/uploads/' %}{% assign original_file_name = null %}{% assign previous_hidden_property = previous_property.first | first | replace: '_', true %}{% if previous_hidden_property == 'true' %}{% assign previous_hidden_property_key = previous_property.first | remove_first: '_' %}{% if previous_hidden_property_key == p.first %}{% assign original_file_name = previous_property.last %}{% endif %}{% endif %}<a href="{{ p.last }}">{{ original_file_name | default: 'Click to see' }}</a>{% else %}{{ p.last | newline_to_br }}{% endif %}</p>{% assign previous_property = p %}{% endfor %}As shown below:
3. Click "Save"! You can repeat a similar process for any of the other notification templates if you'd like to include the customizations in them as well.
Premium Installation
Order Confirmation Notification
This is the email that is sent automatically to the customer after they place their order
Log into your Shopify store admin and go to Settings > Notifications, then click on Order Confirmation:
2. From the edit Order Confirmation screen, scroll down to or search for the following line:
{% for line in line_items %}And on the next line add the following:
{% assign pc_pricing_line_item = null %}{% assign is_last_item = false %}{% if line.properties._pc_pricing_ref and line.properties._pc_pricing_qty %}{% for other_line_item in line_items %}{% if other_line_item.id != line.id and other_line_item.properties._pc_pricing_ref == line.properties._pc_pricing_ref %}{% assign pc_pricing_line_item = other_line_item %}{% break %}{% endif %}{% endfor %}{% elsif line.properties._pc_pricing_ref and line.properties._pc_pricing_qty == null %}{% continue %}{% endif %}{% assign line_item_price = line.price %}{% if pc_pricing_line_item %}{% assign pricing_item_price = pc_pricing_line_item.line_price | divided_by: line.quantity %}{% assign line_item_price = line_item_price | plus: pricing_item_price %} {% assign remaining_items = forloop.length | minus: forloop.index | minus: 1 %}{% if remaining_items == 0 %}{% assign is_last_item = true %}{% endif %}{% endif %}As shown here:
3. Now on the next line replace the following:
Note: This step is not necessary in the most recent version of the files. Feel free to skip to step 4 if you don't see the below code in your template file.
{% if item_count == 1 %} {% assign columnWrapperClass = 'order-list__item--single' %} {% elsif forloop.first == true %} {% assign columnWrapperClass = 'order-list__item--first' %} {% elsif forloop.last == true %} {% assign columnWrapperClass = 'order-list__item--last' %}With these lines:
{% if forloop.length == 1 or forloop.length == 2 and is_last_item == true %} {% assign columnWrapperClass = 'order-list__item--single' %} {% elsif forloop.first == true %} {% assign columnWrapperClass = 'order-list__item--first' %} {% elsif forloop.last == true or is_last_item == true %} {% assign columnWrapperClass = 'order-list__item--last' %}As shown here:
4. Next, scroll down or search for the lines that look like:
<span class="order-list__item-variant">{{ line.variant.title }}</span> {% endif %}And on the next line add the following code:
{% assign previous_property = null %}{% for p in line.properties %}{% assign hp = p.first | first | replace: '_', true %}{% if p.last == blank or hp == 'true' %}{% assign previous_property = p %}{% continue %}{% endif %}<br/><span class="order-list__item-variant">{{ p.first }}: {% if p.last contains '/uploads/' %}{% assign original_file_name = null %}{% assign previous_hidden_property = previous_property.first | first | replace: '_', true %}{% if previous_hidden_property == 'true' %}{% assign previous_hidden_property_key = previous_property.first | remove_first: '_' %}{% if previous_hidden_property_key == p.first %}{% assign original_file_name = previous_property.last %}{% endif %}{% endif %}<a style="font-size:14px;" href="{{ p.last }}">{{ original_file_name | default: 'Click to see' }}</a>{% else %}{{ p.last | newline_to_br }}{% endif %}</span>{% assign previous_property = p %}{% endfor %}As shown below:
5. Finally, scroll down/search for the following line:
<p class="order-list__item-price">{{ line.line_price | money }}</p>And replace it with the following:
<p class="order-list__item-price">{{ line_item_price | money }}</p>As shown here:
5. Click "Save"! You can repeat a similar process for any of the other notification templates if you'd like to include the customizations in them as well. You can also preview the order confirmation email to confirm that the above changes were made correctly.
Fulfillment Request Notification
This is the email that is sent to custom fulfillment service emails when an order is fulfilled.
Log into your Shopify store admin and go to Settings > Notifications, then in the Shipping section click on Fulfillment request
Next, scroll down or search for the line that look like:
{% for line in fulfillment.fulfillment_line_items %}And on the following line add:
{% if line.properties._pc_pricing_ref and line.properties._pc_pricing_qty == null %}{% continue %}{% endif %}3. Next, scroll down or search for the line that look like:
<p>Vendor: {{ line.line_item.vendor }}</p>And on the following line add:
{% assign previous_property = null %}{% for p in line.line_item.properties %}{% assign hp = p.first | first | replace: '_', true %}{% if p.last == blank or hp == 'true' %}{% assign previous_property = p %}{% continue %}{% endif %}<p>{{ p.first }}: {% if p.last contains '/uploads/' %}{% assign original_file_name = null %}{% assign previous_hidden_property = previous_property.first | first | replace: '_', true %}{% if previous_hidden_property == 'true' %}{% assign previous_hidden_property_key = previous_property.first | remove_first: '_' %}{% if previous_hidden_property_key == p.first %}{% assign original_file_name = previous_property.last %}{% endif %}{% endif %}<a href="{{ p.last }}">{{ original_file_name | default: 'Click to see' }}</a>{% else %}{{ p.last | newline_to_br }}{% endif %}</p>{% assign previous_property = p %}{% endfor %}As shown below:
4. Click "Save"! You can repeat a similar process for any of the other notification templates if you'd like to include the customizations in them as well.
How to Preview Notification Emails
Although the Shopify Admin does have a "Preview" and "Send test email" action on the notification templates, these aren't super useful when previewing the changes made above for Product Customizer compatibility. This is due to the fact that the Shopify notification previews don't include any item customizations like the ones added by Product Customizer. The Shopify Admin notification preview can at least confirm that there are no major HTML/Liquid errors with the notification template.
There are two main ways to "preview" the modifications made for Product Customizer: place a new (test) order for a customized product, or re-send the order confirmation notification for an existing order. The first way is self-explanatory and is the only option for all notifications except for the Order Confirmation email. The second way can only be used for the Order Confirmation email (which is the most common email to modify) and the process isn't necessarily obvious so we'll cover the steps here:
After customizing your Order Confirmation template as described above, go to Orders and click on an order that you know has one or more Product Customizer customizations
From the Order Edit screen note the current order email address somewhere (e.g. "john.doe@example.com"). Then change the order email by:
Click "Edit" next to the email address
Enter your email address
Make sure the "Update customer profile" box is unchecked
Click "Save"
As shown in the screenshot below:
3. Next scroll down to the bottom of the Edit Order screen, and click the "Resend email" button as shown in the following screenshot:
4. Once you've received the notification and are happy with it, don't forget to change the order email back to the original noted in step 2 above!