How to modify the shipping calculator HTML in Shopify
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 > Themesin Shopify Admins
- Step 2: Look for the theme that you want then tab
Actions > Edit Codes
- Step 3: Click
shipping-calculator.liquidin 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.
How to modify the shipping calculator HTML on iPhone/Android (Click here)
- Step 1: Open Store in Shopify App
- Step 2: Click Online Store on Sales Channel
- Step 3: Tap Manage Theme
- Step 4: Choose the layout you want to edit, then click Actions > Edit Codes.
- Step 5: Click
shipping-calculator.liquid in the Snippets directory
- Step 6: Edit the code if needed. You are able to add new categories and move the existing HTML elements around in the file.
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.