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

Solved
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
Astronaut
1082 147 272

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 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
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

Success.

Astronaut
1082 147 272

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 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