How to customize your email confirmations in Solidus open-source ecommerce
In this tutorial, we will demonstrate how to customize email confirmations in Solidus, the open-source eCommerce platform. By default, Solidus offers email templates that may not meet all of your needs, so we will show you how to create custom templates to better suit your business. We will walk you through the steps for setting up custom email confirmations and provide tips and best practices to help ensure the success of your email marketing efforts. Whether you are new to Solidus or an experienced user, this tutorial will provide valuable insights and guidance for improving your email confirmations. So, let's get started!
The default email templates Solidus open-source eCommerce platform provides aren't amazing according to @jhawthron a core developer of the open-source eCommerce Solidus platform on "Better default email templates" subject and haven't been updated for quite some time he says in this closed issue: https://github.com/solidusio/solidus/issues/316
Finding documentation for this process isn't available anywhere, so we decided to share the steps provided to fully customize your email confirmations for your next e-commerce website.
When we work with clients that request a more custom eCommerce experience this is one of the initial components we design and develop as part of the project scope of work. This step is a very important part of an eCommerce website that sometimes is not considered how impactful a custom email confirmation template can help achieve a better more successful user-experience for the brand identity and checkout flow of the eCommerce online store.
First things to know, Solidus platform has a Mailer preview that can be accessed here when running your local environment.
http://localhost:3000/rails/mailers/Here you have the "Spree Mailer Preview" for Reimbursement, Order Cancel, Confirmation email, and Inventory Cancellation as well as Shipped email confirmation template.
If you click on Confirm you will see an un-styled version of the email that gets sent to the client by default. The direct URL should be:
http://localhost:3000/rails/mailers/spree/mailer_previews/order/confirmTo edit the page you will first have to create a version of the file by overriding the default core template that can be found in this path of the Solidus Core Github code:
You can do this by running this on the root of your app via your terminal:
$> touch app/views/spree/order_mailer/confirm_email.html.erbThen to make it easier we have created a version that has been tested on both mobile and desktop here, just add the code below.
<!-- app/views/spree/order_mailer/confirm_email.html.erb -->
<table>
<tr>
<td>
<p> </p>
<p class="lede">
<% if @order.billing_firstname %>
Dear <%= @order.billing_firstname %>,
<% else %>
<%= t('.dear_customer') %>
<% end %>
</p>
<p>
Thank you for your purchase from <%= @store.url %>. Please review and retain the following order information for your records.
<%#= t('.instructions') %>
</p>
<p> </p>
<p>Order Number: #<%= @order.number %></p>
<p>Order Date: <%= @order.created_at.strftime("%m/%d/%Y") %></p>
<p> </p>
<p><b><%= t('.order_summary').upcase %></b></p>
<br>
<table>
<thead>
<tr>
<th width="30%"></th>
<th width="17%">Sku</th>
<th width="17%">Name</th>
<th width="8%">Qty</th>
<th width="14%">Price</th>
<th width="14%">Total</th>
</tr>
<tr>
<th colspan="6">
<hr>
</th>
</tr>
</thead>
<% @order.line_items.each do |item| %>
<tr>
<td>
<%= render 'spree/admin/shared/image', image: item.variant.display_image, size: :mini %>
</td>
<td><%= item.variant.sku %></td>
<td>
<%= item.variant.product.name %>
<br>
<%= item.variant.options_text -%>
</td>
<td><%=item.quantity%></td>
<td><%= item.single_money %></td>
<td><%= item.display_amount %></td>
</tr>
<% end %>
<tr>
<td colspan="6">
<hr>
</td>
</tr>
<tr>
<td colspan="3"></td>
<td colspan="2">
<%= t('.subtotal') %>
</td>
<td>
<%= @order.display_item_total %>
</td>
</tr>
<% if @order.line_item_adjustments.exists? %>
<% if @order.all_adjustments.promotion.eligible.exists? %>
<% @order.all_adjustments.promotion.eligible.group_by(&:label).each do |label, adjustments| %>
<tr>
<td colspan="3"></td>
<td colspan="2">
<%= t('spree.promotion') %> <%= label %>:
</td>
<td><%= Spree::Money.new(adjustments.sum(&:amount), currency: @order.currency) %></td>
</tr>
<% end %>
<% end %>
<% end %>
<% @order.shipments.group_by { |s| s.selected_shipping_rate.try(:name) }.each do |name, shipments| %>
<tr>
<td colspan="3"></td>
<td colspan="2">
<%= t('spree.shipping') %> <%= name %>:
</td>
<td><%= Spree::Money.new(shipments.sum(&:total_before_tax), currency: @order.currency) %></td>
</tr>
<% end %>
<% if @order.all_adjustments.eligible.tax.exists? %>
<% @order.all_adjustments.eligible.tax.group_by(&:label).each do |label, adjustments| %>
<tr>
<td colspan="3"></td>
<td colspan="2">
<%#= t('spree.tax') %> <%= label %>
</td>
<td><%= Spree::Money.new(adjustments.sum(&:amount), currency: @order.currency) %></td>
</tr>
<% end %>
<% end %>
<% @order.adjustments.eligible.each do |adjustment| %>
<% next if (adjustment.source_type == 'Spree::TaxRate') and (adjustment.amount == 0) %>
<tr>
<td colspan="3"></td>
<td colspan="2">
<%= adjustment.label %>
</td>
<td><%= adjustment.display_amount %></td>
</tr>
<% end %>
<tr>
<td colspan="3"></td>
<td colspan="2">
<%= t('.total') %>
</td>
<td>
<%= @order.display_total %>
</td>
</tr>
</table>
<p> </p>
<p> </p>
<p>We will notify you when your order ships. If you have any questions, please contact us at <u><%= @store.mail_from_address %></u>.
<%#= t('.thanks') %>
</p>
</td>
<td class="expander"></td>
</tr>
</table>And to preview your changes you can access them by visiting the following local environment url : http://localhost:3000/rails/mailers/spree/mailer_previews/order/confirm
That's it!
The other locations of the files to override for the Shipping confirmation can be found in:
app/views/spree/carton_mailer/shipped_email.html.erb
The Header and Footer of the email confirmations can be found here:
app/views/layouts/spree/base_mailer.html.erbUnlock your potential with our services
Fill out the form below and we will contact you shortly.
