Image banner

Store Design
, ,

Topic summary

Goal: Show a button on the mobile version of a Shopify image banner and place it just below the model’s feet. The store uses separate desktop and mobile images; desktop button works, mobile needed positioning.

Progress: The mobile button was initially missing; it was added after prompting. Reference images and screenshots were shared to illustrate desired placement and results.

Proposed solutions:

  • Use a CSS media query (max-width 749px) to target mobile and set the banner content container (banner__content) to position: absolute and anchor it at the bottom for mobile. A media query is a CSS rule that applies only at specified screen sizes.
  • In theme settings, uncheck the option that forces the button to display inside the mobile image to allow freer placement.
  • Add custom code near the closing in theme.liquid (exact snippet not visible in the thread) that yields the button below the image per the screenshot.
  • Edit assets/section-image-banner.css: replace the mobile rule that orders content with absolute positioning and a top offset (e.g., top: 53.5rem) using !important to fix position.

Notes: Absolute positioning and fixed rem values may require adjustment per image height. No confirmation yet from the author; resolution pending.

Summarized with AI on December 25. AI used: gpt-5.
1

Hi everyone

I created 2 image banners so I can show different images on desktop or mobile, The Button block on image banner is working good in desktop vision but how do i create button in mobile vision and i also want the button is below the the girl feet. Thank you so much

This is my store https://7dd6bf-4c.myshopify.com/

2

Hey @tabny

It seems like you don’t have any button currently on the mobile banner image, can you first add the button then I can help you adjust it’s position.

Best Regards,

Moeed

3

hello Moeed

Sorry i just add it and i want to it like the image shows

4.jpg
4.jpg1280×1920 274 KB

1 Like
4

@tabny thanks for posting here.
please use this concept:

@media screen and (max-width: 749px){
 .banner__content {
    position: absolute;
    bottom: 0;
 }
}

ProtoMan44_0-1719818638979.png
ProtoMan44_0-1719818638979.png1366×603 438 KB

if it helps to solve the issue so please mark it as solved.

5

Hi @tabny

Please uncheck the option to make the button display into image of your mobile image.

Screenshot 2024-07-01 at 14.24.02.png
Screenshot 2024-07-01 at 14.24.02.png1728×802 175 KB

6

Hey @tabny

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1719818941348.png
Moeed_0-1719818941348.png320×564 215 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

7

Hello @tabny
Go to online store ---------> themes --------------> actions ------> edit code-------> assets------>section-image-banner.css ------> line number 55
search this code.

@media screen and (max-width: 749px) {
.banner--mobile-bottom:not(.banner--stacked) .banner__content {
order: 2;
}
}

and replace with this code

@media screen and (max-width: 749px) {
.banner--mobile-bottom:not(.banner--stacked) .banner__content {
position: absolute !important;
top: 53.5rem !important;
}
}

and the result will be

4.png
4.png374×680 283 KB

If this was helpful, hit the like button and mark the job as completed.
Thanks

1 Like