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

Solved
Highlighted

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
0 Likes
Highlighted
Shopify Partner
1272 168 395

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 and accept as 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 :D
0 Likes
Highlighted
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
0 Likes
Shopify Partner
1272 168 395

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 and accept as 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 :D
0 Likes
Highlighted
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
0 Likes
Highlighted
New Member
1 0 0

Hello,

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

 

Thank you

0 Likes