Custom CSS in Embedded Shopify Forms

Online Store and Theme Development
,
1

I have a Shopify Forms Embedded form on a custom newsletter sign up page. I have the form id hooked up and everything is showing as expected.

Now I’m working on uniform branding across the site, and that means modifying the font in the embedded form.

I had a support discussion that suggested to use the form id to get a CSS selector that won’t constantly change which is great. However, I’m having issues referencing a specific tag within the #shadow root element that is rendered by the app.

[data-forms-id="forms-root-<formId>"] > form-embed {
    background-color: green;
}

This actually works to change the form background colour, which is great. The issue is getting more specific and trying something like this doesn’t work

[data-forms-id="forms-root-<formId>"] > form-embed h2 {
    background-color: green;
    text-transform: capitalize;
}

I imagine other people acheiving the same thing are either forcing inline styles or something equally tacky, but I wanted to just confirm whether I’m missing something or is this just a limitation?

2

I actually think this would be quicker and make more sense as a slack discussion, but I am unable to get into that community, without having first had a contact in that community (a discussion for another thread: Partner Slack Access - Partner Discussions - Shopify Developer Community Forums)

3

The Shadow DOM is a new concept to me, so maybe if I understood that, the answer would be simple.

So far I have read:

I suspect I might have to make this work with some sort of JS asset loading on the page that changes the styling dynamically…

4

Given the timing difference between the page loading (DOMContentLoaded), the js event firing (shopify:section:load) and the JS embedded form loading in (seems to be a minified React App in my case https://cdn.shopify.com/extensions/a23fed3e-03fd-4f99-b9dc-b2f1ea20938a/forms-1485/assets/App-CERLQSYC.js) it seems that trying to modify the embedded form styling is more of a feature request that can’t really be worked around unfortunately.

If that is the case, can this serve as the basis for starting that Feature Request?

I have seen two other discussions in this realm:

5

I realise I’m talking to myself out loud here, but I found that:

  • When the shadowroot element is created, some CSS variables are set using the data attributes, which are defined when configuring the form (that’s how the button background colour can be changed for example
  • There is JS that then adds to window.formStyles a dynamic CSS stylesheet which uses the generated class names
    E.g.
/* _textBody_2aowh_10  being the class name in this iteration of my embedded form */
._textBody_2aowh_10 a {
  color: var(--forms-accent-color);
}

So I believe the way to make this work would simply be allowing for a text string to be added, if the font needs to be something custom, not set in the Shopify Font Selector of the admin panel.

My Proof of concept was to simply add my custom font string to the shadowroot :host variables, and my font rendered in the embedded form :slight_smile:

E.g.

<style>

    :host {
      ...
      --forms-body-font: 'My Custom Font', sans-serif;
      --forms-heading-font: 'My Custom Font' 600 22px -apple-system, Verdana, Geneva, Tahoma, sans-serif;
      ...
</style>

So I believe all that’s needed is:

  1. An interface for users to specify their custom font string
  2. An update to whatever is embedding the form to add the custom font string as a data attribute to the div with attribute data-forms-id
  3. interpolation in the --forms-body-font and --forms-heading-font for the given custom font string
  4. Profit?

Without this feature request we are forced to use a system font for our form which doesn’t match our custom font brand.

Note: I have looked at all of the custom font in shopify tutorials out there and they all follow the same formula

  1. Upload WOFF font in files
  2. Update base.css (or theme.css)
  3. Add font name to the text elements (h1-h6,p,a)

This bypasses the functionality provided by the Shopify Admin → Typography selection

6

Further experimentation shows:

  • With a breakpoint in the forms minified code renderInContainer method
  • Change the heading Font Family to a custom font r.heading.fontFamily = 'My Custom Font' in the console
  • Rendered form has custom font in the heading as expected

I don’t think I can take this any further without access to the forms.shopify appbridge app, which I obviously can’t be given access to. Maybe there’s a shopify form dev here that will see my ramblings and say “I can build that”..

Alternatively, this may be the wrong place for feature requests in which case I’m wasting my time even further documenting the processes.

7

Bump? Not too sure what brings a topic to the top of the pile

8

If this isn’t the right place, where should I have this conversation? It seems that a custom app wouldn’t really work, because it’s more to modify/add to the core Shopify Forms app. Not too sure. Perhaps a Github Issue is a better place for this discussion? Or even the slack (but that’s a different issue altogether)