Shopify themes, liquid, logos, and UX
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
Solved! Go to the solution
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:
If you find my advice helpful please remember to LIKE and accept as SOLUTION.
Thanks!
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
- 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.
Okay, I haved turned that setting off
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:
If you find my advice helpful please remember to LIKE and accept as SOLUTION.
Thanks!
Great, how do I make it pop up instantly on mobile view? It only shows up once I slide the screen view
@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."
its a free theme
@jeffreym, i got your solution you can share store url on inbox... I'll guide you how to do it
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:
If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025