👀FAQ
Last updated
Last updated
It is easy to understand even without any test orders. You can write your notes as a buyer in a product page, and then go to checkout page. If you can see your notes there attached to product information, it means Shopify successfully receives the notes from our app.
Once an order is placed, you should see the customer notes here:
Orders -> That Specific Order -> Order Detail
Imagine that you want to ask your customers if this purchasing is a gift. If yes, you want to get the gift note. In this case, first create a checkbox saying "Is this a gift?" and apply it to relevant products. Then, create another field which is a textbox this time. However, this textbox will be displayed conditionally. Therefore, we need to set a condition for this in our last step. The logic is simple: IF a checkbox is equal to our option (Is this a gift), THEN this field will be DISPLAYED.
It is that easy.
Please note that you need to create a product to represent your extra charge on cart and checkout page.
You can search this newly created product in the selection section. If you cannot find the item, please click refresh button to retrieve all your products again.
Pay attention that newly created product has sufficient stock. Ideally "Quantity Not Tracked" or "Continue Selling When Out of Stock" selected.
The newly created product should be in active status, available in online store sales channel too.
Yes, these uploaded images can be accessible in the order note. Please copy and paste the link in your preferred browser and directly download the image/file to your device.
If a visitor uploads more than one image/file, then the link in the order detail page would not work because actually the link consists on multiple links. Therefore, you cannot access if you only click the link. You can capture all the images link separately until a comma "," which separates the other links. i.e. the merged link could be: https://minimate-file-upload.s3.us-east-2.amazonaws.com/XXX.png,https://minimate-file-upload.s3.us-east-2.amazonaws.com/yyy.png,https://minimate-file-upload.s3.us-east-2.amazonaws.com/zzz.png So you can access them one by one like below: https://minimate-file-upload.s3.us-east-2.amazonaws.com/XXX.png https://minimate-file-upload.s3.us-east-2.amazonaws.com/yyy.png https://minimate-file-upload.s3.us-east-2.amazonaws.com/zzz.png
This custom CSS modifies the appearance of the specific input field to which the changes are being applied in the app.
Write your custom css in curly brackets: { "your css code" }
Frequently used css codes: background-color border-color
We offer two methods for activation. In case you use "add block" option, you are supposed to be able to drag and drop the app wherever you want. However, not all Online 2.0 themes allow merchants to drag and drop apps. Then, "app embed" option gives us more flexibility. Please enable the app with this option and contact to us. We usually reply in 12 hours at the latest, weekends included :)
You can customize the packing slip template so that it can include the fields in there.
Please go to settings -> Shipping and delivery -> edit packing slip template. And the copy and paste this code snippet just below the { % endif %} tag of {{line_item.sku}}
You can press command+ F (ctrl+F) to search for line_item.sku to find the location easily.
//this is the code snippet for adding the inputs from customer to packing slip
{% for property in line_item.properties %}
{% assign property_first_char = property.first | slice: 0 %}
{% if property.last != blank and property_first_char != '_' %}
<span class="line-item-description-line">
{{ property.first }}: {{ property.last }}
</span>
{% endif %}
{% endfor %}Please go to Settings -> Notifications -> Customer Notifications -> Order Confirmation
Then click to Edit Code to access confirmation email template.
Simply place your cursor on email body and use the keyboard shortcut Ctrl + F (or Command + F on Mac) to activate the search function there. Please look for " line.variant.title "
After locating “{% endif %}“, paste the following code snippet:
{% for property in line.properties %}
{% assign property_first_char = property.first | slice: 0 %}
{% if property.last != blank and property_first_char != '_' %}
<span class="line-item-description-line">
{{ property.first }}: {{ property.last }}
</span><br/>
{% endif %}
{% endfor %}Click the 'Save' button to apply the changes to the template.
Please allow approximately 30 seconds for the changes to take effect.
Please go to Settings -> Notifications -> Staff Notifications
Select New Order
Click on the Edit code button to access the email template
Simply place your cursor on email body and use the keyboard shortcut Ctrl + F (or Command + F on Mac) to activate the search function there. Please look for " line.variant.title "
Once you find "if" statement for line.variant.title, please find "endif" to ensure that this statement ends properly.
Right after that endif statement, please copy and paste this code snippet below.
{% for property in line.properties %}
{% assign property_first_char = property.first | slice: 0 %}
{% if property.last != blank and property_first_char != '_' %}
<span class="line-item-description-line">
{{ property.first }}: {{ property.last }}
</span><br/>
{% endif %}
{% endfor %}Here is how it may look like eventually.
<p>Hi {{ service_name }},</p>
<br>
<p>Please fulfill order {{ name }}.</p>
<p>Total number of items: {{ fulfillment.item_count }}</p>
<p>Unique items: {{ fulfillment.fulfillment_line_items.size }}</p>
<br>
<p><strong>Items to fulfill:</strong></p>
{% for line in fulfillment.fulfillment_line_items %}
<p><strong>Item #{{ forloop.index }}:</strong></p>
<p>Variant Title: {{ line.line_item.title }}</p>
<p>SKU: {{ line.line_item.sku }}</p>
<p>Quantity: {{ line.quantity }}</p>
<p>Grams: {{ line.line_item.grams }}</p>
<p>Vendor: {{ line.line_item.vendor }}</p>
{% comment %}Added section for line item properties{% endcomment %}
{% for property in line.line_item.properties %}
{% assign property_first_char = property.first | slice: 0 %}
{% if property.last != blank and property_first_char != '_' %}
<p class="line-item-property">
{{ property.first }}: {{ property.last }}
</p>
{% endif %}
{% endfor %}
<br>
{% endfor %}
{% if shipping_address %}
<br>
<p><strong>Shipping Address:</strong></p>
<p>{{ shipping_address.name }}{% if shipping_address.company %}
{{ shipping_address.company }}{% endif %}</p>
<p>{{ shipping_address.address1 }}</p>
<p>{{ shipping_address.address2 }}</p>
<p>{{ shipping_address.city }}, {{ shipping_address.province }}</p>
<p>{{ shipping_address.zip }}</p>
<p>{{ shipping_address.country }}</p>
{% if shipping_address.phone %}<p>Phone: {{ shipping_address.phone }}</p>{% endif %}
{% endif %}
<br>
<p><strong>Shipping Method:</strong></p>
<p>{% if shipping_method %}{{ shipping_method.title }}{% else %}None{% endif %}</p>
<br>
<p><strong>Tracking Number:</strong></p>
<p>{% if fulfillment.tracking_number %}{{ fulfillment.tracking_number }}{% else %}None{% endif %}</p>
<br>
<p><strong>Customer Email:</strong></p>
<p>{{ email }}</p>
<br>
<p>Thank you,</p>
<p>{{ shop_name }}</p>
{% capture email_title %}Your shipping status has been updated{% endcapture %}
{% capture email_body %}The following items have been updated with new shipping information.{% endcapture %}
<!DOCTYPE html>
<html lang="en">
<head>
<title>{{ email_title }}</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="/assets/notifications/styles.css">
<style>
.button__cell { background: {{ shop.email_accent_color }}; }
a, a:hover, a:active, a:visited { color: {{ shop.email_accent_color }}; }
.line-item-property {
font-size: 12px;
color: #555;
margin: 2px 0;
}
</style>
</head>
<body>
<table class="body">
<tr>
<td>
<table class="header row">
<tr>
<td class="header__cell">
<center>
<table class="container">
<tr>
<td>
<table class="row">
<tr>
<td class="shop-name__cell">
{%- if shop.email_logo_url %}
<img src="{{shop.email_logo_url}}" alt="{{ shop.name }}" width="{{ shop.email_logo_width }}">
{%- else %}
<h1 class="shop-name__text">
<a href="{{shop.url}}">{{ shop.name }}</a>
</h1>
{%- endif %}
</td>
<td>
<table class="order-po-number__container">
<tr>
<td class="order-number__cell">
<span class="order-number__text">
Order {{ order_name }}
</span>
</td>
</tr>
{%- if po_number %}
<tr>
<td class="po-number__cell">
<span class="po-number__text">
PO number #{{ po_number }}
</span>
</td>
</tr>
{%- endif %}
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
<table class="row content">
<tr>
<td class="content__cell">
<center>
<table class="container">
<tr>
<td>
<h2>{{ email_title }}</h2>
<p>{{ email_body }}</p>
<p>{{ email_emphasis }}</p>
{% if order_status_url %}
<table class="row actions">
<tr>
<td class="empty-line"> </td>
</tr>
<tr>
<td class="actions__cell">
<table class="button main-action-cell">
<tr>
<td class="button__cell"><a href="{{ order_status_url }}" class="button__text">View your order</a></td>
</tr>
</table>
{% if shop.url %}
<table class="link secondary-action-cell">
<tr>
<td class="link__cell">or <a href="{{ shop.url }}">Visit our store</a></td>
</tr>
</table>
{% endif %}
</td>
</tr>
</table>
{% else %}
{% if shop.url %}
<table class="row actions">
<tr>
<td class="actions__cell">
<table class="button main-action-cell">
<tr>
<td class="button__cell"><a href="{{ shop.url }}" class="button__text">Visit our store</a></td>
</tr>
</table>
</td>
</tr>
</table>
{% endif %}
{% endif %}
{% if fulfillment.tracking_numbers.size > 0 %}
<p class="disclaimer__subtext">
<br/>
{% if fulfillment.tracking_numbers.size == 1 and fulfillment.tracking_company and fulfillment.tracking_url %}
{{ fulfillment.tracking_company }} tracking number: <a href="{{ fulfillment.tracking_url }}">{{ fulfillment.tracking_numbers.first }}</a>
{% elsif fulfillment.tracking_numbers.size == 1 %}
Tracking number: {{ fulfillment.tracking_numbers.first }}
{% else %}
{{ fulfillment.tracking_company }} tracking numbers:<br />
{% for tracking_number in fulfillment.tracking_numbers %}
{% if fulfillment.tracking_urls[forloop.index0] %}
<a href="{{ fulfillment.tracking_urls[forloop.index0] }}">
{{ tracking_number }}
</a>
{% else %}
{{ tracking_number }}
{% endif %}
<br/>
{% endfor %}
{% endif %}
</p>
{% endif %}
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
<table class="row section">
<tr>
<td class="section__cell">
<center>
<table class="container">
<tr>
<td>
<h3>Items in this shipment</h3>
</td>
</tr>
</table>
<table class="container">
<tr>
<td>
<table class="row">
{% for line in fulfillment.fulfillment_line_items %}
<tr class="order-list__item">
<td class="order-list__item__cell">
<table>
<td class="order-list__image-cell">
{% if line.line_item.image %}
<img src="{{ line.line_item | img_url: 'compact_cropped' }}" align="left" width="60" height="60" class="order-list__product-image"/>
{% else %}
<div class="order-list__no-image-cell">
<img src="{{ 'notifications/no-image.png' | shopify_asset_url }}" align="left" width="60" height="60" class="order-list__no-product-image"/>
</div>
{% endif %}
</td>
<td class="order-list__product-description-cell">
{% if line.line_item.product.title %}
{% assign line_title = line.line_item.product.title %}
{% else %}
{% assign line_title = line.line_item.title %}
{% endif %}
{% if line.quantity < line.line_item.quantity %}
{% capture line_display %}
{{ line.quantity }} of {{ line.line_item.quantity }}
{% endcapture %}
{% else %}
{% assign line_display = line.line_item.quantity %}
{% endif %}
<span class="order-list__item-title">{{ line_title }} × {{ line_display }}</span><br/>
{% if line.line_item.variant.title != 'Default Title' %}
<span class="order-list__item-variant">{{ line.line_item.variant.title }}</span><br/>
{% endif %}
{% comment %}Added section for line item properties{% endcomment %}
{% for property in line.line_item.properties %}
{% assign property_first_char = property.first | slice: 0 %}
{% if property.last != blank and property_first_char != '_' %}
<p class="line-item-property">
{{ property.first }}: {{ property.last }}
</p>
{% endif %}
{% endfor %}
{% if line.line_item.selling_plan_allocation %}
<span class="order-list__item-variant">{{ line.line_item.selling_plan_allocation.selling_plan.name }}</span><br/>
{% endif %}
{% if line.line_item.refunded_quantity > 0 %}
<span class="order-list__item-refunded">Refunded</span>
{% endif %}
{% if line.line_item.discount_allocations %}
{% for discount_allocation in line.line_item.discount_allocations %}
{% if discount_allocation.discount_application.target_selection != 'all' %}
<p>
<span class="order-list__item-discount-allocation">
<img src="{{ 'notifications/discounttag.png' | shopify_asset_url }}" width="18" height="18" class="discount-tag-icon" />
<span>
{{ discount_allocation.discount_application.title | upcase }}
(-{{ discount_allocation.amount | money }})
</span>
</span>
</p>
{% endif %}
{% endfor %}
{% endif %}
</td>
</table>
</td>
</tr>
{% endfor %}
</table>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
<table class="row footer">
<tr>
<td class="footer__cell">
<center>
<table class="container">
<tr>
<td>
<p class="disclaimer__subtext">If you have any questions, reply to this email or contact us at <a href="mailto:{{ shop.email }}">{{ shop.email }}</a></p>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
<img src="{{ 'notifications/spacer.png' | shopify_asset_url }}" class="spacer" height="1" />
</td>
</tr>
</table>
</body>
</html>
{% if fulfillment.item_count == item_count %}
{% capture email_title %}Your order is out for delivery{% endcapture %}
{% capture email_body %}Your order is out for delivery. Track your shipment to see the delivery status.{% endcapture %}
{% elsif fulfillment.item_count > 1 %}
{% if fulfillment_status == 'fulfilled' %}
{% capture email_title %}The last items in your order are out for delivery{% endcapture %}
{% capture email_body %}The last items in your order are out for delivery. Track your shipment to see the delivery status.{% endcapture %}
{% else %}
{% capture email_title %}Some items in your order are out for delivery{% endcapture %}
{% capture email_body %}Some items in your order are out for delivery. Track your shipment to see the delivery status.{% endcapture %}
{% endif %}
{% else %}
{% if fulfillment_status == 'fulfilled' %}
{% capture email_title %}The last item in your order is out for delivery{% endcapture %}
{% capture email_body %}The last item in your order is out for delivery. Track your shipment to see the delivery status.{% endcapture %}
{% else %}
{% capture email_title %}One item in your order is out for delivery{% endcapture %}
{% capture email_body %}One item in your order is out for delivery. Track your shipment to see the delivery status.{% endcapture %}
{% endif %}
{% endif %}
{% capture email_emphasis %}Estimated delivery date: <strong>{{fulfillment.estimated_delivery_at | date: format: 'date'}}</strong>{% endcapture %}
<!DOCTYPE html>
<html lang="en">
<head>
<title>{{ email_title }}</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="/assets/notifications/styles.css">
<style>
.button__cell { background: {{ shop.email_accent_color }}; }
a, a:hover, a:active, a:visited { color: {{ shop.email_accent_color }}; }
.line-item-property {
font-size: 12px;
color: #555;
margin: 2px 0;
}
</style>
</head>
<body>
<table class="body">
<tr>
<td>
<table class="header row">
<tr>
<td class="header__cell">
<center>
<table class="container">
<tr>
<td>
<table class="row">
<tr>
<td class="shop-name__cell">
{%- if shop.email_logo_url %}
<img src="{{shop.email_logo_url}}" alt="{{ shop.name }}" width="{{ shop.email_logo_width }}">
{%- else %}
<h1 class="shop-name__text">
<a href="{{shop.url}}">{{ shop.name }}</a>
</h1>
{%- endif %}
</td>
<td>
<table class="order-po-number__container">
<tr>
<td class="order-number__cell">
<span class="order-number__text">
Order {{ order_name }}
</span>
</td>
</tr>
{%- if po_number %}
<tr>
<td class="po-number__cell">
<span class="po-number__text">
PO number #{{ po_number }}
</span>
</td>
</tr>
{%- endif %}
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
<table class="row content">
<tr>
<td class="content__cell">
<center>
<table class="container">
<tr>
<td>
<h2>{{ email_title }}</h2>
<p>{{ email_body }}</p>
{% if fulfillment.estimated_delivery_at %}
<p>{{ email_emphasis }}</p>
{% endif %}
{% if order_status_url %}
<table class="row actions">
<tr>
<td class="empty-line"> </td>
</tr>
<tr>
<td class="actions__cell">
<table class="button main-action-cell">
<tr>
<td class="button__cell"><a href="{{ order_status_url }}" class="button__text">Track my shipment</a></td>
</tr>
</table>
{% if shop.url %}
<table class="link secondary-action-cell">
<tr>
<td class="link__cell">or <a href="{{ shop.url }}">Visit our store</a></td>
</tr>
</table>
{% endif %}
</td>
</tr>
</table>
{% else %}
{% if shop.url %}
<table class="row actions">
<tr>
<td class="actions__cell">
<table class="button main-action-cell">
<tr>
<td class="button__cell"><a href="{{ shop.url }}" class="button__text">Visit our store</a></td>
</tr>
</table>
</td>
</tr>
</table>
{% endif %}
{% endif %}
{% if fulfillment.tracking_numbers.size > 0 %}
<p class="disclaimer__subtext">
<br/>
{% if fulfillment.tracking_numbers.size == 1 and fulfillment.tracking_company and fulfillment.tracking_url %}
{{ fulfillment.tracking_company }} tracking number: <a href="{{ fulfillment.tracking_url }}">{{ fulfillment.tracking_numbers.first }}</a>
{% elsif fulfillment.tracking_numbers.size == 1 %}
Tracking number: {{ fulfillment.tracking_numbers.first }}
{% else %}
{{ fulfillment.tracking_company }} tracking numbers:<br />
{% for tracking_number in fulfillment.tracking_numbers %}
{% if fulfillment.tracking_urls[forloop.index0] %}
<a href="{{ fulfillment.tracking_urls[forloop.index0] }}">
{{ tracking_number }}
</a>
{% else %}
{{ tracking_number }}
{% endif %}
<br/>
{% endfor %}
{% endif %}
</p>
{% endif %}
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
<table class="row section">
<tr>
<td class="section__cell">
<center>
<table class="container">
<tr>
<td>
<h3>Items in this shipment</h3>
</td>
</tr>
</table>
<table class="container">
<tr>
<td>
<table class="row">
{% for line in fulfillment.fulfillment_line_items %}
<tr class="order-list__item">
<td class="order-list__item__cell">
<table>
{% assign expand_bundles = false %}
{% if expand_bundles and line.line_item.bundle_parent? %}
<td class="order-list__parent-image-cell">
{% if line.line_item.image %}
<img src="{{ line.line_item | img_url: 'compact_cropped' }}" align="left" width="60" height="60" class="order-list__product-image"/>
{% else %}
<div class="order-list__no-image-cell">
<img src="{{ 'notifications/no-image.png' | shopify_asset_url }}" align="left" width="60" height="60" class="order-list__no-product-image"/>
</div>
{% endif %}
</td>
{% else %}
<td class="order-list__image-cell">
{% if line.line_item.image %}
<img src="{{ line.line_item | img_url: 'compact_cropped' }}" align="left" width="60" height="60" class="order-list__product-image"/>
{% else %}
<div class="order-list__no-image-cell">
<img src="{{ 'notifications/no-image.png' | shopify_asset_url }}" align="left" width="60" height="60" class="order-list__no-product-image"/>
</div>
{% endif %}
</td>
{% endif %}
<td class="order-list__product-description-cell">
{% if line.line_item.product.title %}
{% assign line_title = line.line_item.product.title %}
{% else %}
{% assign line_title = line.line_item.title %}
{% endif %}
{% if line.quantity < line.line_item.quantity %}
{% capture line_display %}
{{ line.quantity }} of {{ line.line_item.quantity }}
{% endcapture %}
{% else %}
{% assign line_display = line.line_item.quantity %}
{% endif %}
<span class="order-list__item-title">{{ line_title }} × {{ line_display }}</span><br/>
{% if line.line_item.variant.title != 'Default Title' and line.line_item.bundle_parent? == false %}
<span class="order-list__item-variant">{{ line.line_item.variant.title }}</span><br/>
{% elsif line.line_item.variant.title != 'Default Title' and line.line_item.bundle_parent? and expand_bundles == false %}
<span class="order-list__item-variant">{{ line.line_item.variant.title }}</span><br/>
{% endif %}
{% comment %}Added section for line item properties{% endcomment %}
{% for property in line.line_item.properties %}
{% assign property_first_char = property.first | slice: 0 %}
{% if property.last != blank and property_first_char != '_' %}
<p class="line-item-property">
{{ property.first }}: {{ property.last }}
</p>
{% endif %}
{% endfor %}
{% if expand_bundles %}
{% for component in line.line_item.bundle_components %}
<table>
<tr class="order-list__item">
<td class="order-list__bundle-item">
<table>
<td class="order-list__image-cell">
{% if component.image %}
<img src="{{ component | img_url: 'compact_cropped' }}" align="left" width="40" height="40" class="order-list__product-image"/>
{% else %}
<div class="order-list__no-image-cell small">
<img src="{{ 'notifications/no-image.png' | shopify_asset_url }}" align="left" width="40" height="40" class="order-list__no-product-image small"/>
</div>
{% endif %}
</td>
<td class="order-list__product-description-cell">
{% if component.product.title %}
{% assign component_title = component.product.title %}
{% else %}
{% assign component_title = component.title %}
{% endif %}
{% assign component_display = component.quantity %}
<span class="order-list__item-title">{{ component_title }} × {{ component_display }}</span><br>
{% if component.variant.title != 'Default Title'%}
<span class="order-list__item-variant">{{ component.variant.title }}</span>
{% endif %}
</td>
</table>
</td>
</tr>
</table>
{% endfor %}
{% else %}
{% for group in line.line_item.groups %}
<span class="order-list__item-variant">Part of: {{ group.display_title }}</span><br/>
{% endfor %}
{% endif %}
{% if line.line_item.selling_plan_allocation %}
<span class="order-list__item-variant">{{ line.line_item.selling_plan_allocation.selling_plan.name }}</span><br/>
{% endif %}
{% if line.line_item.refunded_quantity > 0 %}
<span class="order-list__item-refunded">Refunded</span>
{% endif %}
{% if line.line_item.discount_allocations %}
{% for discount_allocation in line.line_item.discount_allocations %}
{% if discount_allocation.discount_application.target_selection != 'all' %}
<p>
<span class="order-list__item-discount-allocation">
<img src="{{ 'notifications/discounttag.png' | shopify_asset_url }}" width="18" height="18" class="discount-tag-icon" />
<span>
{{ discount_allocation.discount_application.title | upcase }}
(-{{ discount_allocation.amount | money }})
</span>
</span>
</p>
{% endif %}
{% endfor %}
{% endif %}
</td>
</table>
</td>
</tr>
{% endfor %}
</table>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
<table class="row footer">
<tr>
<td class="footer__cell">
<center>
<table class="container">
<tr>
<td>
<p class="disclaimer__subtext">If you have any questions, reply to this email or contact us at <a href="mailto:{{ shop.email }}">{{ shop.email }}</a></p>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
<img src="{{ 'notifications/spacer.png' | shopify_asset_url }}" class="spacer" height="1" />
</td>
</tr>
</table>
</body>
</html>
{% if fulfillment.item_count == item_count %}
{% capture email_title %}Your order has been delivered{% endcapture %}
{% capture email_body %}Your order has been delivered. Track your shipment to see the delivery status.{% endcapture %}
{% elsif fulfillment.item_count > 1 %}
{% if fulfillment_status == 'fulfilled' %}
{% capture email_title %}The last items in your order have been delivered{% endcapture %}
{% capture email_body %}The last items in your order have been delivered. Track your shipment to see the delivery status.{% endcapture %}
{% else %}
{% capture email_title %}Some items in your order have been delivered{% endcapture %}
{% capture email_body %}Some items in your order have been delivered. Track your shipment to see the delivery status.{% endcapture %}
{% endif %}
{% else %}
{% if fulfillment_status == 'fulfilled' %}
{% capture email_title %}The last item in your order has been delivered{% endcapture %}
{% capture email_body %}The last item in your order has been delivered. Track your shipment to see the delivery status.{% endcapture %}
{% else %}
{% capture email_title %}One item in your order has been delivered{% endcapture %}
{% capture email_body %}One item in your order has been delivered. Track your shipment to see the delivery status.{% endcapture %}
{% endif %}
{% endif %}
<!DOCTYPE html>
<html lang="en">
<head>
<title>{{ email_title }}</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="/assets/notifications/styles.css">
<style>
.button__cell { background: {{ shop.email_accent_color }}; }
a, a:hover, a:active, a:visited { color: {{ shop.email_accent_color }}; }
.line-item-property {
font-size: 12px;
color: #555;
margin: 2px 0;
}
</style>
</head>
<body>
<table class="body">
<tr>
<td>
<table class="header row">
<tr>
<td class="header__cell">
<center>
<table class="container">
<tr>
<td>
<table class="row">
<tr>
<td class="shop-name__cell">
{%- if shop.email_logo_url %}
<img src="{{shop.email_logo_url}}" alt="{{ shop.name }}" width="{{ shop.email_logo_width }}">
{%- else %}
<h1 class="shop-name__text">
<a href="{{shop.url}}">{{ shop.name }}</a>
</h1>
{%- endif %}
</td>
<td>
<table class="order-po-number__container">
<tr>
<td class="order-number__cell">
<span class="order-number__text">
Order {{ order_name }}
</span>
</td>
</tr>
{%- if po_number %}
<tr>
<td class="po-number__cell">
<span class="po-number__text">
PO number #{{ po_number }}
</span>
</td>
</tr>
{%- endif %}
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
<table class="row content">
<tr>
<td class="content__cell">
<center>
<table class="container">
<tr>
<td>
<h2>{{ email_title }}</h2>
<table class="text-icon-container">
<tr class="text-icon-row">
<td class="text-icon"><img src="{{ 'notifications/question.png' | shopify_asset_url }}" class="text-icon__image"></td>
<td class="text">
<p>Haven't received your package yet? <a href="mailto:{{ shop.email }}">Let us know</a></p>
</td>
</tr>
</table>
{% if order_status_url %}
<table class="row actions">
<tr>
<td class="empty-line"> </td>
</tr>
<tr>
<td class="actions__cell">
<table class="button main-action-cell">
<tr>
<td class="button__cell"><a href="{{ order_status_url }}" class="button__text">View your order</a></td>
</tr>
</table>
{% if shop.url %}
<table class="link secondary-action-cell">
<tr>
<td class="link__cell">or <a href="{{ shop.url }}">Visit our store</a></td>
</tr>
</table>
{% endif %}
</td>
</tr>
</table>
{% else %}
{% if shop.url %}
<table class="row actions">
<tr>
<td class="actions__cell">
<table class="button main-action-cell">
<tr>
<td class="button__cell"><a href="{{ shop.url }}" class="button__text">Visit our store</a></td>
</tr>
</table>
</td>
</tr>
</table>
{% endif %}
{% endif %}
{% if fulfillment.tracking_numbers.size > 0 %}
<p class="disclaimer__subtext">
<br/>
{% if fulfillment.tracking_numbers.size == 1 and fulfillment.tracking_company and fulfillment.tracking_url %}
{{ fulfillment.tracking_company }} tracking number: <a href="{{ fulfillment.tracking_url }}">{{ fulfillment.tracking_numbers.first }}</a>
{% elsif fulfillment.tracking_numbers.size == 1 %}
Tracking number: {{ fulfillment.tracking_numbers.first }}
{% else %}
{{ fulfillment.tracking_company }} tracking numbers:<br />
{% for tracking_number in fulfillment.tracking_numbers %}
{% if fulfillment.tracking_urls[forloop.index0] %}
<a href="{{ fulfillment.tracking_urls[forloop.index0] }}">
{{ tracking_number }}
</a>
{% else %}
{{ tracking_number }}
{% endif %}
<br/>
{% endfor %}
{% endif %}
</p>
{% endif %}
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
<table class="row section">
<tr>
<td class="section__cell">
<center>
<table class="container">
<tr>
<td>
<h3>Items in this shipment</h3>
</td>
</tr>
</table>
<table class="container">
<tr>
<td>
<table class="row">
{% for line in fulfillment.fulfillment_line_items %}
<tr class="order-list__item">
<td class="order-list__item__cell">
<table>
{% assign expand_bundles = false %}
{% if expand_bundles and line.line_item.bundle_parent? %}
<td class="order-list__parent-image-cell">
{% if line.line_item.image %}
<img src="{{ line.line_item | img_url: 'compact_cropped' }}" align="left" width="60" height="60" class="order-list__product-image"/>
{% else %}
<div class="order-list__no-image-cell">
<img src="{{ 'notifications/no-image.png' | shopify_asset_url }}" align="left" width="60" height="60" class="order-list__no-product-image"/>
</div>
{% endif %}
</td>
{% else %}
<td class="order-list__image-cell">
{% if line.line_item.image %}
<img src="{{ line.line_item | img_url: 'compact_cropped' }}" align="left" width="60" height="60" class="order-list__product-image"/>
{% else %}
<div class="order-list__no-image-cell">
<img src="{{ 'notifications/no-image.png' | shopify_asset_url }}" align="left" width="60" height="60" class="order-list__no-product-image"/>
</div>
{% endif %}
</td>
{% endif %}
<td class="order-list__product-description-cell">
{% if line.line_item.product.title %}
{% assign line_title = line.line_item.product.title %}
{% else %}
{% assign line_title = line.line_item.title %}
{% endif %}
{% if line.quantity < line.line_item.quantity %}
{% capture line_display %}
{{ line.quantity }} of {{ line.line_item.quantity }}
{% endcapture %}
{% else %}
{% assign line_display = line.line_item.quantity %}
{% endif %}
<span class="order-list__item-title">{{ line_title }} × {{ line_display }}</span><br/>
{% if line.line_item.variant.title != 'Default Title' and line.line_item.bundle_parent? == false %}
<span class="order-list__item-variant">{{ line.line_item.variant.title }}</span><br/>
{% elsif line.line_item.variant.title != 'Default Title' and line.line_item.bundle_parent? and expand_bundles == false %}
<span class="order-list__item-variant">{{ line.line_item.variant.title }}</span><br/>
{% endif %}
{% comment %}Added section for line item properties{% endcomment %}
{% for property in line.line_item.properties %}
{% assign property_first_char = property.first | slice: 0 %}
{% if property.last != blank and property_first_char != '_' %}
<p class="line-item-property">
{{ property.first }}: {{ property.last }}
</p>
{% endif %}
{% endfor %}
{% if expand_bundles %}
{% for component in line.line_item.bundle_components %}
<table>
<tr class="order-list__item">
<td class="order-list__bundle-item">
<table>
<td class="order-list__image-cell">
{% if component.image %}
<img src="{{ component | img_url: 'compact_cropped' }}" align="left" width="40" height="40" class="order-list__product-image"/>
{% else %}
<div class="order-list__no-image-cell small">
<img src="{{ 'notifications/no-image.png' | shopify_asset_url }}" align="left" width="40" height="40" class="order-list__no-product-image small"/>
</div>
{% endif %}
</td>
<td class="order-list__product-description-cell">
{% if component.product.title %}
{% assign component_title = component.product.title %}
{% else %}
{% assign component_title = component.title %}
{% endif %}
{% assign component_display = component.quantity %}
<span class="order-list__item-title">{{ component_title }} × {{ component_display }}</span><br>
{% if component.variant.title != 'Default Title'%}
<span class="order-list__item-variant">{{ component.variant.title }}</span>
{% endif %}
</td>
</table>
</td>
</tr>
</table>
{% endfor %}
{% else %}
{% for group in line.line_item.groups %}
<span class="order-list__item-variant">Part of: {{ group.display_title }}</span><br/>
{% endfor %}
{% endif %}
{% if line.line_item.selling_plan_allocation %}
<span class="order-list__item-variant">{{ line.line_item.selling_plan_allocation.selling_plan.name }}</span><br/>
{% endif %}
{% if line.line_item.refunded_quantity > 0 %}
<span class="order-list__item-refunded">Refunded</span>
{% endif %}
{% if line.line_item.discount_allocations %}
{% for discount_allocation in line.line_item.discount_allocations %}
{% if discount_allocation.discount_application.target_selection != 'all' %}
<p>
<span class="order-list__item-discount-allocation">
<img src="{{ 'notifications/discounttag.png' | shopify_asset_url }}" width="18" height="18" class="discount-tag-icon" />
<span>
{{ discount_allocation.discount_application.title | upcase }}
(-{{ discount_allocation.amount | money }})
</span>
</span>
</p>
{% endif %}
{% endfor %}
{% endif %}
</td>
</table>
</td>
</tr>
{% endfor %}
</table>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
<table class="row footer">
<tr>
<td class="footer__cell">
<center>
<table class="container">
<tr>
<td>
<p class="disclaimer__subtext">If you have any questions, reply to this email or contact us at <a href="mailto:{{ shop.email }}">{{ shop.email }}</a></p>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
<img src="{{ 'notifications/spacer.png' | shopify_asset_url }}" class="spacer" height="1" />
</td>
</tr>
</table>
</body>
</html>
Please go to settings.
Click custom data -> products
Here only Namespace and key is the critical for us. Name and description could be anything to define the action to us.
Name: Hide Products From Shopify Search
Namespace and key: seo.hidden
Description: Hide active products from Shopify Search
Please ensure that namespace and key is the exactly same with above.
Then click Select Type and choose Integer and save it.
Please go to products -> scroll down to see Metafields section and write 1 in there and click the save button.
After completing these steps, add-on product should be hidden when it is searched on your Shopify store.
Each field label and input field has unique ID, so we can target them and add advanced styling separately to them.
Here where you need to write your custom css:
