> ## Documentation Index
> Fetch the complete documentation index at: https://docs.nomadsarc.app/llms.txt
> Use this file to discover all available pages before exploring further.

# 🆓 Free Shipping Threshold

How to display **Free shipping bars** on Checkout using the **Template ->** **CRO -> Free shipping threshold** option? A Step by Step Guide.

<video src="https://mintcdn.com/nomads-arc/474JDwCjvejIYVVp/videos/free-shipping-threshold.mp4?fit=max&auto=format&n=474JDwCjvejIYVVp&q=85&s=1b7181742428434308e220b4cd7609af" controls data-path="videos/free-shipping-threshold.mp4" />

## Guide

<Steps>
  <Step title="**Create a new customization**">
    Create a new [customization](https://admin.shopify.com/apps/dynamic-checkout-customizer/customizations).

    <img src="https://mintcdn.com/nomads-arc/RJz7ONnhNAbrjhoP/images/image-12.png?fit=max&auto=format&n=RJz7ONnhNAbrjhoP&q=85&s=11169747759b0a0e9cf325b17f31059c" alt="Image" width="1024" height="533" data-path="images/image-12.png" />
  </Step>

  <Step title="**Choose the Content type**">
    Select **Free shipping threshold** from CRO section to display Free Shipping Banner during checkout.

    <img src="https://mintcdn.com/nomads-arc/rHy-jIoWGO1uqgS1/images/freeship_1_cro_card.png?fit=max&auto=format&n=rHy-jIoWGO1uqgS1&q=85&s=412d04c1727b5d39c35d5e31a63e6684" alt="Freeship 1 Cro Card" width="2762" height="1476" data-path="images/freeship_1_cro_card.png" />
  </Step>

  <Step title="**Configure display conditions**">
    Add one or more **conditions** to control when the banner is displayed during checkout.

    <img src="https://mintcdn.com/nomads-arc/rHy-jIoWGO1uqgS1/images/freeship_2_conditional_experience.png?fit=max&auto=format&n=rHy-jIoWGO1uqgS1&q=85&s=fb319880faab1f881515b24a782cb6b8" alt="Freeship 2 Conditional Experience" width="2774" height="1476" data-path="images/freeship_2_conditional_experience.png" />
  </Step>

  <Step title="**Configure the banner**">
    Customize Free Shipping by adding its Threshold Amount and **Message** for the customers.

    <img src="https://mintcdn.com/nomads-arc/rHy-jIoWGO1uqgS1/images/freeship_4_heading_threshold_message.png?fit=max&auto=format&n=rHy-jIoWGO1uqgS1&q=85&s=21f3193ceee950c1eed4a1411d584b4b" alt="Freeship 4 Heading Threshold Message" width="2766" height="1476" data-path="images/freeship_4_heading_threshold_message.png" />
  </Step>

  <Step title="**Activate the customization**">
    Change the **Status** to **Active** using toggle button to activate the customization.

    <img src="https://mintcdn.com/nomads-arc/rHy-jIoWGO1uqgS1/images/freeship_6_active_bar.png?fit=max&auto=format&n=rHy-jIoWGO1uqgS1&q=85&s=2248a11abf12be29578c9f5c2db6767e" alt="Freeship 6 Active Bar" width="2768" height="1474" data-path="images/freeship_6_active_bar.png" />
  </Step>

  <Step title="**Set the priority**">
    Configure the **Priority** (0–100) to determine the execution order when multiple customizations are eligible.

    <img src="https://mintcdn.com/nomads-arc/rHy-jIoWGO1uqgS1/images/freeship_3_priority.png?fit=max&auto=format&n=rHy-jIoWGO1uqgS1&q=85&s=c03e30aa96652bf05d8b5acd6fbced4e" alt="Freeship 3 Priority" width="2768" height="1474" data-path="images/freeship_3_priority.png" />
  </Step>

  <Step title="**Copy the Placement ID**">
    Copy the generated **Placement ID** from clipboard icon. You'll use this in the Shopify Checkout Editor.

    <img src="https://mintcdn.com/nomads-arc/rHy-jIoWGO1uqgS1/images/freeship_8_placement_id.png?fit=max&auto=format&n=rHy-jIoWGO1uqgS1&q=85&s=b68d3e7c2d3595b3c9d0efe376b582bc" alt="Freeship 8 Placement Id" width="2774" height="1476" data-path="images/freeship_8_placement_id.png" />
  </Step>

  <Step title="**Preview**">
    Preview shows , How this block looks like at **CheckOut.**

    <img src="https://mintcdn.com/nomads-arc/9Qv3bHMEBT_l5ot0/images/freeship_preview_focus-2.png?fit=max&auto=format&n=9Qv3bHMEBT_l5ot0&q=85&s=05b6c761ab51676791b9023b82dae866" alt="Freeship Preview Focus" width="2762" height="1474" data-path="images/freeship_preview_focus-2.png" />

    <br />
  </Step>

  <Step title="**Save the customization**">
    Click **Save** to store your configuration.

    <img src="https://mintcdn.com/nomads-arc/rHy-jIoWGO1uqgS1/images/freeship_7_unsaved_changes.png?fit=max&auto=format&n=rHy-jIoWGO1uqgS1&q=85&s=81ed3ea9bdbccd9f378cdc269c7e98d7" alt="Freeship 7 Unsaved Changes" width="2762" height="1484" data-path="images/freeship_7_unsaved_changes.png" />
  </Step>

  <Step title="**Open the Checkout Editor**">
    Go to your Shopify [Settings](https://admin.shopify.com/settings)**→ Checkout**, select your checkout profile, and click **Edit**.

    <img src="https://mintcdn.com/nomads-arc/iXpFGcSFUJL7FNKL/images/screenshot_08.png?fit=max&auto=format&n=iXpFGcSFUJL7FNKL&q=85&s=16ba7d2015cd3c1cb9962b0f9665bac0" alt="" width="2852" height="1438" data-path="images/screenshot_08.png" />
  </Step>

  <Step title="**Add the app block**">
    In the Checkout Editor, click **Add app block**.

    <img src="https://mintcdn.com/nomads-arc/Fux2JUeYs9TJ9xzF/images/image-(4).png?fit=max&auto=format&n=Fux2JUeYs9TJ9xzF&q=85&s=6147980929ad8a23d35ae890319d6bad" alt="Image (4)" width="2870" height="1460" data-path="images/image-(4).png" />

    <Note>
      Make sure the app block is placed in the same checkout placement you selected in Dynamic Checkout Customizer.
    </Note>
  </Step>

  <Step title="**Configure the app block**">
    Select the **Checkout – Instruction Banner** app block, and paste the copied **Placement ID**.

    <img src="https://mintcdn.com/nomads-arc/Fux2JUeYs9TJ9xzF/images/image-(5).png?fit=max&auto=format&n=Fux2JUeYs9TJ9xzF&q=85&s=0decae637e19daf7f89dbd79d25a3ac2" alt="Image (5)" width="2870" height="1494" data-path="images/image-(5).png" />
  </Step>

  <Step title="**Publish your changes**">
    Click **Save** in the Checkout Editor to publish the customization.

    <img src="https://mintcdn.com/nomads-arc/cqW515qnj7Jw10j_/images/instruction_banner_removed-3.png?fit=max&auto=format&n=cqW515qnj7Jw10j_&q=85&s=c476598b871f40d52bc9baf405fd2474" alt="Instruction Banner Removed" width="2870" height="1494" data-path="images/instruction_banner_removed-3.png" />
  </Step>
</Steps>

<Note>
  **Why does it matter?**

  [Balardi](https://balardi.com/) uses the **Banner Notifications** customization to display important messages and promotional information during checkout, helping improve customer confidence and contributing to higher conversion rates.
</Note>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.