How can I customize a button on my hero banner?

Topic summary

A user is struggling to customize a button on their hero banner, specifically unable to remove a white background blob behind the button and lacking customization options.

Issue Details:

  • Button appears with an unwanted white background element
  • No customization controls available for the button
  • Screenshots provided showing the current state versus desired outcome

Solution Provided:
Another user offered a code-based fix:

  1. Navigate to Online Store → Edit Code
  2. Locate the theme.liquid file
  3. Insert custom CSS/markup code above the </body> tag

Current Status:
The original poster thanked the helper and asked a follow-up question about positioning the button and adjusting page margins, suggesting the solution may have partially worked but requires additional refinement. The discussion appears ongoing as positioning details are being worked out.

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

I am having the hardest time with adding a simple button over my hero banner. The button that I try to add as no customization available. I also cant seem to get rid of the white blob thats sits behind the button.

Can somebody tell me how to add a button? Thanks

First pic is what shopifys standard button looks like

Second pic is what im going for.

Hey @Headlok

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:

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

Best Regards,
Moeed

1 Like

Thank you so much! For the position of the button would just give margins from the page border?