In this Solidus tutorial we will show you how to setup custom email confirmations. 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 unstyled 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/confirm

 

To 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:

 

https://github.com/solidusio/solidus/blob/master/core/app/views/spree/order_mailer/confirm_email.html.erb

 

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.erb

 

Then to make it easier we have created a version that has been tested on both mobile and desktop here, just add the code below.

 

add:

<!-- app/views/spree/order_mailer/confirm_email.html.erb -->
<table>
  <tr>
    <td>
      <p>&nbsp;</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>&nbsp;</p>
      <p>Order Number: &#x23;<%= @order.number %></p>
      <p>Order Date: <%= @order.created_at.strftime("%m/%d/%Y") %></p>
      <p>&nbsp;</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>&nbsp;</p>
      <p>&nbsp;</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 go here:

 

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.erb