Shopify themes, liquid, logos, and UX
Hi! I am looking to change only the mobile hero photo to be vertical on my website. Right now it is horizontal on both the mobile and desktop sites. I want to leave the desktop version alone and just change the mobile. Is there a way to add another version of my image to allow it to show properly vertical on mobile?
My url is liveinbungalow.com
Thanks!
Solved! Go to the solution
This is an accepted solution.
oh sorry i have missing one code can you please update this code
<style>
.image-cover a.button.btn
{ position: absolute; left: 0; right: 0; max-width: 130px ; margin: 0px auto; margin-top: 50vh ; }
</style>
<div class="page-width yx-desktop-banner-container yx-mobile-hidden">
<div class="container-full">
{% for block in section.blocks limit: 1 %}
<div class="image-cover">
<img class="img-responsive lazyload" data-src="{{ block.settings.yx_image_picker | img_url: '2000x' }}" />
<a href="{{ block.settings.link }}" class="button btn">{{ block.settings.linktext }}</a>
</div>
{% endfor %}
</div>
</div>
{% schema %}
{
"name": "YX Desktop Banner",
"class": "yx-desktop-banner-section",
"max_blocks": 1,
"blocks": [
{
"type": "image_picker",
"name": "Desktop Banner Image",
"settings": [
{
"label": "Desktop Banner Image",
"id": "yx_image_picker",
"type": "image_picker"
},
{
"id": "link",
"type": "url",
"label": "Button link"
},
{
"id": "linktext",
"type": "text",
"label": "Button text",
"default": "Click Here"
}
]
}
],
"presets": [
{
"name": "YX Desktop Banner",
"category": "Home",
"blocks":[{"type" : "image_picker"}]
}
]
}
{% endschema %}
{% stylesheet %}
{% endstylesheet %}
{% javascript %}
{% endjavascript %}
sorry for any issue can you please let me know which banner do you need this
if you need different banner desktop and mobile try this
https://www.mojoin.com/show-shopify-banner-image/
Hi @KetanKumar worked great so far! Thanks!
Seem to be having two problems though.
1. The space from the photo to the header on mobile is too big now. Is there a way to shorten the space?
2. Is there a code to add a "Shop Now" button to both the desktop and mobile images?
Thank you for the help!
yes please share issue image
Hi @KetanKumar attached is the photo. The arrow shows the space I would like to shorten and the circle shows the location I would like the “shop now” button to be. Same button location for desktop as well.
thanks!
yes please try this code
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
@media screen and (max-width: 768px) {
.index-sections .shopify-section {
margin-top: 0;
}
}
sorry but i can't see shop now button can you please add?
Hi @KetanKumar thanks for the code! Worked great for the spacing.
There currently is no "Shop Now" button. I would like to add the button in the middle of the photo header on both mobile and desktop but am unsure how to do that. I have circled where I would like the button to be.
Thanks!
yes please show me shop now button
so i will give you proper code
@KetanKumar Oh sure! I would like the button to look something like this for both desktop and mobile. Thanks!
oh yes please add code button html on new section
can you please share new both section code
Hi @KetanKumar I'm not really sure what code. I don't really know much about coding. I'm sorry! I just followed the code you linked to add both a mobile banner and desktop. Is there a way to just add a button to this code?
Thanks!
yes please new section code mobile and desktop
@KetanKumar Sure!
The desktop code is:
<div class="page-width yx-desktop-banner-container yx-mobile-hidden">
<div class="container-full">
{% for block in section.blocks limit: 1 %}
<img class="img-responsive lazyload" data-src="{{ block.settings.yx_image_picker | img_url: '2000x' }}" />
{% endfor %}
</div>
</div>
{% schema %}
{
"name": "YX Desktop Banner",
"class": "yx-desktop-banner-section",
"max_blocks": 1,
"blocks": [
{
"type": "image_picker",
"name": "Desktop Banner Image",
"settings": [
{
"label": "Desktop Banner Image",
"id": "yx_image_picker",
"type": "image_picker"
}
]
}
],
"presets": [
{
"name": "YX Desktop Banner",
"category": "Home",
"blocks":[{"type" : "image_picker"}]
}
]
}
{% endschema %}
{% stylesheet %}
{% endstylesheet %}
{% javascript %}
{% endjavascript %}
The Mobile code is:
<div class="page-width yx-mobile-banner-container yx-desktop-hidden">
<div class="container-full">
{% for block in section.blocks limit: 1 %}
<img class="img-responsive lazyload" data-src="{{ block.settings.yx_image_picker | img_url: '750x' }}" />
{% endfor %}
</div>
</div>
{% schema %}
{
"name": "YX Mobile Banner",
"class": "yx-mobile-banner-section",
"max_blocks": 1,
"blocks": [
{
"type": "image_picker",
"name": "Mobile Banner Image",
"settings": [
{
"label": "Mobile Banner Image",
"id": "yx_image_picker",
"type": "image_picker"
}
]
}
],
"presets": [
{
"name": "YX Mobile Banner",
"category": "Home",
"blocks":[{"type" : "image_picker"}]
}
]
}
{% endschema %}
{% stylesheet %}
{% endstylesheet %}
{% javascript %}
{% endjavascript %}
And this to allow it only to show on mobile or desktop
@media only screen and (max-width: 749px) {
.yx-mobile-hidden{
display:none;
}
.yx-desktop-hidden{
display:block;
}
}
@media only screen and (min-width: 750px) {
.yx-mobile-hidden{
display:block;
}
.yx-desktop-hidden{
display:none;
}
}
Thanks!
can you try this code desktop and let me know so i will give you css
<div class="page-width yx-desktop-banner-container yx-mobile-hidden">
<div class="container-full">
{% for block in section.blocks limit: 1 %}
<div class="image-cover">
<img class="img-responsive lazyload" data-src="{{ block.settings.yx_image_picker | img_url: '2000x' }}" />
<a href="{{ section.settings.link }}" class="button">{{ section.settings.linktext }}</a>
</div>
{% endfor %}
</div>
</div>
{% schema %}
{
"name": "YX Desktop Banner",
"class": "yx-desktop-banner-section",
"max_blocks": 1,
"blocks": [
{
"type": "image_picker",
"name": "Desktop Banner Image",
"settings": [
{
"label": "Desktop Banner Image",
"id": "yx_image_picker",
"type": "image_picker"
},
{
"id": "link",
"type": "url",
"label": "Button link"
},
{
"id": "linktext",
"type": "text",
"label": "Button text",
"default": "Click Here"
}
]
}
],
"presets": [
{
"name": "YX Desktop Banner",
"category": "Home",
"blocks":[{"type" : "image_picker"}]
}
]
}
{% endschema %}
{% stylesheet %}
{% endstylesheet %}
{% javascript %}
{% endjavascript %}
@KetanKumar it gave the option to have a button when I customize but the actual button doesn't show when I try it.
Thanks
This is an accepted solution.
oh sorry i have missing one code can you please update this code
<style>
.image-cover a.button.btn
{ position: absolute; left: 0; right: 0; max-width: 130px ; margin: 0px auto; margin-top: 50vh ; }
</style>
<div class="page-width yx-desktop-banner-container yx-mobile-hidden">
<div class="container-full">
{% for block in section.blocks limit: 1 %}
<div class="image-cover">
<img class="img-responsive lazyload" data-src="{{ block.settings.yx_image_picker | img_url: '2000x' }}" />
<a href="{{ block.settings.link }}" class="button btn">{{ block.settings.linktext }}</a>
</div>
{% endfor %}
</div>
</div>
{% schema %}
{
"name": "YX Desktop Banner",
"class": "yx-desktop-banner-section",
"max_blocks": 1,
"blocks": [
{
"type": "image_picker",
"name": "Desktop Banner Image",
"settings": [
{
"label": "Desktop Banner Image",
"id": "yx_image_picker",
"type": "image_picker"
},
{
"id": "link",
"type": "url",
"label": "Button link"
},
{
"id": "linktext",
"type": "text",
"label": "Button text",
"default": "Click Here"
}
]
}
],
"presets": [
{
"name": "YX Desktop Banner",
"category": "Home",
"blocks":[{"type" : "image_picker"}]
}
]
}
{% endschema %}
{% stylesheet %}
{% endstylesheet %}
{% javascript %}
{% endjavascript %}
yes please
@KetanKumar For the mobile, it is doing the same thing. It is working in the customize tab but on the actual website, it is not showing. Thanks!
This is the code I have for mobile
<style>
.image-cover a.button.btn
{ position: absolute; left: 0; right: 0; max-width: 130px ; margin: 0px auto; margin-top: 50vh ; }
</style>
<div class="page-width yx-mobile-banner-container yx-desktop-hidden">
<div class="container-full">
{% for block in section.blocks limit: 1 %}
<div class="image-cover">
<img class="img-responsive lazyload" data-src="{{ block.settings.yx_image_picker | img_url: '2000x' }}" />
<a href="{{ block.settings.link }}" class="button btn">{{ block.settings.linktext }}</a>
</div>
{% endfor %}
</div>
</div>
{% schema %}
{
"name": "YX mobile Banner",
"class": "yx-mobile-banner-section",
"max_blocks": 1,
"blocks": [
{
"type": "image_picker",
"name": "Mobile Banner Image",
"settings": [
{
"label": "Mobile Banner Image",
"id": "yx_image_picker",
"type": "image_picker"
},
{
"id": "link",
"type": "url",
"label": "Button link"
},
{
"id": "linktext",
"type": "text",
"label": "Button text",
"default": "Click Here"
}
]
}
],
"presets": [
{
"name": "YX Mobile Banner",
"category": "Home",
"blocks":[{"type" : "image_picker"}]
}
]
}
{% endschema %}
{% stylesheet %}
{% endstylesheet %}
{% javascript %}
{% endjavascript %}
sorry but i can't see now please show me url agan!
@KetanKumar The desktop button works great - only not showing on mobile.
On customize, store mobile looks like this.
On live store it looks like this with still no button after saving customize page.
Thanks!
can you please confirm this look at mobile?
if possible to add me staff account so i wll check and fx
@KetanKumar setting it up now. I believe I need your email to add you to the account. So if you can let me know what it is I can send it over!
Thanks
@KetanKumar Actually, I can also add you as a collaborator. Here is the code if you want to send me a collaboration request 6128. Or you can just send me your email and I'll add you as a staff member. Whichever is easiest for you. Thanks!
Yes, please
Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
@KetanKumar Just sent over the invite to invite you as staff. Hope you can help fix it. Thanks!
great thanks for update
yes i have done this please check
@KetanKumar yes worked great! Thank you so much for the help. I really appreciate it.
its my pleasure to help us
Hi @KetanKumar it looks like the button on my desktop banner image isn't centered anymore when the screen is not in full screen mode on a laptop. Is there a way to fix this? Thank you!
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024