I want to add a single banner image on the homepage of my website

[imukhan]

Hello, this is my store: thewudhusocks.com

As you can see that I have a few pictures beneath my slideshow, however, I just want to add an image (centered) without any text. Thank you!

[Ninthony]

Go ahead and go to Online Store > Themes > Actions > Edit Code on the theme you want to add the functionality to. Go to the sections folder and add a new section and call it "image-for-homepage". When the section code generates, delete the default code that appears and copy and paste this code:

<style>
.img-container {
  text-align: center;
}
</style>
{% if section.settings.selected_image != blank %}
<div class="img-container">
  <img src="{{ section.settings.selected_image | img_url: "master" }}">
</div>
{% endif %}

{% schema %}
{
"name": "Image For Homepage",
"class": "image-for-homepage",
"tag": "section",
"settings": [
{
"type": "header",
"content": "Select Image"
},
{
"type": "image_picker",
"label": "Pick Your Image",
"id": "selected_image"
}

],
"presets": [
{
"name": "Image for Homepage",
"category":"Image",
"settings": {
}
}
]

}
{% endschema %}


{% javascript %}
{% endjavascript %}

Now you should be able to go to your theme in the customize editor, click add section, and look under the Image category for Image For Homepage. Let me know how it works out for you.

[imukhan]

Thank you so much for the solution. It worked great! Is there any
possibility of adding an option for changing the size and position of the
image?

[Ninthony · Accepted solution]

Well what exactly do you need? You said you wanted it centered in the original post. The dimensions of the image are set to "master" in the image url, which means it will be whatever size the image actually is. If you want to give it a specific width, you can change "master" to something like "300x" -- Then for whatever size you upload your image, it will be 300px wide and scale the height accordingly.

[imukhan]

Oh okay. So, the dimensions will be according to the image. Sounds good.
Thank you so much!!

[kruncheezy]

Hello,

What code is needed to make banner image link to a page?

Thank you

[shopadhominem]

I also used this code and it worked perfectly!

Do you know what to add so in the mobile version the image doesn't reach the margins? Regardless of how much I increase or reduce the size of the image in the desktop version, it always looks the same size in the mobile version.

Thanks so much for your help in advance 🙂

[jessandco]

Hi,
Unfortunately I don’t. I ended up switching my theme a short while later. But if you contact Ninthony he should be able to help you. He’s made my website amazing!

[jessandco]

Hi Ninthony,

Thanks for that great code. Is there some way you can add code that will allow me to add a page link to the banner when it is clicked?

Thanks,

Jess

[Ninthony]

@jessandco 

I haven't tested this, but it should work. Just let me know if it doesnt:

<style>
.img-container {
  text-align: center;
}
</style>
{% if section.settings.selected_image != blank %}
<div class="img-container">
{% if section.settings.image_link != blank %}
<a href="{{ section.settings.image_link }}">
{% endif %}
  <img src="{{ section.settings.selected_image | img_url: "master" }}">
{% if section.settings.image_link != blank %}
</a>
{% endif %}
</div>
{% endif %}

{% schema %}
{
"name": "Image For Homepage",
"class": "image-for-homepage",
"tag": "section",
"settings": [
{
"type": "header",
"content": "Select Image"
},
{
"type": "image_picker",
"label": "Pick Your Image",
"id": "selected_image"
},
{
"type": "text",
"label": "Image Link",
"id": "image_link"
}

],
"presets": [
{
"name": "Image for Homepage",
"category":"Image",
"settings": {
}
}
]

}
{% endschema %}


{% javascript %}
{% endjavascript %}

[jessandco]

You are a champion - that works perfectly!

Do you have a business by any chance? I'd love someone I could hire to do bits and pieces as they come up!

Jessica

[Ninthony]

I don't have a business but I do edits for people on the side all the time. Feel free to reach out whenever, if you DM me here I'll give you my personal email.

[BAKDbyMM]

I have the same question about mobile and would totally be grateful to get your email!

[hsilk]

Just wanna start by thanking you for this, a massive help without having to pay for an app etc. Is there anyway you can optimize this for mobile as the image just expands to the full length of the page.

Thank you.

[BAY_VAPES]

Where do I paste this code? Under the "image-for-homepage" code?

Many Thanks!

[medina1979Egmai]

Hello, thanks for your great contributions... I've been trying to make the images responsive but I haven't succeeded 😞

[GroomEaze]

as of 2024 this is no longer working