The default image banner in Dawn is fine — but ‘fine’ doesn’t stop thumbs. A customized media banner with the right overlay, typography and call-to-action can double as your hardest-working salesperson: announcing collections, pushing offers, telling your brand story. You don’t need a page-builder app for this — a Custom Liquid section with some CSS gives you full control. Below are 5 banner styles for different industries. Pick one, paste it in, swap the text, and give your homepage the hero it deserves.
1. Fashion Store – Full-Width Bold Headline
Big, loud and fashion-forward — a full-bleed banner with a punchy headline for new drops and seasonal campaigns.
Preview
Sample: Full-width hero banner — swap the headline, text and background in seconds.
Liquid Code
{% comment %}
LayoutKart snippet: Custom Media Banner - Fashion Bold
Paste into a Custom Liquid section on the homepage.
Replace the background URL with your own image from Files.
{% endcomment %}
<style>
.lk-banner-g4v1 {
position: relative; overflow: hidden; border-radius: 18px;
min-height: 420px; display: flex; align-items: flex-end;
background: linear-gradient(120deg,#1a1a2e,#e94560);
padding: 48px;
}
.lk-banner-g4v1::before {
content: ""; position: absolute; inset: 0;
background: linear-gradient(rgba(0,0,0,.15),rgba(0,0,0,.55));
}
.lk-banner-g4v1 .lk-inner {
position: relative; z-index: 1; max-width: 560px; text-align: flex-end;
}
.lk-banner-g4v1 .lk-kicker {
font-size: 12px; font-weight: 800; letter-spacing: .25em;
text-transform: uppercase; color: #e94560; margin: 0 0 12px;
}
.lk-banner-g4v1 h2 {
margin: 0 0 12px; font-size: 44px; line-height: 1.15; color: #ffffff;
}
.lk-banner-g4v1 p { margin: 0 0 22px; font-size: 17px; color: #f5f5f5; }
.lk-banner-g4v1 .lk-cta {
display: inline-block; background: #e94560; color: #ffffff;
padding: 14px 34px; border-radius: 99px; font-weight: 700;
text-decoration: none; font-size: 15px;
}
@media(max-width: 749px) {
.lk-banner-g4v1 { min-height: 340px; padding: 28px; }
.lk-banner-g4v1 h2 { font-size: 30px; }
}
</style>
<div class="lk-banner-g4v1">
<div class="lk-inner">
<p class="lk-kicker">New Season</p>
<h2>Wear the Moment</h2>
<p>New festive edit — up to 40% off</p>
<a class="lk-cta" href="/collections/all">Shop Now</a>
</div>
</div>2. Electronics – Split Banner with Features
A tech-style banner with a feature checklist built into the design. Great for launches where specs sell.
Preview
Sample: Full-width hero banner — swap the headline, text and background in seconds.
Liquid Code
{% comment %}
LayoutKart snippet: Custom Media Banner - Electronics Split
Paste into a Custom Liquid section on the homepage.
Replace the background URL with your own image from Files.
{% endcomment %}
<style>
.lk-banner-g4v2 {
position: relative; overflow: hidden; border-radius: 14px;
min-height: 420px; display: flex; align-items: center;
background: linear-gradient(120deg,#0f172a,#1e3a8a);
padding: 48px;
}
.lk-banner-g4v2::before {
content: ""; position: absolute; inset: 0;
background: linear-gradient(90deg,rgba(15,23,42,.85),rgba(15,23,42,.25));
}
.lk-banner-g4v2 .lk-inner {
position: relative; z-index: 1; max-width: 560px; text-align: center;
}
.lk-banner-g4v2 .lk-kicker {
font-size: 12px; font-weight: 800; letter-spacing: .25em;
text-transform: uppercase; color: #38bdf8; margin: 0 0 12px;
}
.lk-banner-g4v2 h2 {
margin: 0 0 12px; font-size: 44px; line-height: 1.15; color: #ffffff;
}
.lk-banner-g4v2 p { margin: 0 0 22px; font-size: 17px; color: #cbd5e1; }
.lk-banner-g4v2 .lk-cta {
display: inline-block; background: #38bdf8; color: #0f172a;
padding: 14px 34px; border-radius: 99px; font-weight: 700;
text-decoration: none; font-size: 15px;
}
@media(max-width: 749px) {
.lk-banner-g4v2 { min-height: 340px; padding: 28px; }
.lk-banner-g4v2 h2 { font-size: 30px; }
}
</style>
<div class="lk-banner-g4v2">
<div class="lk-inner">
<p class="lk-kicker">New Season</p>
<h2>Sound That Moves You</h2>
<p>40h battery • ANC • 2-yr warranty</p>
<a class="lk-cta" href="/collections/all">Explore Audio</a>
</div>
</div>3. Beauty – Soft Gradient Overlay
Dreamy and soft for cosmetics — blush gradients, gentle typography, zero harsh edges. Skincare brands love this look.
Preview
Sample: Full-width hero banner — swap the headline, text and background in seconds.
Liquid Code
{% comment %}
LayoutKart snippet: Custom Media Banner - Beauty Soft
Paste into a Custom Liquid section on the homepage.
Replace the background URL with your own image from Files.
{% endcomment %}
<style>
.lk-banner-g4v3 {
position: relative; overflow: hidden; border-radius: 24px;
min-height: 420px; display: flex; align-items: center;
background: linear-gradient(120deg,#fce7f3,#fbcfe8);
padding: 48px;
}
.lk-banner-g4v3::before {
content: ""; position: absolute; inset: 0;
background: linear-gradient(rgba(255,255,255,.1),rgba(190,24,93,.25));
}
.lk-banner-g4v3 .lk-inner {
position: relative; z-index: 1; max-width: 560px; text-align: center;
}
.lk-banner-g4v3 .lk-kicker {
font-size: 12px; font-weight: 800; letter-spacing: .25em;
text-transform: uppercase; color: #ec4899; margin: 0 0 12px;
}
.lk-banner-g4v3 h2 {
margin: 0 0 12px; font-size: 44px; line-height: 1.15; color: #831843;
}
.lk-banner-g4v3 p { margin: 0 0 22px; font-size: 17px; color: #9d174d; }
.lk-banner-g4v3 .lk-cta {
display: inline-block; background: #ec4899; color: #ffffff;
padding: 14px 34px; border-radius: 99px; font-weight: 700;
text-decoration: none; font-size: 15px;
}
@media(max-width: 749px) {
.lk-banner-g4v3 { min-height: 340px; padding: 28px; }
.lk-banner-g4v3 h2 { font-size: 30px; }
}
</style>
<div class="lk-banner-g4v3">
<div class="lk-inner">
<p class="lk-kicker">New Season</p>
<h2>Glow, Naturally</h2>
<p>Clean skincare powered by botanicals</p>
<a class="lk-cta" href="/collections/all">Shop Skincare</a>
</div>
</div>4. Home Decor – Bottom-Aligned Minimal
Warm minimalism for furniture stores — content anchored to the bottom like an interior magazine spread.
Preview
Sample: Full-width hero banner — swap the headline, text and background in seconds.
Liquid Code
{% comment %}
LayoutKart snippet: Custom Media Banner - Home Minimal
Paste into a Custom Liquid section on the homepage.
Replace the background URL with your own image from Files.
{% endcomment %}
<style>
.lk-banner-g4v4 {
position: relative; overflow: hidden; border-radius: 12px;
min-height: 420px; display: flex; align-items: flex-end;
background: linear-gradient(120deg,#d6c7a8,#a8906c);
padding: 48px;
}
.lk-banner-g4v4::before {
content: ""; position: absolute; inset: 0;
background: linear-gradient(transparent,rgba(60,45,25,.6));
}
.lk-banner-g4v4 .lk-inner {
position: relative; z-index: 1; max-width: 560px; text-align: flex-end;
}
.lk-banner-g4v4 .lk-kicker {
font-size: 12px; font-weight: 800; letter-spacing: .25em;
text-transform: uppercase; color: #5b4a38; margin: 0 0 12px;
}
.lk-banner-g4v4 h2 {
margin: 0 0 12px; font-size: 44px; line-height: 1.15; color: #ffffff;
}
.lk-banner-g4v4 p { margin: 0 0 22px; font-size: 17px; color: #f5efe4; }
.lk-banner-g4v4 .lk-cta {
display: inline-block; background: #5b4a38; color: #ffffff;
padding: 14px 34px; border-radius: 99px; font-weight: 700;
text-decoration: none; font-size: 15px;
}
@media(max-width: 749px) {
.lk-banner-g4v4 { min-height: 340px; padding: 28px; }
.lk-banner-g4v4 h2 { font-size: 30px; }
}
</style>
<div class="lk-banner-g4v4">
<div class="lk-inner">
<p class="lk-kicker">New Season</p>
<h2>Rooms That Breathe</h2>
<p>Handcrafted furniture for slow living</p>
<a class="lk-cta" href="/collections/all">View Collection</a>
</div>
</div>5. Minimal – Centered Announcement
For premium minimal brands — no image needed, just striking centered typography on a deep background. Quiet luxury.
Preview
Sample: Full-width hero banner — swap the headline, text and background in seconds.
Liquid Code
{% comment %}
LayoutKart snippet: Custom Media Banner - Minimal Center
Paste into a Custom Liquid section on the homepage.
Replace the background URL with your own image from Files.
{% endcomment %}
<style>
.lk-banner-g4v5 {
position: relative; overflow: hidden; border-radius: 8px;
min-height: 420px; display: flex; align-items: center;
background: #111111;
padding: 48px;
}
.lk-banner-g4v5::before {
content: ""; position: absolute; inset: 0;
background: none;
}
.lk-banner-g4v5 .lk-inner {
position: relative; z-index: 1; max-width: 560px; text-align: center;
}
.lk-banner-g4v5 .lk-kicker {
font-size: 12px; font-weight: 800; letter-spacing: .25em;
text-transform: uppercase; color: #ffffff; margin: 0 0 12px;
}
.lk-banner-g4v5 h2 {
margin: 0 0 12px; font-size: 44px; line-height: 1.15; color: #ffffff;
}
.lk-banner-g4v5 p { margin: 0 0 22px; font-size: 17px; color: #a3a3a3; }
.lk-banner-g4v5 .lk-cta {
display: inline-block; background: #ffffff; color: #111111;
padding: 14px 34px; border-radius: 99px; font-weight: 700;
text-decoration: none; font-size: 15px;
}
@media(max-width: 749px) {
.lk-banner-g4v5 { min-height: 340px; padding: 28px; }
.lk-banner-g4v5 h2 { font-size: 30px; }
}
</style>
<div class="lk-banner-g4v5">
<div class="lk-inner">
<p class="lk-kicker">New Season</p>
<h2>Less, But Better</h2>
<p>The essentials edit — considered goods</p>
<a class="lk-cta" href="/collections/all">Discover</a>
</div>
</div>How to Add Media Banner Customization to Shopify
No app needed — this works with a free built-in Shopify feature called the Custom Liquid section. It takes about two minutes:
- From your Shopify admin, go to Online Store → Themes.
- Click Customize next to your live theme (works with Dawn and all Online Store 2.0 themes).
- In the theme editor, use the top dropdown to navigate to your homepage.
- In the left sidebar, click Add section → Custom liquid.
- Delete the placeholder code, paste the code from your chosen variation above, and click Save.
- Preview your store — the change is live instantly. Drag the section up or down to reposition it.
Tip: Always duplicate your theme first (Themes → … → Duplicate) so you have a backup before editing.
Customize the Media Banner Customization
- Height: change
min-height(e.g. 420px) to make the banner taller or shorter. - Overlay: adjust the gradient opacity so text stays readable over any image.
- Text position: swap
align-items/text-alignto move content left, center or bottom. - Button: point the CTA link at your best collection and restyle it to your brand color.
More Shopify Code Sections
Keep customizing your store with these copy-paste tutorials:
- Shopify Hero Banner Text Animation (Liquid + CSS)
- Shopify Video Background Hero Section
- Shopify Image Hover Zoom Effect
- Shopify Animated Gradient Text Effect
- Shopify Liquid Typing Text Effect
- How to Customize Shopify Header with Liquid
- Shopify Infinite Logo Carousel (No App)
- Shopify Announcement Bar with Clickable Links
- Shopify Testimonial Auto Slider
Conclusion
Your media banner is prime real estate — the first thing most visitors see. A customized banner doesn’t just look better, it works harder: clearer message, stronger CTA, more clicks into your collections. Pick the style that matches your brand mood, paste the code, swap in your own headline, and turn that hero space into a conversion machine.
Want a store that already has all of this built in? Check out LayoutKart’s readymade Shopify sections and templates — premium designs, clean Liquid code, ready to install.
