Shopify themes, liquid, logos, and UX
I tried creating a banner with photoshop for AfterPay promo.
Here:
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
If anyone could create it for me I would be eternally greatful and happy to pay/tip.
Solved! Go to the solution
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:
(If you want the typography to have an effect on the text you must install it within the theme)
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:
(If you want the typography to have an effect on the text you must install it within the theme)
The year-end shopping spree is around the corner! Is your online store ready for the ...
By JasonH Nov 10, 2024We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024