Hi everyone,
I am working on a custom extension for the Customer Account Profile page and I’m trying to accurately replicate the native Shopify UI layout.
As you can see from the attached screenshot:
-
The first section (Firstname Lastname) is the native Shopify element.
-
The second section (Additional details) is my custom implementation, which I am currently struggling to replicate identically.
The Issue: To get the white background box with the default system shadow, I am forced to use the <s-section> component. However, <s-section> automatically injects native padding that distorts the internal alignment, making it impossible to match the exact look and feel of the native blocks above.
On the other hand, if I use alternative components, they do not seem to expose any built-in props or design tokens to apply the native shadow effect (box-shadow).
How can we achieve the exact native card styling (background + specific system shadow) without inheriting the automatic padding of <s-section>?
Is there a specific combination of web components to use to keep the UI identical?
Any advice would be greatly appreciated.
Thanks!