Solved

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

imukhan
Tourist
18 0 1

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!


M Umar Khan
Co-Founder & COO
Operations & Marketing | The Wudhu Socks
Accepted Solution (1)
Ninthony
Shopify Partner
2332 350 1031

This is an 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.

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄

View solution in original post

Replies 16 (16)

Ninthony
Shopify Partner
2332 350 1031

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.

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
imukhan
Tourist
18 0 1
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?

M Umar Khan
Co-Founder & COO
Operations & Marketing | The Wudhu Socks
Ninthony
Shopify Partner
2332 350 1031

This is an 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.

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
imukhan
Tourist
18 0 1
Oh okay. So, the dimensions will be according to the image. Sounds good.
Thank you so much!!


M Umar Khan
Co-Founder & COO
Operations & Marketing | The Wudhu Socks
kruncheezy
Visitor
1 0 0

Hello,

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

 

Thank you

shopadhominem
Visitor
2 0 0

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
Tourist
3 0 0
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
Tourist
3 0 0

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
Shopify Partner
2332 350 1031

@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 %}

 

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
jessandco
Tourist
3 0 0

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
Shopify Partner
2332 350 1031

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.

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
BAKDbyMM
Visitor
1 0 0

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

Connecting, Championing, Cookies
hsilk
Visitor
1 0 0

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
New Member
6 0 0

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

 

Many Thanks!

medina1979Egmai
Visitor
1 0 0

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

GroomEaze
Visitor
1 0 0

as of 2024 this is no longer working