A store owner wants to customize Shopify Forms to match their site’s rounded edge aesthetic. They’ve shared screenshots showing the current square-edged form fields and button compared to their store’s rounded design elements.
Problem: The form inputs and submit button have sharp corners that don’t match the store’s existing rounded design (visible at satchatea.co/pages/contact).
Solutions offered:
border-radius: 30px; to round the cornersform-input)Current status: The discussion remains open with a potential solution provided (adding CSS to theme.liquid), but implementation hasn’t been confirmed as successful yet. The specific CSS selector and exact code snippet needed for targeting the form elements is still being clarified.
Hello!
I just set up Shopify Forms for my store, and I’m trying to make the form fields and send button (pic 1) have the same rounded edges as the rest of my store (pic 2). I’m guessing I can tinker around with the custom CSS field, but what do I input?
Thank you!
Hey @pennchng
Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.
Best Regards,
Moeed
Hi @pennchng , can you share us your store url?
Hello there @pennchng and welcome to the Shopify community, if you are someone who learns quickly from video content then you should check this out from YouTube https://m.youtube.com/watch?v=fkkBKCO06eo
Let me know how helpful you find it.
Hi @Moeed , it’s https://satchatea.co/ (and this is the form I’m trying to edit)
Hi @B2Bridge ! It’s https://satchatea.co/ (and this is the form I’m trying to edit)
Hi @pennchng ,
This is very simple. Edit the CSS code of this form.
{
border-radius: 30px; /* You can increase this value for more rounding */
}
You can adjust the radius to fit your preference.
Hope this will be helpful. Let me know if you need more help.
Regards,
Hi @Dotsquares , thanks for the suggestion!
I tried that too but it didn’t work - is that because I need to specify what border radius I’m referring to? For example:
form-input { border-radius: 30px; }
I can’t figure out what that should be though…
Hi @pennchng ,
Please go to Actions > Edit code > layout > theme.liquid file and add code here:
Code:
