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

Solved
Highlighted
New Member
8 0 0

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!

0 Likes
Highlighted
Astronaut
1125 150 295

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
New Member
8 0 0
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?
0 Likes
Highlighted

Success.

Astronaut
1125 150 295

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
New Member
8 0 0
Oh okay. So, the dimensions will be according to the image. Sounds good.
Thank you so much!!

0 Likes