Hello
I am trying to set my banner images to fit in size but its not working at all as you can see in attached screenshot, i have uploaded size How to make (multiple) image banners clickable and fit to size? in Dawn theme 774 X 600 both images have same size, and i am also trying to add links but there is no options. i done want to show button on image.
So how we can do it?
@i_hussain Want to banner in full size you have use below css code
.banner__media-half {
width: 100%;
}
And if you want to add multiple banners in full width then you have to use slider and for customization you can create your own section for this banner section or use slideshow section.
Yes it is possible. for achieving this i have to write section custom code with schema so just give me some time. I will share the code with you soon.
@i_hussain Below is the code for your desire design, create new section liquid file and put the code in it and save.
{{- section.settings['first-text'] -}}
{{ section.settings['second-text'] -}}
{% schema %}
{
"name": "Custom Banner",
"settings": [
{
"type": "header",
"content": "First Banner Settings"
},
{
"type": "image_picker",
"id": "first-img",
"label": "Choose First Banner Image"
},
{
"type": "text",
"id": "first-text",
"label": "Enter First Banner Text"
},
{
"type": "range",
"id": "horizontal1",
"label": "Align Horizontally",
"min": 0,
"max": 100,
"step": 10,
"unit": "%",
"default": 50
},
{
"type": "range",
"id": "vertical1",
"label": "Align Vertically",
"min": 0,
"max": 100,
"step": 10,
"unit": "%",
"default": 50
},
{
"type": "url",
"id": "first-url",
"label": "Choose/Enter Collection Link"
},
{
"type": "header",
"content": "Second Banner Settings"
},
{
"type": "image_picker",
"id": "second-img",
"label": "Choose Second Banner Image"
},
{
"type": "text",
"id": "second-text",
"label": "Enter second Banner Text"
},
{
"type": "range",
"id": "horizontal2",
"label": "Align Horizontally",
"min": 0,
"max": 100,
"step": 10,
"unit": "%",
"default": 50
},
{
"type": "range",
"id": "vertical2",
"label": "Align Vertically",
"min": 0,
"max": 100,
"step": 10,
"unit": "%",
"default": 50
},
{
"type": "url",
"id": "second-url",
"label": "Choose/Enter Collection Link"
}
],
"presets": [
{
"name": "Custom Banner Section"
}
]
}
{% endschema %}
Go to customizaton > click on Add Section > search for custom banner section > and then you can choose the image, link, text, alignment etc.
Where can i add this code?
In your live theme - edit code - in the left side click on Section tab - click on create section and enter the section name as you want and paste code in this file and then you can add image in customization by add new section and search for this newly created section and thats it.
Please provide store url without it i can’t help you!
This is my shopify url www.jacketcreator.com .
@i_hussain Use below css code for fix this issue.
.col a:after{
content: '';
display: table;
clear: both;
}
.col img{
float: left;
}
@media(max-width: 767px){
.col{
width: 100%;
}
}
i did above css in your previous code but it’s not working..
.flex{ display: flex; } .col{ width: 50%; } .col a{ position: relative; display: block; } .col img{ width: 100%; } .col span{ z-index: 1; position: absolute; top: var(--top); left: var(--left); right: auto; bottom: auto; transform: translate(calc((-1) * var(--left)), calc((-1) * var(--top))); white-space: nowrap; color: #fff; font-weight: 600; } .col a:after{ content: ''; display: table; clear: both; } .col img{ float: left; } @media(max-width: 767px){ .col{ width: 100%; } }{% schema %}
{
“name”: “Custom Banner”,
“settings”: [
{
“type”: “header”,
“content”: “First Banner Settings”
},
{
“type”: “image_picker”,
“id”: “first-img”,
“label”: “Choose First Banner Image”
},
{
“type”: “text”,
“id”: “first-text”,
“label”: “Enter First Banner Text”
},
{
“type”: “range”,
“id”: “horizontal1”,
“label”: “Align Horizontally”,
“min”: 0,
“max”: 100,
“step”: 10,
“unit”: “%”,
“default”: 50
},
{
“type”: “range”,
“id”: “vertical1”,
“label”: “Align Vertically”,
“min”: 0,
“max”: 100,
“step”: 10,
“unit”: “%”,
“default”: 50
},
{
“type”: “url”,
“id”: “first-url”,
“label”: “Choose/Enter Collection Link”
},
{
“type”: “header”,
“content”: “Second Banner Settings”
},
{
“type”: “image_picker”,
“id”: “second-img”,
“label”: “Choose Second Banner Image”
},
{
“type”: “text”,
“id”: “second-text”,
“label”: “Enter second Banner Text”
},
{
“type”: “range”,
“id”: “horizontal2”,
“label”: “Align Horizontally”,
“min”: 0,
“max”: 100,
“step”: 10,
“unit”: “%”,
“default”: 50
},
{
“type”: “range”,
“id”: “vertical2”,
“label”: “Align Vertically”,
“min”: 0,
“max”: 100,
“step”: 10,
“unit”: “%”,
“default”: 50
},
{
“type”: “url”,
“id”: “second-url”,
“label”: “Choose/Enter Collection Link”
}
],
“presets”: [
{
“name”: “Custom Banner Section”
}
]
}
{% endschema %}
Without exploring store codes I can’t say anything much that we are on the same track because code always works just the problem is where to place and how to play with the codes.
i have changed below code in same custom file and it works perfectly fine. thanks for your time too.
{{- section.settings['first-text'] -}}
{{ section.settings['second-text'] -}}
{% schema %}
{
"name": "Custom Banner",
"settings": [
{
"type": "header",
"content": "First Banner Settings"
},
{
"type": "image_picker",
"id": "first-img",
"label": "Choose First Banner Image"
},
{
"type": "text",
"id": "first-text",
"label": "Enter First Banner Text"
},
{
"type": "range",
"id": "horizontal1",
"label": "Align Horizontally",
"min": 0,
"max": 100,
"step": 10,
"unit": "%",
"default": 50
},
{
"type": "range",
"id": "vertical1",
"label": "Align Vertically",
"min": 0,
"max": 100,
"step": 10,
"unit": "%",
"default": 50
},
{
"type": "url",
"id": "first-url",
"label": "Choose/Enter Collection Link"
},
{
"type": "header",
"content": "Second Banner Settings"
},
{
"type": "image_picker",
"id": "second-img",
"label": "Choose Second Banner Image"
},
{
"type": "text",
"id": "second-text",
"label": "Enter second Banner Text"
},
{
"type": "range",
"id": "horizontal2",
"label": "Align Horizontally",
"min": 0,
"max": 100,
"step": 10,
"unit": "%",
"default": 50
},
{
"type": "range",
"id": "vertical2",
"label": "Align Vertically",
"min": 0,
"max": 100,
"step": 10,
"unit": "%",
"default": 50
},
{
"type": "url",
"id": "second-url",
"label": "Choose/Enter Collection Link"
}
],
"presets": [
{
"name": "Custom Banner Section"
}
]
}
{% endschema %}
Do you know have the code for the top and bottom padding for this one. It works great theres just spaces in between the banner.
Thank You
Hello,
First thanks for all your time here. I have similar request, I want to create two column banner but with clickable buttons for my shop. Can you share the code for that? I’m sharing the URL of the store where I saw that, it’s a second banner, with men and women sections.
https://www.runnersathletics.com/
Thanks a lot
Hello,
thank for your code. How to display text on images with hover ?
And can I choose the banner text font?
Thanks a lot