Shipping Rates Plugin
Boost customer trust and conversions by adding our shipping calculator plugin to your product pages. Upfront, real-time shipping costs help customers make informed purchase decisions, reducing the risk of abandoned carts.
Add our Shipping Calculator plugin to your product pages to increase your conversions!
Documentation
Add the Shipping Calculator JavaScript file just before the closing </body> tag in your HTML
<script src="//unpkg.com/@cartbot/shipping-calculator@latest/dist/shipping-calculator.js" async></script>Copied!
Add the following Shopify Liquid code snippet to your product page template where you want it to appear. Configure using data attributes.
<shipping-calculator
data-api-key="PARTBOT_API_KEY"
data-sku="{{ product.selected_or_first_available_variant.sku }}"
data-brand="{{ product.vendor }}"
data-shopify-product-id="{{ product.id }}"
data-shopify-variant-id="{{ product.selected_or_first_available_variant.id }}"
/>Copied!
Configuration
Using data-* attributes on the shipping-calculator div container, you can configure the following options:
data-api-keyrequired
Your Partbot public API key. To obtain your API key contact our sales team.
data-skurequired
The product SKU or part number
data-brandrequired
The product brand or vendor
data-shopify-product-idoptional
Shopify Product ID
data-shopify-variant-idoptional
Shopify Variant ID
data-weightoptional
Product weight in kilograms
data-priceoptional
Product price in dollars
data-quantityoptional
The quantity of the product being shipped. Defaults to 1.
data-show-labeloptional
Whether or not to show the input label "Calculate Shipping". Defaults to true.
data-theme-coloroptional
Hexadecimal color value to change button and link colours. Defaults to #4f46e5.