How can i adjust the position of the button in image banner?

Store Design
, , ,

Topic summary

A user seeks help repositioning a button within an image banner on their Shopify store.

Solutions Provided:

Multiple respondents offered CSS-based fixes:

  • suyash1 suggests adding custom CSS to the end of base.css targeting the specific banner section ID with position and z-index adjustments
  • infoatcodelab7 recommends inserting CSS at the bottom of base.css using a media query for desktop devices with display: flex !important
  • GemPages proposes editing the theme’s liquid file and adding markup before the closing </body> tag

Technical Approach:

All solutions involve:

  • Accessing Shopify Admin → Online Store → Themes → Edit Code
  • Modifying CSS files (primarily base.css)
  • Using custom CSS rules with position properties and media queries

Status: The discussion remains open with no confirmation from the original poster about which solution worked. The responses provide code snippets but appear partially garbled in formatting.

Summarized with AI on November 21. AI used: claude-sonnet-4-5-20250929.
1

how can i adjust the position of the button in image banner?

help please!!

my web: https://midnightboots.myshopify.com/

password: 123

2

@pickupurjacket - add this css to the very end of your base.css file and check, adjust number as per your need, this css is for this section only

@media screen and (min-width:750px){
#shopify-section-template--14508997705846__image_banner .banner__buttons{position: relative;  z-index: 10; top: 100px;}
}
3

Hello @pickupurjacket

to adjust the banner button follow this steps:

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > base.css and paste this at the bottom of the file:
@media(min-width:768px){
  .desktop--device.banner {
	 display: flex !important; 
  }
}

Hope this works well.

4

Hello @pickupurjacket

I would like to give you the recommendation to support you so kindly follow steps below:

  1. Go to your Online store > Themes > Edit code
  2. Open your theme.liquid file
  3. Paste the below code before

I hope the above is useful to you.
Best regards,
GemPages Support Team