Mobile hero image and button placement

Solved

Mobile hero image and button placement

jeffreym
Pathfinder
128 2 25

I want to only edit the mobile view. To move the button placement into the red box I have drawn below.

URL: hygiadental.com
PW: angel

Untitled design.png

Accepted Solution (1)

topnewyork
Astronaut
1130 151 187

This is an accepted solution.

Hi @jeffreym 
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head>

 

 <style>
@media (max-width: 768px){
.banner--mobile-bottom .banner__box {
    margin-top: -12rem !important;
}
}
</style>

Result:

image.png

 

 If you find my advice helpful please remember to LIKE and accept as SOLUTION.
Thanks!

Need a Shopify developer? Hire us at Top New York Web Design
Boost Your Store Sales with Volume/Tier Discount Try Big Bulk Discount
Create New Shopify Store For Just 1$/Month

View solution in original post

Replies 8 (8)

Dan-From-Ryviu
Shopify Partner
10897 2146 2282

You can turn of this option of Image Banner section to put button into image then I can provide code to move button to that place

 

Screenshot 2025-01-14 at 15.06.10.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.

jeffreym
Pathfinder
128 2 25

Okay, I haved turned that setting off

topnewyork
Astronaut
1130 151 187

This is an accepted solution.

Hi @jeffreym 
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head>

 

 <style>
@media (max-width: 768px){
.banner--mobile-bottom .banner__box {
    margin-top: -12rem !important;
}
}
</style>

Result:

image.png

 

 If you find my advice helpful please remember to LIKE and accept as SOLUTION.
Thanks!

Need a Shopify developer? Hire us at Top New York Web Design
Boost Your Store Sales with Volume/Tier Discount Try Big Bulk Discount
Create New Shopify Store For Just 1$/Month
jeffreym
Pathfinder
128 2 25

Great, how do I make it pop up instantly on mobile view? It only shows up once I slide the screen view

topnewyork
Astronaut
1130 151 187

@jeffreym, You have a paid theme, so we'll need to find the popup code. First, mark my first solution, and in the meantime, I'll provide the second solution."

Need a Shopify developer? Hire us at Top New York Web Design
Boost Your Store Sales with Volume/Tier Discount Try Big Bulk Discount
Create New Shopify Store For Just 1$/Month
jeffreym
Pathfinder
128 2 25

its a free theme 

topnewyork
Astronaut
1130 151 187

@jeffreym, i got your solution you can share store url on inbox... I'll guide you how to do it

Need a Shopify developer? Hire us at Top New York Web Design
Boost Your Store Sales with Volume/Tier Discount Try Big Bulk Discount
Create New Shopify Store For Just 1$/Month

websensepro
Shopify Partner
1854 215 261

Hi @jeffreym 

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

@media(max-width:768px){
.banner__media.media.scroll-trigger.animate--fade-in {
    position: relative;
}
.banner__content.banner__content--middle-center.page-width.scroll-trigger.animate--slide-in {
    position: absolute !important;
    top: 80% !important;
}
}

Result:

websensepro_0-1736843009242.png

 

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!

Need a Shopify developer? Hire us at WebSensePro For Shopify Design Changes/Coding
For Free Tutorials Subscribe to our youtube
Get More Sales Using Big Bulk Discount APP
Create Your Shopify Store For Just 1$/Month
Get More Sales Using Big Bulk Discount APP