Shipping Calculator above buy now on product pages

Shopify Discussion

Topic summary

A user asks how to add a shipping calculator above the “Buy Now” button on product pages using custom code rather than a third-party app, allowing customers to enter their postcode and see expected shipping costs.

Proposed Solutions:

  • One response provides detailed steps involving creating a new snippet called “shipping-calculator” in the theme’s code editor and including it on product pages
  • However, the code snippets provided appear corrupted or reversed (text appears backwards), making implementation unclear
  • Another commenter suggests this requires hiring a developer, as building a functional shipping calculator based on actual shipping rates is more complex than simple code

Current Status:

  • The original poster reports encountering syntax errors when attempting to implement the suggested solution
  • Questions remain about where exactly to paste the code within the theme structure
  • The discussion remains unresolved with no confirmed working solution
Summarized with AI on November 19. AI used: claude-sonnet-4-5-20250929.
1

Hi anybody know if it’s possible to add a code, not a 3rd party app to create a shipping calculator just above the buy now button on the product pages? this way customers can see how much shipping fee they should expect when they enter their postcode. The theme is prestige. Thanks!

1 Like
2

Hello @iRis_O

Try this

  1. Go to your Shopify admin and click on Online Store > Themes.
  2. Find the theme that you want to edit and click on Actions > Edit code.
  3. In the Snippets directory, click on Add a new snippet.
  4. Enter shipping-calculator as the name for your new snippet and click on Create snippet.
  5. In the code editor, paste the following code:
{% if cart.total_quantity > 0 %}
<div class="shipping-calculator">
  <h2>Shipping calculator</h2>
  <p>Enter your postcode to see how much shipping will cost:</p>
  <input type="text" name="postcode" id="postcode" />
  <button type="submit">Calculate shipping</button>
</div>
{% endif %}

Click on Save.
Go to your product page and click on Edit.
In the Body section, paste the following code:

{% include 'shipping-calculator' %}

Click on Save and Preview to see your changes.

Now, when a customer visits your product page, they will see a shipping calculator just above the Buy now button. They can enter their postcode to see how much shipping will cost.

1 Like
3

Hi @iRis_O

It is possible to add a shipping calculator where a customer can enter their location and it will calculate the shipping cost base on your shipping rates. But this require more than a simple code. You need to hire a developer to do so

4

Usefull info.
i am also searching this but found it.

thanks

5

Hi MageComp, when you say “Go to your product page and click on Edit.
In the Body section, paste the following code:” are you referring to Themes>Products>Default Products? Wherein I Add block and paste the code in liquid? because it says error in syntax. Or i must have done it wrong.