Add a shipping rates calculator to your Shopify cart

You can add a shipping rates calculator to your cart page that lets customers estimate their shipping costs before they proceed to the checkout page.

The shipping rates calculator displays your shipping rates on the cart page of your store. If a customer is logged in, then the calculator uses the customer’s default shipping address to estimate shipping rates. The shipping rates calculator works with carrier-calculated rates, manual rates, or a combination of the two.

Step 1: Editing your theme code to add the shipping calculator

1. 1. From your Shopify admin, go to Online Store > Themes.
   2. Find the theme you want to edit, and then click Actions > Edit code.
   3. In the Assets directory, click vendor.js. If your theme doesn’t have a vendor.js file, then click theme.js instead.
   4. To the very bottom of vendor.js, paste this code hosted on GitHub. If you are editing theme.js instead, then paste the same code snippet at the very top of the file.
   5. Click Save.
   6. In the Assets directory, click theme.js. To the very bottom of the file, paste the following code:
      
      JavaScript

      Shopify.Cart.ShippingCalculator.show({ submitButton: theme.strings.shippingCalcSubmitButton, submitButtonDisabled: theme.strings.shippingCalcSubmitButtonDisabled, customerIsLoggedIn: theme.strings.shippingCalcCustomerIsLoggedIn, moneyFormat: theme.strings.shippingCalcMoneyFormat });

      1 2 3 4 5 6

      Shopify.Cart.ShippingCalculator.show({   submitButton: theme.strings.shippingCalcSubmitButton,   submitButtonDisabled: theme.strings.shippingCalcSubmitButtonDisabled,   customerIsLoggedIn: theme.strings.shippingCalcCustomerIsLoggedIn,   moneyFormat: theme.strings.shippingCalcMoneyFormat });

   7. Click Save.
   8. In the Snippets directory, click Add a new snippet.
   9. Name your new snippet shipping-calculator, and click Create snippet:
      
      
      
      Your new snippet will open in the code editor.
   10. Into your new shipping-calculator.liquid snippet, paste this code hosted on GitHub.
   11. Click Save.
   12. In the Sections directory, click cart-template.liquid. If your theme doesn’t have a cart-template.liquid file, then, in the Templates directory, click cart.liquid.
   13. Find the closing </form> tag. On a new line right above the closing </form> tag, paste the following code:
       
       {% include 'shipping-calculator' %}

       1	{% include 'shipping-calculator' %}

   14. At the very bottom of the file, paste the following code:
       
       <script> theme.strings = { shippingCalcSubmitButton: {{ settings.shipping_calculator_submit_button_label | default: 'Calculate shipping' | json }}, shippingCalcSubmitButtonDisabled: {{ settings.shipping_calculator_submit_button_label_disabled | default: 'Calculating...' | json }}, {% if customer %}shippingCalcCustomerIsLoggedIn: true,{% endif %} shippingCalcMoneyFormat: {{ shop.money_with_currency_format | json }} } </script> <script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.10/handlebars.min.js"></script> <script src="/services/javascripts/countries.js"></script> <script src="{{ 'shopify_common.js' | shopify_asset_url }}" defer="defer"></script>

       1 2 3 4 5 6 7 8 9 10 11

       <script>   theme.strings = {       shippingCalcSubmitButton: {{ settings.shipping_calculator_submit_button_label | default: 'Calculate shipping' | json }},       shippingCalcSubmitButtonDisabled: {{ settings.shipping_calculator_submit_button_label_disabled | default: 'Calculating...' | json }},       {% if customer %}shippingCalcCustomerIsLoggedIn: true,{% endif %}       shippingCalcMoneyFormat: {{ shop.money_with_currency_format | json }}   } </script> <script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.10/handlebars.min.js"></script> <script src="/services/javascripts/countries.js"></script> <script src="{{ 'shopify_common.js' | shopify_asset_url }}" defer="defer"></script>

   15. Click Save.
   16. In the Config directory, click settings_schema.json. The file will open in the code editor.
   17. Near the very bottom of the file, paste the following code before the last square bracket ] and after the last curly bracket } – make sure to include that first comma , since you’re modifying a JSON data structure:
       
       , { "name": "Shipping Rates Calculator", "settings": [ { "type": "select", "id": "shipping_calculator", "label": "Show the shipping calculator?", "options": [ { "value": "Disabled", "label": "No" }, { "value": "Enabled", "label": "Yes" } ], "default": "Enabled" }, { "type": "text", "id": "shipping_calculator_heading", "label": "Heading text", "default": "Get shipping estimates" }, { "type": "text", "id": "shipping_calculator_default_country", "label": "Default country selection", "default": "United States" }, { "type": "paragraph", "content": "If your customer is logged-in, the country in his default shipping address will be selected. If you are not sure about the spelling to use here, refer to the first checkout page." }, { "type": "text", "id": "shipping_calculator_submit_button_label", "label": "Submit button label", "default": "Calculate shipping" }, { "type": "text", "id": "shipping_calculator_submit_button_label_disabled", "label": "Submit button label when calculating", "default": "Calculating..." }, { "type": "paragraph", "content": "Do not forget to include the snippet shipping-calculator in your cart.liquid template where you want the shipping calculator to appear. You can get the snippet here: [shipping-calculator.liquid](https:\/\/github.com\/carolineschnapp\/shipping-calculator\/blob\/master\/shipping-calculator.liquid) ." } ] }

       1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54

       ,   {     "name": "Shipping Rates Calculator",     "settings": [       {         "type": "select",         "id": "shipping_calculator",         "label": "Show the shipping calculator?",         "options": [           {             "value": "Disabled",             "label": "No"           },           {             "value": "Enabled",             "label": "Yes"           }         ],         "default": "Enabled"       },       {         "type": "text",         "id": "shipping_calculator_heading",         "label": "Heading text",         "default": "Get shipping estimates"       },       {         "type": "text",         "id": "shipping_calculator_default_country",         "label": "Default country selection",         "default": "United States"       },       {         "type": "paragraph",         "content": "If your customer is logged-in, the country in his default shipping address will be selected. If you are not sure about the  spelling to use here, refer to the first checkout page."       },       {         "type": "text",         "id": "shipping_calculator_submit_button_label",         "label": "Submit button label",         "default": "Calculate shipping"       },       {         "type": "text",         "id": "shipping_calculator_submit_button_label_disabled",         "label": "Submit button label when calculating",         "default": "Calculating..."       },       {         "type": "paragraph",         "content": "Do not forget to include the snippet shipping-calculator in your cart.liquid template where you want the shipping  calculator to appear. You can get the snippet here: [shipping-calculator.liquid](https:\/\/github.com\/carolineschnapp\/shipping-calculator\/blob\/master\/shipping-calculator.liquid) ."       }     ]   }

Step 2: Configuring your shipping rates calculator

You can now edit the settings for your shipping rates calculator from the theme editor.

1. Go to the theme editor.
2. Under Theme settings, click Shipping Rates Calculator to view and edit the calculator settings.
   You can configure the following settings:
   • • Show the shipping calculator? – set this to Yes to display the shipping rates calculator on your cart page, or No to hide it
     • Heading text – enter the text that will be displayed above your shipping rates calculator
     • Default country selection – choose which country will be selected by default
     • Submit button label – enter the text that will be shown on the submit button.

Step 3: Editing the HTML or CSS of the calculator

You can edit the HTML code for your shipping rates calculator to make more advanced customizations.

1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme you want to edit, and then click Actions > Edit code.
3. In the Snippets directory, click shipping-calculator.liquid.
4. Edit the code as needed. You can add new classes and move the existing HTML elements around in the file to suit your needs.
5. Click Save.

If you want to change the appearance of your shipping rates calculator, then you can add some CSS to your theme stylesheet.

1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme you want to edit, and then click Actions > Edit code.
3. In the Assets directory, click theme.scss.liquid.
4. At the very bottom of the file, add either the contents of this CSS file, or your own custom CSS code.
5. Click Save.

DEMO

Related Posts via Categories

• Top 4+ “AI Size Recommender” Apps For Shopify
• The Best Shopify Apps for New Order Notifications on Twitch
• How To Check The Total Current Fees of Shopify Apps on Your Online Store
• The Best Shopify Apps For Glasses Virtual Try-On
• The Best Shopify Apps For Converting Prices To Cryptocurrency
• Top Shopify Apps for Seamless Sales Integration Across Multiple Websites
• Top 14+ Best Shopify Video Stories Apps
• Top 10+ “Try Before You Buy” Shopify Apps
• 10+ Necessary Shopify Apps For Your Online Jewelry Stores
• How To Create an On-Sale Automated Collection in Shopify