Add a Clearpay Banner to Shopify

{% if section.settings.should_show_clearpay_banner %}
{% case section.settings.clearpay_banner_color %}
    {% when 'mint' %}
        {% assign clearpay_banner_bg_color = '#B2FCE4' %}
        {% assign clearpay_banner_text_color = '#000000' %}
        {% assign clearpay_banner_logo_name = 'Clearpay_Badge_MintonBlack' %}
    {% when 'black' %}
        {% assign clearpay_banner_bg_color = '#000000' %}
        {% assign clearpay_banner_text_color = '#ffffff' %}
        {% assign clearpay_banner_logo_name = 'Clearpay_Badge_BlackonMint' %}
    {% when 'white' %}
        {% assign clearpay_banner_bg_color = '#ffffff' %}
        {% assign clearpay_banner_text_color = '#000000' %}
        {% assign clearpay_banner_logo_name = 'Clearpay_Badge_BlackonMint' %}
{% endcase %}
<style>
    .clearpay-banner {
        background-color: {{ clearpay_banner_bg_color }};
        color: {{ clearpay_banner_text_color }};
        padding: 1rem 0;
        line-height: 2rem;
    }
    .clearpay-banner .flex-container {
        display: flex;
        flex-direction: column;
        text-align: center;
    }
    .clearpay-banner img {
        vertical-align: middle;
    }
    .clearpay-banner a {
        color: {{ clearpay_banner_text_color }};
        text-decoration: none;
    }
    @media only all and (min-width: 768px) {
        .clearpay-banner .flex-container {
            flex-direction: row;
            justify-content: space-between;
            text-align: end;
            align-items: center;
        }
        .clearpay-banner .disclaimer {
            flex-basis: 265px;
        }
    }
</style>
<div class="clearpay-banner">
    <div class="page-width">
    <div class="flex-container">
        <div><b>Shop now.</b> Pay it in 4. <img src="https://static.afterpay.com/merchant-assets/clearpay/logo/badge/{{ clearpay_banner_logo_name }}.png" width="106" height="36" alt="Clearpay" /></div>
        <div class="disclaimer">Clearpay is unregulated credit. Use responsibly. T&Cs & late fees apply at <a href="https://www.clearpay.co.uk/terms" target="_blank">clearpay.co.uk/terms</a></div>
    </div>
    </div>    
</div>
{% endif %}
{% schema %}
{
    "name": "Clearpay Banner",
    "settings": [
        {
            "type": "checkbox",
            "id": "should_show_clearpay_banner",
            "label": "Show Clearpay banner",
            "default": true
        },
        {
            "type": "select",
            "id": "clearpay_banner_color",
            "label": "Banner color",
            "options": [
                {
                    "group": "Color options",
                    "value": "mint",
                    "label": "Mint"
                },
                {
                    "group": "Color options",
                    "value": "black",
                    "label": "Black"
                },
                {
                    "group": "Color options",
                    "value": "white",
                    "label": "White"
                }
            ],
            "default": "mint"
        }
    ]
}
{% endschema %}