How can I move my contact form or any added block to sit inside of my image banner ?

Store Design
, , , , , , , , , , , ,

Topic summary

A user wants to overlay a contact form inside an image banner on their Shopify store (Origin theme) rather than having it appear above or below the banner.

Initial Problem:

  • Contact form and image banner are separate sections that don’t naturally nest
  • Form currently displays outside the banner area

Proposed Solution:
Use CSS absolute positioning to overlay the contact form on the banner:

  • Apply custom CSS targeting the contact form section ID
  • Set position: absolute with viewport dimensions (top: 0, bottom: 0, etc.)
  • Adjust opacity for visibility

Follow-up Issue:

  • User wants to vertically center the form within the banner
  • Changing top and bottom values doesn’t move the form

Additional Guidance:

  • Use margin-top or padding-top instead to adjust vertical positioning
  • The top/bottom/left/right properties control element dimensions relative to viewport, not position

Status: Ongoing troubleshooting for precise form placement. User advised to test thoroughly as this is a workaround rather than native theme functionality.

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

Is it possible to move my contact form or any added block to sit inside of my image banner ? Right now, whenever I add a block to my image banner, the block sits either on top or on the bottom of the actual image banner and I want it to be inside my image banner. I’ve attached a screen shot of my current “contact us” page.

Theme: Origin

URL: billon.maison

Screenshot 2025-01-26 at 3.46.02 PM.png
Screenshot 2025-01-26 at 3.46.02 PM.png2554×1844 926 KB

Screenshot 2025-01-26 at 3.50.05 PM.png
Screenshot 2025-01-26 at 3.50.05 PM.png2546×1838 502 KB

2

Hi @MaisonBillonDon those are different SECTIONS and one is static, they aren’t meant to nest inside each other.

A rough hack is to absolutely position the contact sections content.

Use a custom css setting and something like the following CSS:

READ: https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css

#shopify-section-template--16312504123458__contact_form_HtmwYp {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100vh;
  opacity: .8;
}

:bomb: test thoroughly.

If you need further customization then contact me for services.
Contact info in forum signature.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.

3

Thank You! @PaulNewton Is it possible to move the position of the contact form further down than how it looks in the screen shot that I provided? I’d like it to be a little more in the center of the screen but when I change the top and bottom numbers in the code you provided, the contact form does not move up or down.

Screenshot 2025-01-26 at 10.37.35 PM.png
Screenshot 2025-01-26 at 10.37.35 PM.png3000×1874 980 KB

4

@MaisonBillonDon try margin-top or padding-top,

top,bottom,left,right are used to make sure absolutely position elements dimensions match the current viewport dimensions.