Shipping and Delivery

• Enable free shipping.
• Specify thresholds, e.g., $100 for USD or €160 for EUR.
• Customize currency and country codes to handle free shipping in multiple regions.

• Enable or disable estimated shipping rates.
• Automate the shipping rate calculation.

• Define minimum and maximum days for delivery.
• Set cut-off times (e.g., 12 PM daily).
• Show delivery details in the cart and product pages.

• Adjust text, background colors, and icon styles.
• Choose between square or round content box types.

Adjust the background and text colors for the tooltip to show additional delivery information.

🤔 4.1. How to set up free shipping for orders above $100 in the US?

This use case represents an example: allow free shipping for orders above $100 in the US. You can adjust the amount of money and the location as you need.

STEP 1:
In Theme Setting > Shipping and delivery > go to Free shipping.

STEP 2:
Turn on Enable to activate free shipping.

STEP 3:
Inside the Order amount for free_shipping field, enter the threshold as:

STEP 4:
Click “Save” when done.

🤔 4.2. How to set up free shipping worldwide (no country codes required)?

Want all customers from any place in the world to enjoy free shipping if their orders are above the X benchmark (for example 100 - in all currencies)? Here’s how:

STEP 1:
In Theme Setting > Shipping and delivery > go to Free shipping.

STEP 2:
Turn on Enable to activate free shipping.

STEP 3:
Inside the Order amount for free_shipping field, enter the threshold as:

STEP 4:
Click “Save” when done.

🤔 4.3. How to show a Free shipping bar on the cart?

Want to show shipping rates based on the customer's address automatically? Here's how:

Prerequisite: Before using the Free shipping bar, it is important to set up a free shipping rule in your Shopify admin. Refer to the Shopify documentation for detailed instructions on creating free shipping rules.

STEP 1:

Go to Theme Settings > Shipping and Delivery > Free shipping.

STEP 2:

Toggle Enable to activate the feature.

Free shipping threshold is the minimum order amount customers need to reach to qualify for free shipping. To set up:

Under Free shipping settings > Order amount for free_shipping, enter the amount to qualify for free shipping. Amount entry formats include:

⚠️ Note: Add one rule per line only.

STEP 3:

Click "Save" when done.

STEP 4:

Check the storefront display in Mini cart

• Case 1: When the cart doesn't meet the free shipping threshold, the bar prompts customers to add more items.

• Case 2: When the cart qualifies for free shipping, showcase how the bar communicates the achievement.

🤔 4.4. How to set up the general estimated delivery times (EDT)?

By setting this up, you can show a message like this on the product/cart page: “Estimated delivery between 16 June and 20 June”. This message will show for all products. Let’s find out how:

STEP 1:
In Theme Setting > Shipping and delivery > go to Estimated delivery time.

STEP 2:
Enter a number to the Minimum day(s) of delivery and Maximum day(s) of delivery.

For example:

If the order normally takes 3-5 days for a customer to receive, then:

• Enter 3 for Minimum day(s) of delivery.
• Enter 5 for Maximum day(s) of delivery.

So, the delivery date range will be auto-calculated. This will display: “Estimated delivery between [3 days from today] and [5 days from today]".

STEP 3:
Click “Save” when done.

🤔 4.5. How to set up specific Estimated delivery time (EDT) for a specific product?

The previous use case (How to set up the general estimated delivery time?) shows you how to show the same Estimated delivery date for all products. If you want to tailor this date for a certain product, use METAFIELD. Here’s how:

STEP 1:
In your Shopify admin, go to Settings > Custom data > Metafield definitions > Products.

STEP 2:
Create the following Metafield Definitions:

⚠️ Note: The Namespace and key MUST be named as in the table above to make this feature work.

STEP 3:
Go to the admin > visit the Products tab > click on a product you want to customize

STEP 4:
Under Metafields, enter a numeric value for delivery date min and delivery date max with the number of days.
⚠️ Note: The value of the delivery date min must be SMALLER than the value of the delivery date max.

STEP 5:
Click “Save” when done.

🤔 4.6. How to display Estimated Delivery Time (EDT) on the Cart Page for each item?

Want to show this kind of message “Note: Estimated delivery between 16 June and 20 June” during checkout for customers to see?

Here’s how to do it:

STEP 1:
In Theme Setting > Shipping and delivery > go to Estimated delivery time in cart.

STEP 2:
You need to choose between two options for Show in cart items:

STEP 3:

Customize the prefix text that appears before the estimated delivery message using the Estimated Delivery Date Info field.

For example:

• If you enter “Reminder:”, your cart will display:
  “Reminder: Estimated delivery between 16 June and 20 June.”
• Leaving this field blank will show the default prefix text which is “Note”.

STEP 4:
Click “Save” when done.

🤔 4.7. How to change the general Estimated delivery time message?

By default, the message: “Estimated delivery between earliest_delivery_date and latest_delivery_date.” will be used for the Estimate delivery time feature set up in use case 4.3. If you want to change it, follow this:

STEP 1:
In Theme Setting > Shipping and delivery > go to Estimated delivery time in cart.

STEP 2:
Scroll down to the Message field.

STEP 3:
Change the message as you want, use these texts for dynamic content:

• earliest_delivery_date to show the earliest delivery date.
• latest_delivery_date to show the latest delivery date.
• delivery_tooltip to show the delivery tooltip.

STEP 4:
Click “Save” when done.

Expected outcome: The message is shown on top of the cart:

🤔 4.8. How to use the Tooltip for Shipping Information?

Want to provide additional delivery details in a tooltip- to avoid writing lengthy messages on the storefront while still providing necessary information to customers?

STEP 1:
In Theme Setting > Shipping and delivery > go to Estimated delivery time in cart.

STEP 2:
Scroll down until you see the Tooltip.

STEP 3:
Customize the tooltip text and icon (upload your own SVG or choose from the built-in options).

STEP 4:
Adjust the position and styling (e.g., left or right) for better alignment with your design.

STEP 5:
Click “Save” when done.

🤔 4.9. How to display the estimated shipping cost in the cart?

Want to show customers real-time shipping estimates based on their location directly in the mini cart? Here's how:

STEP 1:

Go to Theme Settings > Shipping and Delivery > Estimated shipping rates.

STEP 2:

Toggle Enable to activate the feature. Now, the estimated shipping cost will be displayed in the cart based on the customer's input.

STEP 3:

Click "Save" when done.

When customers click on "Estimate shipping" at Cart, a popup will be displayed to allow customers entering their address.

🤔 4.10. How to auto-calculate shipping rates for logged-in customers?

Want to show shipping rates based on the customer’s address automatically?

STEP 1:
In Theme Settings > Shipping and delivery, go to the Estimated shipping rates section.

STEP 2:
Enable Auto-calculate shipping rates.

STEP 3:
Click “Save” when done.

Now, logged-in customers will see shipping rates automatically calculated based on their stored address.