Solved

What is the ideal size for a Shopify hero image?

Ya_Amara
Tourist
10 0 3

Hello, 

I haven't gone live with my site yet but I can't seem to get the hero image to fit properly and still maintain a sharp image. I've attached an image that I want up as my hero but I need it in a large

not extra large size to see the entire image. As you can see the tops of the bottle are cropped out. Any help would be very much appreciated. YaHeroImage.JPG

Accepted Solution (1)
SagarSukhanandi
Shopify Partner
279 58 71

This is an accepted solution.

@Ya_Amara 

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css->paste below code at the bottom of the file.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on sagar.sukhanandi@gmail.com regarding any help

View solution in original post

Replies 10 (10)

SagarSukhanandi
Shopify Partner
279 58 71

Hello @Ya_Amara 

Happy to help you on your issue

Could you please share your store URL to check the code? If it's password protected then please share password as well

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on sagar.sukhanandi@gmail.com regarding any help

KetanKumar
Shopify Partner
36839 3635 11972

@Ya_Amara 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

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
Ya_Amara
Tourist
10 0 3

Hello

Thanks for responding. I have three issues. I need the hero to fit the entire image on desktop and mobile. Right now if I size the hero to fit desktop it doesn't fit mobile and vice versa.

I would like to make the menu bar transparent so that the hero image is the background behind the menu and logo.  

My web address is ya-amara.myshopify.com and password is yaamara123

Any help you can give would be much appreciated. 

 

best

Kale

SagarSukhanandi
Shopify Partner
279 58 71

@Ya_Amara Add below style to css to fix hero issue

div#Hero-hero-1{
height: auto !important;
}
.hero__inner {
    display: contents;
    height: auto !important;
    width: 100%;
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on sagar.sukhanandi@gmail.com regarding any help
Ya_Amara
Tourist
10 0 3

Thanks so much! Where exactly should I paste the code? 

SagarSukhanandi
Shopify Partner
279 58 71

This is an accepted solution.

@Ya_Amara 

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css->paste below code at the bottom of the file.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on sagar.sukhanandi@gmail.com regarding any help
SagarSukhanandi
Shopify Partner
279 58 71

@Ya_Amara Thank you for accepting my solution. It will be really helpful if you like all my messages. It will help me to built good profile.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on sagar.sukhanandi@gmail.com regarding any help
Ya_Amara
Tourist
10 0 3

Hello of course I will. I injected the code but the logo I have centered is still white Can I make the logo background transparent as well?

 

Thanks

Kale

SagarSukhanandi
Shopify Partner
279 58 71

@Ya_Amara You have white background into your logo. Please create new logo with transparent background and upload again.

If you need any help with logo design then email me on sagar.sukhanandi@gmail.com

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on sagar.sukhanandi@gmail.com regarding any help
Ya_Amara
Tourist
10 0 3

Thanks ! It worked. Appreciate your help