Table of Contents

Add a Message Above the Email Field

You can use this snippet if you'd like to show your customers a message at the top of the checkout page.

Step 1: Get the Snippet

Copy this code onto your computer's clipboard:

{% block login_register %}
<div class="fc-messages">
    <div class="fc-alert fc-alert--info custom-message">
        <ul><li>Your custom message here.</li></ul>
    </div>
</div>
{{ parent() }}
{% endblock %}

Step 2: Modify the Checkout Template

Step 3: Test

Add a product to the cart and go to the checkout to ensure that it works as expected.

Optional Styling

You can change the style of the message by adding styles to your custom header on your 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:

<style>
#fc .fc-messages .custom-message{
    background-color: lavender;
    border-color: pink;
}
</style>

To change the text, use:

#fc .fc-messages .custom-message ul li {
    color: red;
}