Solved

Change mobile hero to vertical on Brooklyn theme

lilyyp
Excursionist
32 0 21

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!

Accepted Solution (1)
KetanKumar
Shopify Partner
36839 3635 11972

This is an accepted solution.

@lilyyp 

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

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Replies 34 (34)

KetanKumar
Shopify Partner
36839 3635 11972

@lilyyp 

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/

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
lilyyp
Excursionist
32 0 21

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! 

KetanKumar
Shopify Partner
36839 3635 11972

@lilyyp 

yes please share issue image

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
lilyyp
Excursionist
32 0 21

162CAB9D-0EAD-48E2-99D6-6CC263B3F28C.jpeg

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! 

KetanKumar
Shopify Partner
36839 3635 11972

@lilyyp 

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?

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
lilyyp
Excursionist
32 0 21

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! 

KetanKumar
Shopify Partner
36839 3635 11972

@lilyyp 

yes please show me shop now button 

so i will give you proper code 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
lilyyp
Excursionist
32 0 21

Screen Shot 2021-11-01 at 1.59.24 PM.png

@KetanKumar Oh sure! I would like the button to look something like this for both desktop and mobile. Thanks! 

KetanKumar
Shopify Partner
36839 3635 11972

@lilyyp 

oh yes please add code button html on new section 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
lilyyp
Excursionist
32 0 21

@KetanKumar can you explain how to do this? Thanks! 

KetanKumar
Shopify Partner
36839 3635 11972

@lilyyp 

can you please share new both section code

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
lilyyp
Excursionist
32 0 21

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! 

 

 

KetanKumar
Shopify Partner
36839 3635 11972

@lilyyp 

yes please new section code mobile and desktop 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
lilyyp
Excursionist
32 0 21

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

KetanKumar
Shopify Partner
36839 3635 11972

@lilyyp 

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

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
lilyyp
Excursionist
32 0 21

@KetanKumar it gave the option to have a button when I customize but the actual button doesn't show when I try it. 

Thanks

Screen Shot 2021-11-03 at 8.13.25 AM.png

KetanKumar
Shopify Partner
36839 3635 11972

This is an accepted solution.

@lilyyp 

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

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
lilyyp
Excursionist
32 0 21

@KetanKumar It worked!! Thank you so much! Is it the same for desktop? 

KetanKumar
Shopify Partner
36839 3635 11972

@lilyyp 

yes please 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
lilyyp
Excursionist
32 0 21

@KetanKumar Worked great for desktop just struggling with mobile now.

lilyyp
Excursionist
32 0 21

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

 

 

KetanKumar
Shopify Partner
36839 3635 11972

@lilyyp 

sorry but i can't see now please show me url agan!

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
lilyyp
Excursionist
32 0 21

@KetanKumar The desktop button works great - only not showing on mobile. 

On customize, store mobile looks like this. 

 Screen Shot 2021-11-04 at 12.39.32 PM.png

 

On live store it looks like this with still no button after saving customize page. 

IMG_3258.PNG

 

Thanks!

KetanKumar
Shopify Partner
36839 3635 11972

@lilyyp 

can you please confirm this  look at mobile?

KetanKumar_0-1636046058255.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
lilyyp
Excursionist
32 0 21

@KetanKumar Unfortunately is still isn’t showing on the live mobile website 😞 

 

4FEB4B30-22DB-4B4F-BB77-DCC74C58EC1B.png

KetanKumar
Shopify Partner
36839 3635 11972

@lilyyp 

if possible to add me staff account so i wll check and fx 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
lilyyp
Excursionist
32 0 21

@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

lilyyp
Excursionist
32 0 21

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

KetanKumar
Shopify Partner
36839 3635 11972

@lilyyp 

Yes, please

 Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
lilyyp
Excursionist
32 0 21

@KetanKumar Just sent over the invite to invite you as staff. Hope you can help fix it. Thanks! 

KetanKumar
Shopify Partner
36839 3635 11972

@lilyyp 

great thanks for update

yes i have done this please check

KetanKumar_0-1636476258436.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
lilyyp
Excursionist
32 0 21

@KetanKumar yes worked great! Thank you so much for the help. I really appreciate it. 

KetanKumar
Shopify Partner
36839 3635 11972

@lilyyp 

its my pleasure to help us 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
lilyyp
Excursionist
32 0 21

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!