====== Add a Message Above the Shipping Rates ======

You can use this snippet if you'd like to show your customers a message above the shipping rates.

===== Step 1: Get the Snippet =====
Copy this code onto your computer's clipboard: 
<code>
{% if context == "cart" or context == "checkout" %}
<script>
FC.client.on("render.done", function() {
    var message = '<p>REPLACE THIS WITH YOUR SHIPPING NOTICE.</p>';

    if ($(".shipping-note").length == 0 && FC.json.shipping_address.shipping_results.length > 0) {
        if (FC.json.context == "checkout") {
            $("div.fc-form-group.fc-shipping-rates").prepend('<div class="row shipping-note"><div class="col-sm-10 col-sm-push-1">' + message + '</div></div>');
        } else {
            $(".fc-shipping-rates").prepend('<div class="fc-input-group--sidebar shipping-note"><br>' + message + '</div>');
        }
    }
});
</script>
{% endif %}
</code>

===== Step 2: Modify the Checkout Template =====
  * Go to your Templates configuration in your FoxyCart admin [[https://admin.foxycart.com/admin.php?ThisAction=TemplateConfig|here]].
  * Scroll down until you see **custom footer** under **Add custom header and footer code to your templates** (this may need to be checked to get the **custom footer** input box to appear). You may see some code already in the text area. You can paste the code that you copied to your clipboard into the top of that box (take care not to remove anything that's already there).
  * Change **REPLACE THIS WITH YOUR SHIPPING NOTICE.** to your desired message.
  * Scroll down until you see the "Update" button and click to save.

===== Step 3: Test =====
Add a product to the cart and enter a shipping address to ensure that it works as expected. Also proceed to checkout to ensure that it works there as well.

===== Optional Styling =====
You can change the style of the message by adding styles to your custom header on your [[https://admin.foxycart.com/admin.php?ThisAction=TemplateConfig|configuration settings]]. You may need to click **Add custom header and footer code to your templates** to get the **custom header** text area.

You can put the styles in between ''<style>'' tags. Example:

**To change the box styling, use:**
<code>
<style>
#fc .shipping-note {
    background-color: lavender;
    border-color: pink;
}
</style>
</code>

**To change the text, use:**
<code>
#fc .shipping-note p {
    color: red;
}
</code>