How to modify the shipping calculator CSS in Shopify

Updated: June 23, 2021


Drive 20-40% of your revenue with AVADA
avada email marketing

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

Table of content

Attention when applying these steps for CSS

You should clarify with which theme you are using, whether it is sectioned theme or non-sectioned theme. 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.

Sectioned theme is a new theme allowing you to create and arrange the layout of your e-store’s websites while non-sectioned theme is an older one published before October 2016 without Section directory.

How to modify the shipping calculator CSS

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 modify the shipping calculator css ###Step 3: Click theme.scss.liquid in the Assets directory

Step 4:

Add either the content of this CSS file or your own custom CSS code.

how to modify the shipping calculator css ###Step 5: Save


In a nutshell, we hope that this tutorial is helpful for you and for your improvement of customer engagement. Your website would become more friendly with customers when they order items are beyond your free-shipping zones you have any questions, you can comment below the article and we will address this. Hope that you will find a better solution when following this method for shipping calculator on CSS.

Recommend for you
Image Description
SMS, Email Marketing Automation

Top rated Marketing automation for Shopify stores

Learn more
Image Description
SEO Suite

Auto-optimize website elements and structure in one-click.

Learn more
Boost Sales [Free]

Boost sales: Sales Pop, Trust badges, Countdown timer, more

Learn more
Image Description
Photo Reviews [Free]

Use photo reviews to boost sales

Learn more


Stay in the know

Get special offers on the latest news from AVADA.

40k subscribers has been joined!

Earn $10 in reward now!

go up