FROM CACHE - en_header
Shopify Discussions
All things Shopify and commerce
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
- Shopify Community
- :
- Shopify Discussion
- :
- Shopify Discussions
- :
- product image and customer info doesnt show in my custom email
Options
- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark
- Subscribe
- Mute
- Printer Friendly Page
product image and customer info doesnt show in my custom email
Solved
product image and customer info doesnt show in my custom email
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
04-04-2024
10:02 PM
Hey Guys,
I created this custom code for my order confirmation email but I cant seem to get the product image or customer info (shipping address, billing address etc.) to show. I was hoping someone knew how to fix this issue? I am also trying to add a subtotal and total price after the shown products but I just cant make it happen. I would really appreciate it if someone could help me on this.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ shop.name }}</title>
<style>
body {
font-family: 'Poppins', sans-serif;
margin: 0;
padding: 0;
background-color: #f8f8f8;
}
.container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
background-color: #f8f8f8;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
.header {
text-align: center;
margin-bottom: 20px;
}
h1 {
color: #4b4b4b;
font-weight: bold;
font-size: 30px;
text-align: center;
}
.sale {
max-width: 400px;
margin: 0 auto;
padding: 20px;
background-color: white;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
.content {
padding: 20px;
border-top: 2px solid #F07E82;
border-bottom: 2px solid #F07E82;
margin-bottom: 20px;
}
.content p {
margin-bottom: 10px;
font-size: 16px;
line-height: 1.5;
text-align: center;
color: #7a7a7a;
}
.button {
display: inline-block;
padding: 10px 20px;
background-color: #F07E82;
color: #ffffff;
text-decoration: none;
border-radius: 5px;
font-size: 16px;
border: 2px solid #F07E82;
transition: ease-in-out 0.4s;
}
.button:hover {
background-color: #f8f8f8;
color: #F07E82;
}
.order-details {
margin-bottom: 20px;
}
.order-details h2 {
padding-top: 22px;
font-size: 20px;
font-weight: lighter;
margin-bottom: 10px;
color: #4b4b4b;
text-align: center;
}
.order-details p {
font-size: 16px;
margin-bottom: 5px;
}
.order-summary {
margin-bottom: 20px;
}
.order-summary ul {
list-style-type: none;
padding: 0;
}
.order-summary ul li {
margin-bottom: 10px;
font-size: 16px;
}
.order-summary ul li strong {
font-weight: bold;
}
.order-items {
margin-bottom: 20px;
}
.order-items ul {
list-style-type: none;
padding: 0;
}
.order-items ul li {
margin-bottom: 10px;
font-size: 16px;
}
.order-items ul li img {
vertical-align: middle;
margin-right: 10px;
border-radius: 5px;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
}
.customer-info {
margin-bottom: 20px;
}
.customer-info h3 {
margin-bottom: 10px;
font-size: 18px;
font-weight: bold;
}
.customer-info p {
font-size: 16px;
margin-bottom: 5px;
}
.footer {
text-align: center;
color: #777777;
font-size: 14px;
}
.footer a {
color: #F07E82;
text-decoration: none;
}
.spacer {
height: 1px;
background-color: #F07E82;
margin-bottom: 20px;
}
.status {
padding-top: 13px;
}
.order-details h3 {
padding-top: 40px;
color: #bdbdbd;
font-weight: lighter;
}
.order-details span {
color: #7a7a7a;
}
.customer-info h3 {
color: #bdbdbd;
font-weight: lighter;
}
.customer-info p {
color: #7a7a7a;
font-weight: lighter;
}
.sale p {
text-align: center;
}
.discount {
text-align: center;
font-size: 25px;
max-width: 340px;
margin: 0 auto;
background-color: white;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
border: dotted 3px #F07E82;
}
.button {
width: 300px;
}
#mydiv { border: dotted 1px black; }
.footer p{
padding-top: 20px;
}
</style>
</head>
<body>
Copy code
<div class="container">
<div class="header">
<h1>Order Confirmation</h1>
</div>
<div class="content">
<p>Hey {{ customer.first_name }},</p>
<p>Thank you for your purchase, this email confirms your order. We will send you another email as soon as your order is {% if pickup_in_store? %}ready for pickup{% else %}shipped{% endif %}.</p>
<p class="status">You can follow the status of your order by clicking the button below:</p>
<p><a href="{{ tracking_button_url }}" class="button">VIEW ORDER STATUS ></a></p>
</div>
<div class="spacer"></div>
<div class="order-details">
<h2>ORDER NO. {{ order_name }}</h2>
<h3>ITEMS ORDERED</h3>
<ul>
{% for line in line_items %}
<li>
<img src="{{ line.product.featured_image }}" alt="{{ line.title }}" width="50%">
<span>{{ line.title }}</span>
<span>{{ line.quantity }}</span>
</li>
{% endfor %}
</ul>
</div>
<div class="spacer"></div>
<div class="customer-info">
<h3>Customer Information:</h3>
{% if requires_shipping %}
<p><strong>Shipping Address:</strong><br>{{ shipping_address }}</p>
{% endif %}
{% if billing_address %}
<p><strong>Billing Address:</strong><br>{{ billing_address }}</p>
{% endif %}
</div>
<div class="footer">
<p>If you have any questions, feel free to reply to this email or contact us at <a href="mailto:{{ shop.email }}">{{ shop.email }}</a>.</p>
<p>Many Thanks, Vikara Team</p>
</div>
<div class="spacer"></div>
<div class="sale">
<h1>10% OFF DISCOUNT</h1>
<p>As thanks for shopping with us, we're giving you a discount coupon to use on your next purchase.</p>
<div class="discount" id="discount">
<h3>VKL10</h3>
</div>
<p><a href="vikara.shop" width="50px" class="button">SHOP NOW ></a></p>
</div>
<div style="margin-top: 20px;"class="spacer"></div>
<div class="footer">
<span ><a href="https://www.vikara.shop/products/">SHOP</a></span>
<span style="margin-left: 80px;"><a href="vikara.shop">HOME</a></span>
<span style="margin-left: 80px;"><a href="https://www.vikara.shop/pages/contact">CONTACT</a></span>
</div>
</div>
</body>
</html>
Solved! Go to the solution
Labels:
- Labels:
-
Troubleshooting
Accepted Solution (1)
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
04-04-2024
11:58 PM
This is an accepted solution.
Hi @Nirmine1111 ,
I have fixed the template to display image, subtotal and total.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ shop.name }}</title>
<style>
body {
font-family: 'Poppins', sans-serif;
margin: 0;
padding: 0;
background-color: #f8f8f8;
}
.container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
background-color: #f8f8f8;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
.header {
text-align: center;
margin-bottom: 20px;
}
h1 {
color: #4b4b4b;
font-weight: bold;
font-size: 30px;
text-align: center;
}
.sale {
max-width: 400px;
margin: 0 auto;
padding: 20px;
background-color: white;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
.content {
padding: 20px;
border-top: 2px solid #F07E82;
border-bottom: 2px solid #F07E82;
margin-bottom: 20px;
}
.content p {
margin-bottom: 10px;
font-size: 16px;
line-height: 1.5;
text-align: center;
color: #7a7a7a;
}
.button {
display: inline-block;
padding: 10px 20px;
background-color: #F07E82;
color: #ffffff;
text-decoration: none;
border-radius: 5px;
font-size: 16px;
border: 2px solid #F07E82;
transition: ease-in-out 0.4s;
}
.button:hover {
background-color: #f8f8f8;
color: #F07E82;
}
.order-details {
margin-bottom: 20px;
}
.order-details h2 {
padding-top: 22px;
font-size: 20px;
font-weight: lighter;
margin-bottom: 10px;
color: #4b4b4b;
text-align: center;
}
.order-details p {
font-size: 16px;
margin-bottom: 5px;
}
.order-summary {
margin-bottom: 20px;
}
.order-summary ul {
list-style-type: none;
padding: 0;
}
.order-summary ul li {
margin-bottom: 10px;
font-size: 16px;
}
.order-summary ul li strong {
font-weight: bold;
}
.order-items {
margin-bottom: 20px;
}
.order-items ul {
list-style-type: none;
padding: 0;
}
.order-items ul li {
margin-bottom: 10px;
font-size: 16px;
}
.order-items ul li img {
vertical-align: middle;
margin-right: 10px;
border-radius: 5px;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
}
.customer-info {
margin-bottom: 20px;
}
.customer-info h3 {
margin-bottom: 10px;
font-size: 18px;
font-weight: bold;
}
.customer-info p {
font-size: 16px;
margin-bottom: 5px;
}
.footer {
text-align: center;
color: #777777;
font-size: 14px;
}
.footer a {
color: #F07E82;
text-decoration: none;
}
.spacer {
height: 1px;
background-color: #F07E82;
margin-bottom: 20px;
}
.status {
padding-top: 13px;
}
.order-details h3 {
padding-top: 40px;
color: #bdbdbd;
font-weight: lighter;
}
.order-details span {
color: #7a7a7a;
}
.customer-info h3 {
color: #bdbdbd;
font-weight: lighter;
}
.customer-info p {
color: #7a7a7a;
font-weight: lighter;
}
.sale p {
text-align: center;
}
.discount {
text-align: center;
font-size: 25px;
max-width: 340px;
margin: 0 auto;
background-color: white;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
border: dotted 3px #F07E82;
}
.button {
width: 300px;
}
#mydiv { border: dotted 1px black; }
.footer p{
padding-top: 20px;
}
</style>
</head>
<body>
Copy code
<div class="container">
<div class="header">
<h1>Order Confirmation</h1>
</div>
<div class="content">
<p>Hey {{ customer.first_name }},</p>
<p>Thank you for your purchase, this email confirms your order. We will send you another email as soon as your order is {% if pickup_in_store? %}ready for pickup{% else %}shipped{% endif %}.</p>
<p class="status">You can follow the status of your order by clicking the button below:</p>
<p><a href="{{ tracking_button_url }}" class="button">VIEW ORDER STATUS ></a></p>
</div>
<div class="spacer"></div>
<div class="order-details">
<h2>ORDER NO. {{ order_name }}</h2>
<h3>ITEMS ORDERED</h3>
<ul>
{% for line in line_items %}
<li>
<img src="{{ line | img_url: 'compact_cropped' }}" alt="{{ line.title }}" width="50%">
<span>{{ line.title }}</span>
<span>{{ line.quantity }}</span>
</li>
{% endfor %}
</ul>
Subtotal: {{ subtotal_price | plus: total_order_discount_amount | money }}
Total: {{ total_price | plus: total_order_discount_amount | money }}
</div>
<div class="spacer"></div>
<div class="customer-info">
<h3>Customer Information:</h3>
{% if requires_shipping %}
<p><strong>Shipping Address:</strong><br>{{ shipping_address | format_address }}</p>
{% endif %}
{% if billing_address %}
<p><strong>Billing Address:</strong><br>{{ billing_address | format_address }}</p>
{% endif %}
</div>
<div class="footer">
<p>If you have any questions, feel free to reply to this email or contact us at <a href="mailto:{{ shop.email }}">{{ shop.email }}</a>.</p>
<p>Many Thanks, Vikara Team</p>
</div>
<div class="spacer"></div>
<div class="sale">
<h1>10% OFF DISCOUNT</h1>
<p>As thanks for shopping with us, we're giving you a discount coupon to use on your next purchase.</p>
<div class="discount" id="discount">
<h3>VKL10</h3>
</div>
<p><a href="vikara.shop" width="50px" class="button">SHOP NOW ></a></p>
</div>
<div style="margin-top: 20px;"class="spacer"></div>
<div class="footer">
<span ><a href="https://www.vikara.shop/products/">SHOP</a></span>
<span style="margin-left: 80px;"><a href="vikara.shop">HOME</a></span>
<span style="margin-left: 80px;"><a href="https://www.vikara.shop/pages/contact">CONTACT</a></span>
</div>
</div>
</body>
</html>
Reply 1 (1)
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
04-04-2024
11:58 PM
This is an accepted solution.
Hi @Nirmine1111 ,
I have fixed the template to display image, subtotal and total.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ shop.name }}</title>
<style>
body {
font-family: 'Poppins', sans-serif;
margin: 0;
padding: 0;
background-color: #f8f8f8;
}
.container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
background-color: #f8f8f8;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
.header {
text-align: center;
margin-bottom: 20px;
}
h1 {
color: #4b4b4b;
font-weight: bold;
font-size: 30px;
text-align: center;
}
.sale {
max-width: 400px;
margin: 0 auto;
padding: 20px;
background-color: white;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
.content {
padding: 20px;
border-top: 2px solid #F07E82;
border-bottom: 2px solid #F07E82;
margin-bottom: 20px;
}
.content p {
margin-bottom: 10px;
font-size: 16px;
line-height: 1.5;
text-align: center;
color: #7a7a7a;
}
.button {
display: inline-block;
padding: 10px 20px;
background-color: #F07E82;
color: #ffffff;
text-decoration: none;
border-radius: 5px;
font-size: 16px;
border: 2px solid #F07E82;
transition: ease-in-out 0.4s;
}
.button:hover {
background-color: #f8f8f8;
color: #F07E82;
}
.order-details {
margin-bottom: 20px;
}
.order-details h2 {
padding-top: 22px;
font-size: 20px;
font-weight: lighter;
margin-bottom: 10px;
color: #4b4b4b;
text-align: center;
}
.order-details p {
font-size: 16px;
margin-bottom: 5px;
}
.order-summary {
margin-bottom: 20px;
}
.order-summary ul {
list-style-type: none;
padding: 0;
}
.order-summary ul li {
margin-bottom: 10px;
font-size: 16px;
}
.order-summary ul li strong {
font-weight: bold;
}
.order-items {
margin-bottom: 20px;
}
.order-items ul {
list-style-type: none;
padding: 0;
}
.order-items ul li {
margin-bottom: 10px;
font-size: 16px;
}
.order-items ul li img {
vertical-align: middle;
margin-right: 10px;
border-radius: 5px;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
}
.customer-info {
margin-bottom: 20px;
}
.customer-info h3 {
margin-bottom: 10px;
font-size: 18px;
font-weight: bold;
}
.customer-info p {
font-size: 16px;
margin-bottom: 5px;
}
.footer {
text-align: center;
color: #777777;
font-size: 14px;
}
.footer a {
color: #F07E82;
text-decoration: none;
}
.spacer {
height: 1px;
background-color: #F07E82;
margin-bottom: 20px;
}
.status {
padding-top: 13px;
}
.order-details h3 {
padding-top: 40px;
color: #bdbdbd;
font-weight: lighter;
}
.order-details span {
color: #7a7a7a;
}
.customer-info h3 {
color: #bdbdbd;
font-weight: lighter;
}
.customer-info p {
color: #7a7a7a;
font-weight: lighter;
}
.sale p {
text-align: center;
}
.discount {
text-align: center;
font-size: 25px;
max-width: 340px;
margin: 0 auto;
background-color: white;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
border: dotted 3px #F07E82;
}
.button {
width: 300px;
}
#mydiv { border: dotted 1px black; }
.footer p{
padding-top: 20px;
}
</style>
</head>
<body>
Copy code
<div class="container">
<div class="header">
<h1>Order Confirmation</h1>
</div>
<div class="content">
<p>Hey {{ customer.first_name }},</p>
<p>Thank you for your purchase, this email confirms your order. We will send you another email as soon as your order is {% if pickup_in_store? %}ready for pickup{% else %}shipped{% endif %}.</p>
<p class="status">You can follow the status of your order by clicking the button below:</p>
<p><a href="{{ tracking_button_url }}" class="button">VIEW ORDER STATUS ></a></p>
</div>
<div class="spacer"></div>
<div class="order-details">
<h2>ORDER NO. {{ order_name }}</h2>
<h3>ITEMS ORDERED</h3>
<ul>
{% for line in line_items %}
<li>
<img src="{{ line | img_url: 'compact_cropped' }}" alt="{{ line.title }}" width="50%">
<span>{{ line.title }}</span>
<span>{{ line.quantity }}</span>
</li>
{% endfor %}
</ul>
Subtotal: {{ subtotal_price | plus: total_order_discount_amount | money }}
Total: {{ total_price | plus: total_order_discount_amount | money }}
</div>
<div class="spacer"></div>
<div class="customer-info">
<h3>Customer Information:</h3>
{% if requires_shipping %}
<p><strong>Shipping Address:</strong><br>{{ shipping_address | format_address }}</p>
{% endif %}
{% if billing_address %}
<p><strong>Billing Address:</strong><br>{{ billing_address | format_address }}</p>
{% endif %}
</div>
<div class="footer">
<p>If you have any questions, feel free to reply to this email or contact us at <a href="mailto:{{ shop.email }}">{{ shop.email }}</a>.</p>
<p>Many Thanks, Vikara Team</p>
</div>
<div class="spacer"></div>
<div class="sale">
<h1>10% OFF DISCOUNT</h1>
<p>As thanks for shopping with us, we're giving you a discount coupon to use on your next purchase.</p>
<div class="discount" id="discount">
<h3>VKL10</h3>
</div>
<p><a href="vikara.shop" width="50px" class="button">SHOP NOW ></a></p>
</div>
<div style="margin-top: 20px;"class="spacer"></div>
<div class="footer">
<span ><a href="https://www.vikara.shop/products/">SHOP</a></span>
<span style="margin-left: 80px;"><a href="vikara.shop">HOME</a></span>
<span style="margin-left: 80px;"><a href="https://www.vikara.shop/pages/contact">CONTACT</a></span>
</div>
</div>
</body>
</html>
Community Blog Articles
Canadian merchants: Update account details by March 24, 2025 to continue us...
Shopify and our financial partners regularly review and update verification requiremen...
By Jacqui Mar 14, 2025
New learning path from Shopify Academy: How to create a digital marketing s...
Unlock the potential of marketing on your business growth with Shopify Academy's late...
By Shopify Mar 12, 2025
Expert insights on conversion rate optimization (CRO) from Shopify Academy ...
Learn how to increase conversion rates in every stage of the customer journey by enroll...
By Shopify Mar 5, 2025