Styling Shopify Forms (Popup)

[pearlerwork]

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

[EBOOST · Accepted solution]

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;
}

[pearlerwork]

Yes this works great, thank you @EBOOST 

[PageFly-Victor]

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

[ByAprilCo]

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? 🙂