Adding Shipping Calculator which shows multiple rates on cart page

New Member
1 0 0



My website link is

I've managed to add the shipping calculator mentioned in the shopify theme tutorials here:


Because I have the minimal sectioned theme, I believe it uses the handlebars.js template instead of the original underscore template for the nonsectional.


Therefore, pressing the calculate button returns only the starting shipping price 

 Rates start at {{price}}

 However, I would like to implement the functionality in the original script, which shows amount of rates available for address and each rate with name following the heading: 

<script id="shipping-calculator-response-template" type="text/template">
  <p id="shipping-rates-feedback" <% if (success) { %> class="success" <% } else { %> class="error" <% } %>>
  <% if (success) { %>
    <% if (rates.length > 1) { %> 
    There are <%- rates.length %> shipping rates available for <%- address %>, starting at <%= rates[0].price %>.
    <% } else if (rates.length == 1) { %>
    There is one shipping rate available for <%- address %>.
    <% } else { %>
    We do not ship to this destination.
    <% } %>
  <% } else { %>
    <%- errorFeedback %>
  <% } %>
  <ul id="shipping-rates">
    <% for (var i=0; i<rates.length; i++) { %>
    <li><%- rates[i].name %> at <%= rates[i].price %></li>
    <% } %>

I've tried converting this into handlebars (I have very little as to how it works and how to create a block helper) and have been able to display the rate array's length + first price but not the address nor the object identifiers (nonsectioned version shows "Next Day at $Price", "Within the Hour at", etc.).


Here is my code and the result on my site: 

<script id="shipping-calculator-response-template" type="text/template">
  {% raw %}
  <p id="shipping-rates-feedback" {{#if success}} class="success" {{else}} class="error" {{/if}}>
  {{#if success}}
    {{#if rates}}
      {{#each rates}}
        {{#if @first}}
           <h3>There are {{rates.length}} shipping rates available for {{address}}, starting at {{price}}.</h3>
       	<li>{{this}} at {{price}}</li>
      We do not ship to this destination.
    {{ errorFeedback }}
  {% endraw %}


Would really appreciate the help!


Replies 3 (3)
Shopify Partner
114 2 16

Did you ever figure this out?

15 2 1

I've been battling with this issue for days ... then found your post which explains about the change from _underscore - thank you.

The old code was fine.  You could display shipping options e.g.

Standard Postage         $x
Signed & Signed For    $y

Now it seems Shopify just displays:    "Rates start at $x"     How does that help a potential customer!

This really needs fixing.   Can anyone assist?

59 2 8

Hey there! Wanted to ask if you already solved this one? Would be a big help. Thanks~