Hi @anand_choudhary,
There was a lot of bugs in the code not just the schema,
I have fixed all of them please use the below code:
<style>
.content-block-b1-button {background-color: #232323; color: #ffffff; cursor: pointer; border: solid #232323; border-radius: {{ section.settings.border-radius }}; }
.content-block-b1-title {font-family: Poppins; font-weight: 600;}
@media only screen and (max-width: 680px) {
/* For mobile phones: */
.d1 {display: flex; gap: 1%; overflow-x: scroll; overflow-y: hidden; }
.image-banner-c1 { min-width: 70%; aspect-ratio: auto 3/5 ; border-radius: {{ section.settings.border-radius }}; display: flex; flex-direction: column;}
.content-image-a1 {height: 65%; width: 100%; border-radius: {{ section.settings.border-radius }} {{ section.settings.border-radius }} 0 0; object-fit: cover;}
.content-block-b1 {height: auto; width: 100%; background-color: #fafcfc; border-radius: 0 0 {{ section.settings.border-radius }} {{ section.settings.border-radius }}; }
.content-block-b1-brand { margin: 10px 15px 0; font-size: 1em;}
.content-block-b1-title { margin: 0 15px; font-size: 2em;}
.content-block-b1-button { margin: 5px 15px 20px; width: calc(100% - 30px); height: 50px; font-size: 1.3em; }
}
@media only screen and (min-width: 681px) {
.d1 {display: flex; gap: 1%; }
.image-banner-c1 { width: 49.5%; aspect-ratio: auto 4/2; border-radius: {{ section.settings.border-radius }}; display: flex;}
.content-image-a1 {height: 100%; width: 50%; border-radius: {{ section.settings.border-radius }} 0 0 {{ section.settings.border-radius }}; object-fit: cover;}
.content-block-b1 {height: 100%; width: 50%; background-color: #fafcfc; border-radius: 0 0 {{ section.settings.border-radius }} {{ section.settings.border-radius }}; position: relative;}
.content-block-b1-brand { margin: 20px 20px 0; font-size: 1em;margin-top: 20px !important;}
.content-block-b1-title { margin: 0 20px; margin-top: 10px !important; font-size: 2em;}
.content-block-b1-button { margin: 10px 20px 10px; width: calc(100% - 40px); height: 50px; font-size: 1.3em; right: 0px; position:absolute; bottom: 10px; }
}
@media only screen and (max-width: 682px) {
/* For mobile phones: */
.d1 {display: flex; gap: 1%; overflow-x: scroll; overflow-y: hidden; }
.image-banner-c1 { min-width: 70%; aspect-ratio: auto 3/5 ; border-radius: {{ section.settings.border-radius }}; display: flex; flex-direction: column;}
.content-image-a1 {height: 65%; width: 100%; border-radius: {{ section.settings.border-radius }} {{ section.settings.border-radius }} 0 0; object-fit: cover; }
.content-block-b1{height: auto; width: 100%; background-color: #fafafa !important; border-radius: 0 0 {{ section.settings.border-radius }} {{ section.settings.border-radius }}; }
.content-block-b1-brand { margin: 10px 15px 0; font-size: 1em;}
.content-block-b1-title { margin: 0 15px; font-size: 1.5em; }
.content-block-b1-button { margin: 10px 15px 20px; width: calc(100% - 30px); height: 50px; font-size: 1.3em; }
}
</style>
{%- if section.blocks.size > 0 -%}
{% for block in section.blocks %}
<div class="d1">
<div class="image-banner-c1">
<img class="content-image-a1" src="{{ block.settings.first_image|img_url:'600x600', crop: 'center' }} loading="lazy"">
<div class="content-block-b1">
<div class="content-block-b1-brand">{{ block.settings.b1_brand }}</div>
<div class="content-block-b1-title">{{ block.settings.b1_title }}</div>
<a href="{{ block.settings.b1_button_link }} "><button class="content-block-b1-button">{{ block.settings.b1_button_option }}</button>
</div>
</div>
{% endfor %}
{% endif %}
{% schema %}
{
"name":"Image Banner Custom",
"class":"image-banner-c1",
"max_blocks":2,
"blocks":[
{
"type":"image_picker",
"name":"Image Picker",
"settings":[
{
"type":"image_picker",
"id":"first_image",
"label":"Image"
},
{
"type":"select",
"id":"border-radius",
"label":"Border Radius",
"options":[
{
"label":"5px",
"value":"5px"
},
{
"label":"10px",
"value":"10px"
},
{
"label":"15px",
"value":"15px"
}
],
"default":"10px"
},
{
"type":"text",
"id":"b1_brand",
"label":"Brand - Sub Title"
},
{
"type":"text",
"id":"b1_title",
"label":"Title - Product Category"
},
{
"type":"url",
"id":"b1_button_link",
"label":"Card Link"
},
{
"type":"select",
"id":"b1_button_option",
"label":"Visit Now - Shop Now",
"default":"Visit Now",
"options":[
{
"label":"Visit Now",
"value":"Visit Now"
},
{
"label":"Shop Now",
"value":"Shop Now"
}
]
}
]
}
]
}
{% endschema %}
- If my answers saved you time and headaches, consider
buying me a coffee!☕️- Check my profile:
KaalTechGeeks | Reach out to me on my socials -
Instagram |
Skype |
Mail- Was my reply helpful? Click Like to let me know! & if your question was answered, Mark it as an Accepted Solution!
