How can I permanently style forms in Shopify with CSS?

Store Design
, ,

Topic summary

Permanent styling of Shopify Forms is breaking because auto-generated classes change, undoing CSS (e.g., removing box-shadow and matching border to theme).

What worked:

  • Use a stable attribute selector instead of volatile classes: section[data-testid=“form-container”] { box-shadow: none; border: 0.1rem solid rgba(var(–color-foreground),1); border-radius: 0; }.
  • Place CSS in Online Store → Theme → Edit code → Assets → custom-styles.css.
  • OP confirmed this fixes the popup/container styling.

Ongoing issues and context:

  • Several users can’t style certain forms because they render inside a shadow root (Shadow DOM), which isolates styles so theme CSS won’t apply.
  • Proposed workaround: inject styles via JavaScript into the form’s shadowRoot, e.g., const shadowRoot = document.querySelector(‘form-embed#app-embed’).shadowRoot; then append a with desired CSS. Specific selectors and full code were not provided.

Open questions:

  • How to customize a Shopify Form heading font.
  • Exact selector for a specific contact page form and where to place the JS snippet.

Notes:

  • Code snippets are central to the discussion.
  • Status: Partially resolved (attribute selector approach). Shadow DOM styling needs a concrete JS example; questions remain unanswered.
Summarized with AI on December 12. AI used: gpt-5.
1

I’m using the Shopify Forms app and I’m having issues making certain styling changes with CSS.

For example, the container has a border and box shadow. I’d like to remove the box shadow and match the border colour to my theme. The code I’m using works for a time, however the class itself changes every so often and then the styling comes undone. How can I change this at the root?

/** Shopify Forms Popup ? ? ? **/
._formContainer_1n0rq_29 {
  box-shadow: none !important;
  border: 0.1rem solid rgba(var(--color-foreground),1) !important;
  border-radius: 0px !important;
}

Store: https://manifest-a-pearler.myshopify.com/

Password: pearler

Theme: Dawn

2

Hi @pearlerwork

May I suggest code below

/** Shopify Forms Popup ? ? ? **/
section[data-testid="form-container"]{
  box-shadow: none !important;
  border: 0.1rem solid rgba(var(--color-foreground),1) !important;
  border-radius: 0px !important;
}
3

Yes this works great, thank you @EBOOST

4

Hi @pearlerwork

This is Victor from PageFly - Shopify Page Builder App, I’d like to suggest this idea:

Online Store ->Theme ->Edit code

Assets ->custom-styles.css

section[data-testid="form-container"]{
  box-shadow: none !important;
  border: 0.1rem solid rgba(var(--color-foreground),1) !important;
  border-radius: 0px !important;
}

Hope you find my answer helpful!

Best regards,

Victor | PageFly

1 Like
5

Hey Victor! Sorry to chime in buthoping you could help with something similar, I am trying to apply css (font customisation specifically) to a Shopify Form heading, is this even possible? :slightly_smiling_face:

6

Hi, did you find the solution?

7

I am in the same boat. Haven’t found a solution

8

Same here, nothing worked for us and none of the css is getting applied on the form.

9

the form is add in the shadow root so only way to add css is injecting style in the parent element like this change the queryselector based on your code

// Access the shadow root
const shadowRoot = document.querySelector('form-embed#app-embed').shadowRoot;

// Create a new
10

Hi there! Thank for you adding, can I confirm what the selector might be for the shopify form that sits at the bottom of this page: https://coast-opals.myshopify.com/pages/contact (P/W: CoastOpals)

Oh and what file do I add the above code to, is my css stylesheet ok?