Mobile hero image & button

Mobile hero image & button

jeffreym
Pathfinder
131 2 25

I would like my hero image to be enlarged and fill the entire mobile screen and have the buy button in the same spot.

Is there a specific size I should be creating the image in or is this a coding issue?

URL: hygiadental.com
PW: angel

 

 Screenshot 2025-01-14 at 12.39.34 PM.png

Replies 5 (5)

mageplaza-cs
Shopify Partner
316 22 52

Hi @jeffreym,

I am from Mageplaza - Shopify solution expert.

 

As I researched your store, I noticed that the image is already full-width. However, it has a white background by default. You should edit your image to match your expectations.

mageplazacs_0-1736822971063.png

Could you please explain the 'Buy' button in more detail? I don’t quite understand what 'same pot' means, but I believe it can be easily achieved with some custom CSS.

 

I hope this is helpful to you.

Best regards.

Mageplaza | Top-Rated Shopify Agency | Trusted by 230,000+ worldwide merchants


If our suggestion works for you, please give it a Like or mark it as a Solution!


Should you have any questions or concerns, feel free to contact us via consultant@mageplaza.com

jeffreym
Pathfinder
131 2 25

So to start I have to create the image in a different px size?

Also, I want the picture & blue background to cover this entire 'YELLOW OUTLINED ZONE' and the buy button to be placed in the 'RED OUTLINED ZONE' as displayed in picture. 

 

I am not sure how to achieve this desired outcome.

Thank you for helping 

WhatsApp Image 2025-01-14 at 13.39.45.jpeg

mageplaza-cs
Shopify Partner
316 22 52

Hi @jeffreym,

 

First of all, you should edit your image to remove the background so that it displays as desired. As mentioned, it is already set to full width.

Second, you need to edit your theme by following these steps:

  1. Access the Theme Code Editor:

    • Log in to your Shopify admin.
    • Go to Online Store > Themes.
    • Find your active theme and click Actions > Edit code.
  2. Locate the file:

    • Look for the file that controls the page (possibly index.html).
    • Move the .banner-button div into the .bc-spacer div.
    • Save and test the changes.

 

Mageplaza | Top-Rated Shopify Agency | Trusted by 230,000+ worldwide merchants


If our suggestion works for you, please give it a Like or mark it as a Solution!


Should you have any questions or concerns, feel free to contact us via consultant@mageplaza.com

Dan-From-Ryviu
Shopify Partner
10937 2148 2285

Hi @jeffreym 

Please add this code to Custom CSS of that section 

@media (max-with: 749px) {
.banner__media { height: calc(100vh - 300px;) }
}

Screenshot 2025-01-14 at 14.34.15.png

- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

EstherBui
Excursionist
275 39 41

Hi @jeffreym 

 

You can follow the instruction here :

1. Go to Shopify > Online store > theme > customize

2. Click to Settings > Custom CSS > Paste this code to the section and save.https://prnt.sc/Rl66N9K_Bjvs

 

@media screen and (max-width: 768px){
.banner__media.media img {
    object-fit: cover !important;
}
}

 

Best regards, 

 

Esther  

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!