center title and button

Store Design
, ,

Topic summary

A user requested help centering the title and send button on their contact form, while also adding a custom background image to replace the default white area.

Initial Solution:

  • A helper provided CSS code that centers the title and button while keeping input fields (name, phone, email, comments) left-aligned
  • The code also adds rounded corners to input fields and allows for a custom background image via URL replacement
  • The user successfully implemented the solution

Follow-up Issue:

  • The user reported the CSS code stopped working after experiencing a website issue
  • The helper suggested checking if the CSS code is still in place and whether a recent theme update may have removed or overridden the custom code

Status: The discussion remains open, awaiting the user’s response about the code placement and potential theme updates.

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

Artez_0-1748509448963.png
Artez_0-1748509448963.png819×464 14.1 KB

https://wmqgez-r2.myshopify.com/

Hi I wish to center the title and the send button in my contact form please.

Is there also any way to upload a background instead of the white here please?

Warm regards.

2

Hi @Artez

I’ve prepared a demo image showing the contact form with the title and send button centered, and a background instead of the white area IMAGE .

Could you please check the attached screenshot and let me know if this matches what you’re looking for?

Once confirmed, I’ll be happy to guide you on how to make these changes on your store.

Looking forward to your reply!

Best,
Felix

3

Hi Felix, thank you for the demo image.
The centered text should be only The title, and the button. All the rest texts like name, phone, email, comments should be on the left as it was.

about the image it is a nice direction, is it possible to upload myself another image since this one does not look good on this area?

Warm regards.

4

Thanks for your feedback! To center only the title and the send button while keeping the other fields aligned left, you can use the following CSS.

You can replace the URL in the background-image with any image you prefer:

section[id*="contact_form"] .gradient {
background-image: url("https://wmqgez-r2.myshopify.com/cdn/shop/files/WIDE.jpg?v=1748510432&width=3840");
text-align: center;
}
section[id*="contact_form"] .gradient input,
section[id*="contact_form"] .gradient textarea {
border-radius: 15px;
}

This will set your chosen background image and center the title and button, while the input fields stay left-aligned with rounded corners.

Let me know if you need help adjusting the CSS or uploading your own image!

Best,
Felix

5

Succeded, thank you for your great explaination dear.

6

Hi Felix, I had a small issue yesterday with my website, and this code won’t work anymore,

can you please see why ?

https://wmqgez-r2.myshopify.com/?_ab=0&_fd=0&_sc=1

7

Hi

Please check where you previously placed the CSS code and make sure it still exists. Also, did your theme get updated recently? Sometimes, theme updates can override or remove custom code.

Let me know if you need further assistance!

Best,
Felix