Half Octane Shape Banner Shopify Section
Half Octane Shape Banner Shopify Section – Bold & Dynamic Store Design! Transform your Shopify store with a Half Octane Shape Banner Shopify Section, a sleek and modern way to display promotions, featured products, or brand messages. This uniquely shaped banner section adds a futuristic, high-performance feel to your storefront, helping your brand stand out with style. 🔥 Key Features: ✅ Half Octane Shape Design – A bold alternative to traditional banners. ✅ Fully Customizable – Adjust colors, text, and images to match your brand. ✅ Responsive & Mobile-Friendly – Optimized for all screen sizes. ✅ Engaging & Attention-Grabbing – Enhance user experience with unique visuals. ✅ SEO & Performance Optimized – Fast-loading for a seamless shopping experience. ✅ Easy Drag-and-Drop Integration – No coding required! Perfect for modern, high-energy brands looking to create a cutting-edge shopping experience, this Half Octane Shape Banner Shopify Section ensures your store leaves a lasting impression. 🚀 Upgrade Your Shopify Store Today with a Unique Banner Design! NOTE: We currently do not provide font files required for certain sections. However, we are working to include font file downloads in the future.
Liquid Code
<section class="unique-banner-fluid-section" style="background-color: {{ section.settings.background_color }}; padding: {{ section.settings.padding_top }}px 0 {{ section.settings.padding_bottom }}px;">
<div class="unique-banner-fluid-wrapper d-flex">
<div class="unique-banner-fluid-media">
<picture>
<source media="(max-width: 749.98px)" srcset="{{ section.settings.mobile_image | img_url: '750x' }}">
<img src="{{ section.settings.desktop_image | img_url: 'master' }}" alt="{{ section.settings.image_alt }}" loading="lazy" sizes="100vw">
</picture>
<svg class="unique-banner-fluid-mask" preserveAspectRatio="none" width="231" height="600" viewBox="0 0 231 600" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0.000479755C13.3628 0.000480339 26.1762 5.36657 35.6342 14.8997L180.31 160.846C189.748 170.379 195.066 183.313 195.066 196.797V403.204C195.066 416.689 189.768 429.622 180.31 439.155L35.6146 585.101C26.2035 594.607 13.4174 599.969 0.096379 600L230.566 600V0L0 0.000479755Z" fill="{{ section.settings.mask_color }}"></path>
</svg>
<svg class="unique-banner-fluid-mask-mobile" preserveAspectRatio="none" width="375" height="129" viewBox="0 0 375 129" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M375 0H0V128.274C0 119.898 3.35381 111.866 9.31204 105.937L100.528 15.2496C106.486 9.33329 114.57 6 122.998 6H252.002C260.43 6 268.514 9.32099 274.472 15.2496L365.688 105.95C371.646 111.866 375 119.91 375 128.286V0Z" fill="{{ section.settings.mask_color }}"></path>
</svg>
</div>
<div class="unique-banner-fluid-content-container page-width w-100">
<div class="unique-banner-fluid-content">
<div class="unique-banner-fluid-content-wrapper">
<div class="unique-banner-fluid-title">
<h3><em>{{ section.settings.heading_emphasis }}</em> <br>{{ section.settings.heading }}</h3>
</div>
<p class="unique-banner-fluid-text">{{ section.settings.description }}</p>
<a href="{{ section.settings.button_link }}" class="btn unique-banner-fluid-button">{{ section.settings.button_text }}</a>
</div>
</div>
</div>
</div>
</section>
<style>
/* Desktop Styles */
.unique-banner-fluid-wrapper {
overflow: hidden;
position: relative;
min-height: 600px;
display: flex;
align-items: center;
}
.unique-banner-fluid-content-wrapper {
display: flex;
flex-direction: column;
max-width: 74%;
text-align: center;
}
.unique-banner-fluid-title h3 {
font-size: 40px;
color: #1e1e1e;
line-height: 44px;
letter-spacing: 0;
margin-bottom: 20px;
}
.unique-banner-fluid-content {
display: flex;
width: 50%;
justify-content: flex-end;
align-items: center;
height: 100%;
}
.unique-banner-fluid-content-container.page-width.w-100 {
justify-content: flex-end;
display: flex;
}
.unique-banner-fluid-title em {
font-family: lora;
font-size: 40px;
color: #1e1e1e;
line-height: 44px;
letter-spacing: -0.8px
}
.unique-banner-fluid-text {
font-size: 16px;
margin-bottom: 20px;
letter-spacing: 0;
line-height: 25.6px;
color: #1e1e1e;
}
.unique-banner-fluid-button {
padding: 10px 20px;
background-color: {{ section.settings.button_background_color }};
color: {{ section.settings.button_text_color }};
text-decoration: none;
border-radius: 5px;
width: fit-content;
margin: 0 auto;
display: inline-block;
}
.unique-banner-fluid-media {
position: absolute;
width: 50%;
left: 0;
top: 0;
bottom: 0;
}
.unique-banner-fluid-media img {
object-fit: cover;
object-position: left;
height: 100%;
width: 100%;
}
.unique-banner-fluid-media picture {
display: block;
height: 100%;
}
.unique-banner-fluid-mask {
position: absolute;
left: auto !important;
right: -1px;
top: 0;
bottom: 0;
height: calc(100% + 1px);
}
.unique-banner-fluid-mask-mobile {
display: none;
}
/* Mobile Styles */
@media screen and (max-width: 749.98px) {
.unique-banner-fluid-wrapper {
flex-direction: column-reverse;
min-height: auto;
gap: 30px;
}
.unique-banner-fluid-media {
width: 100%;
position: relative;
padding-left: 0;
}
.unique-banner-fluid-media picture {
display: flex;
justify-content: center;
}
.unique-banner-fluid-media img {
max-height: 450px;
object-position: top;
height: auto; /* Allow auto height for proper scaling */
width: 100%;
}
.unique-banner-fluid-content {
width: 100%;
justify-content: center;
}
.unique-banner-fluid-mask {
display: none;
}
.unique-banner-fluid-mask-mobile {
display: block;
position: absolute;
width: 100%;
height: auto;
top: -1px;
}
.unique-banner-fluid-content-wrapper {
padding: 20px;
text-align: center;
}
}
</style>
{% schema %}
{
"name": " Banner Fluid Section",
"settings": [
{
"type": "color",
"id": "background_color",
"label": "Background Color",
"default": "#ffffff"
},
{
"type": "range",
"id": "padding_top",
"label": "Padding Top",
"default": 50,
"min": 0,
"max": 200,
"step": 2
},
{
"type": "range",
"id": "padding_bottom",
"label": "Padding Bottom",
"default": 50,
"min": 0,
"max": 200,
"step": 2
},
{
"type": "text",
"id": "heading_emphasis",
"label": "Heading Emphasis",
"default": "Glamour"
},
{
"type": "text",
"id": "heading",
"label": "Heading",
"default": "ON THE GO"
},
{
"type": "textarea",
"id": "description",
"label": "Description",
"default": "Discover our Travel Kit with the travel size Changing foundation, Gilded Lashes Mascara, Final Touch Setting Spray, completed with our signature make-up bag."
},
{
"type": "text",
"id": "button_text",
"label": "Button Text",
"default": "Shop Now"
},
{
"type": "url",
"id": "button_link",
"label": "Button Link"
},
{
"type": "color",
"id": "button_background_color",
"label": "Button Background Color",
"default": "#000000"
},
{
"type": "color",
"id": "button_text_color",
"label": "Button Text Color",
"default": "#ffffff"
},
{
"type": "image_picker",
"id": "desktop_image",
"label": "Desktop Image",
"info": "Upload the image for desktop view."
},
{
"type": "image_picker",
"id": "mobile_image",
"label": "Mobile Image",
"info": "Upload the image for mobile view."
},
{
"type": "text",
"id": "image_alt",
"label": "Image Alt Text",
"default": "Travel Kit Banner"
},
{
"type": "color",
"id": "mask_color",
"label": "Mask Color",
"default": "#1E1E1E"
}
],
"presets": [
{
"name": " Banner Fluid Section",
"category": "Custom Sections"
}
]
}
{% endschema %}