Creating a banner in section 'Custom Liquid'

Solved

Creating a banner in section 'Custom Liquid'

JayFinlay
Excursionist
27 1 5

I tried creating a banner with photoshop for AfterPay promo.

 

Here:  Untitled-1 copy.png

 

But it's extremely pixelated and looks terrible once exported to PNG format. I have decided to try using the Custom Liquid section to make it which also allows me to reuse it for other payment methods or banners in the future.

 

I want 430x57 in size.

Background color is #b2fce4

Font is Sophia Pro Soft Bold if possible

 

How do I go about creating exactly the same thing above but in Custom Liquid format. I tried searching the internet and found nothing useful I could understand to teach myself. I know the logo is the only thing I will need to use in the coding and change in the future as the rest will just be a coding/text/fonts

 

Afterpay-Black.webp

 

If anyone could create it for me I would be eternally greatful and happy to pay/tip.

Accepted Solution (1)

Spac-es
Shopify Partner
401 118 152

This is an accepted solution.

Custom Liquid:

 

    <div class="afterpay-banner">
        <!-- Text -->
        <span class="afterpay-banner-text">Play Now. Pay Later.</span>
        <!-- Afterpay Logo -->
        <img src="https://businessgrowth.afterpay.com/rs/424-IAB-218/images/AP_logo_lockup_6328x2204_blackclear_png.png" alt="Afterpay Logo" class="afterpay-logo">
    </div>
    <style>
        .afterpay-banner {
            width: 430px;
            height: 57px;
            background-color: #b2fce4;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .afterpay-banner-text {
            font-family: 'Sophia Pro Soft Bold', sans-serif;
            font-size: 18px;
            color: #000;
            font-weight: bold;
        }
        .afterpay-logo {
            height: 61px;
            width: auto;
        }
    </style>

 

Result:

Spaces_0-1730286785830.png

 

 

 

 

 

 

(If you want the typography to have an effect on the text you must install it within the theme)

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!

View solution in original post

Reply 1 (1)

Spac-es
Shopify Partner
401 118 152

This is an accepted solution.

Custom Liquid:

 

    <div class="afterpay-banner">
        <!-- Text -->
        <span class="afterpay-banner-text">Play Now. Pay Later.</span>
        <!-- Afterpay Logo -->
        <img src="https://businessgrowth.afterpay.com/rs/424-IAB-218/images/AP_logo_lockup_6328x2204_blackclear_png.png" alt="Afterpay Logo" class="afterpay-logo">
    </div>
    <style>
        .afterpay-banner {
            width: 430px;
            height: 57px;
            background-color: #b2fce4;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .afterpay-banner-text {
            font-family: 'Sophia Pro Soft Bold', sans-serif;
            font-size: 18px;
            color: #000;
            font-weight: bold;
        }
        .afterpay-logo {
            height: 61px;
            width: auto;
        }
    </style>

 

Result:

Spaces_0-1730286785830.png

 

 

 

 

 

 

(If you want the typography to have an effect on the text you must install it within the theme)

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!