How do I get an embedded (Cognito) form to adopt the existing Shopify form styling?

Technical Q&A

Topic summary

An embedded Cognito Forms form on a Shopify page is not adopting the site’s existing form/button styling, despite using Cognito’s Seamless embed and the Chameleon Mode option (intended to let page CSS apply to the form). The requester wants the form to inherit the existing styles rather than manually styling individual elements.

Details: Cognito’s documentation shows how to style elements with CSS, but the goal is automatic adoption of the store’s current form styles. A live example page is provided for review.

Status: No solutions or action steps are presented in the thread. The requester is seeking suggestions on enabling true style inheritance for the embedded form; the discussion remains open.

Summarized with AI on January 11. AI used: gpt-5.
1

Hello. I’ve embedded an online form (created with Cognito Forms) into my Shopify site.

The form has been embedded using Cognito’s “Seamless” embed code as well as the “Chameleon Mode” form style which is designed to “allow the styles of your webpage to apply to the form”.

The issue is that the form is not displaying in the style of other forms/buttons on the site.

It’s possible to apply stylings to the individual form elemets (lots of detail on the Cognito site here), but what I’d like to do is have the form adopt the existing stylings.

Any suggestions as to how I can achieve this? The embedded form can be viewed here.

Thank you