Home > Shopify Development > How to modify the shipping calculator HTML

How to modify the shipping calculator HTML in Shopify

Sam Updated: June 23, 2024

Drive 20-40% of your revenue with Avada

Get Started

If you are selling products and your orders are beyond of free-shipping zone, customer’s bill has to include the shipping fee. Therefore, you want to install the shipping calculator. This tutorial will help you to modify the sipping calculator HTML.

Table of content

What are sectioned and non-sectioned themes?
Attention when applying these steps
How to modify the shipping calculator HTML

What are sectioned and non-sectioned themes?

The sectioned theme is a new theme allowing you to create and arrange the layout of your e-store’s websites while the non-sectioned theme is an older one published before October 2016 without Section directory. Therefore, to check which theme you are using, you go to Edit code page, if files exist in Section directory, it means that sectioned theme is being utilized or vice versa.

In addition, a sectioned theme will show two tabs at the top of editor titled Sections and General Settings while a non-sectioned theme has only one column in theme editor consisting of tools or functions like general, colors and fonts, headers, footers, collection pages and so one.

Attention when applying these steps

Before you follow these steps below, you should be clear about which theme you are using. If there are files in the Sections directory, then your theme belongs to a sectioned theme while a non-sectioned theme does not have files in Sections directory.

These steps for sectioned and non-sectioned themes are the same.

How to modify the shipping calculator HTML

Step 1:

Open Online Store > Themes in Shopify Admins

Step 2:

Look for the theme that you want then tab Actions > Edit Codes

How to add the gift wrapping snippet in Shopify

Step 3:

Click shipping-calculator.liquid in the Snippets directory

Step 4:

Edit the code if needed. You are able to add new categories and move the existing HTML elements around in the file.

Conclusion

To sum up, the tutorial helps to modify the shipping calculator HTML in your website. It will assist you in showing bills included shipping fee on the HTML platform. Let us know about your difficulties and we will address this.

Catalog

How to modify the shipping calculator HTML How to add the gift-wrapping snippet in your cart template How to modify your theme.liquid file How to insert some JavaScript to your theme Delete the author's name in your theme Insert the search box on your Jekyll site using lunr.js Liquid Variables: assign, capture, increment, increment Liquid paginate: Split into multiple pages Update the product form to support dynamic checkout buttons Select which page to show when customers log in to your online store Modify the code for your payment icons Insert the security badge code to your theme Insert Disqus to your blog Insert breadcrumb navigation to your store Generate your snippet generate the "How did you hear about us" form field Generate and include an age-check snippet Generate a back-to-the-top snippet Edit correct quantities on the cart page silently Apply a class to your templates Update item quantity fields in the cart Update the collection-template.liquid file Modify the theme code to add the shipping calculator Insert the notification form code to your theme Insert custom fields to your theme's customer registration form Add Custom Fields to Contact Form in Shopify Insert a form field to your theme code Insert a Continue shopping link to your cart page Insert a checkbox to your cart page in sectioned themes How To Create A Contact Page On Shopify: Our Step-by-Step Guide

Sam Nguyen

Sam Nguyen is the CEO and founder of Avada Commerce, an e-commerce solution provider headquartered in Singapore. He is an expert on the Shopify e-commerce platform for online stores and retail point-of-sale systems. Sam loves talking about e-commerce and he aims to help over a million online businesses grow and thrive.