Help with CSS Styling for Shopify Forms Teaser

Store Design
,

Topic summary

A user is attempting to customize the styling of a Shopify Forms teaser (the text/button that appears at the bottom of the page after closing the form) but standard CSS targeting methods aren’t working.

Initial Problem:

  • Goal: reduce text size, change background color, and add a border to the teaser
  • Standard CSS selectors applied to .shopify-form-teaser class have no effect

Root Cause Identified:
The teaser exists within a shadow DOM, which isolates it from regular CSS styling. Additionally, the form/teaser is inserted dynamically after initial page render.

Solution Provided:
A JavaScript code snippet using a MutationObserver that:

  • Monitors the DOM for when the form container is added
  • Accesses the shadow DOM root
  • Injects custom styles directly into the shadow DOM
  • Example targets the button element with border and border-radius modifications

The solution requires JavaScript rather than pure CSS due to the shadow DOM encapsulation. The code can be adapted to apply the user’s desired styling changes (font size, background color, border).

Summarized with AI on October 25. AI used: claude-sonnet-4-5-20250929.
1

I’m having difficulty targeting and styling the Shopify forms teaser that appears when the Shopify forms is closed out of. This is the teaser text that displays along the bottom of the page. All attempts to target and style with CSS don’t seem to be working. I am looking to simply reduce the size of the text, change the background color, and add a border around the teaser.

My website is https://exbestia.com/

I greatly appreciate any help!

1 Like
2

Hello @tholland
Please share the page URL so I can check and update you.

3

hello, my website URL is https://exbestia.com/

Thank you!

4

To customize the Shopify Forms teaser on your site, you can add custom CSS to your theme. Here’s how:

  1. From your Shopify admin, navigate to Online Store > Themes.

2, Click Customize for your active theme.

  1. In the theme editor, select Theme settings, then Custom CSS.

  2. Add the following CSS code:

.shopify-form-teaser {
background-color: #f0f0f0; /* Replace with your desired background color /
color: #333; / Replace with your desired text color /
border: 1px solid #ccc; / Adjust border color as needed /
padding: 10px; / Adjust padding for spacing /
font-size: 14px; / Adjust font size as needed */
}

  1. Click save to apply the changes.

If your theme doesn’t have a Custom CSS option, you can add the CSS directly to your theme’s stylesheet:

  1. From your Shopify admin, go to Online Store > Themes.
  2. Click Actions > Edit code for your active theme.
  3. In the Assets folder, locate your main CSS file (commonly named theme.css, styles.css, or similar).
  4. Add the CSS code provided above at the end of this file.
  5. Click save to apply the changes.
5

unfortunately that does not seem to work when placed either in the custom CSS section or base CSS file.

6

The issue is that the teaser and form are both inside a shadow DOM. You have to first get the root of the shadow DOM then you can edit the content within it. The code below finds the shadow DOM and Root and then edits the teaser button. You need to place it within a mutation observer because the form and teaser are inserted into the main DOM dynamically after initially first render.

const observer = new MutationObserver(mutations => {
        mutations.forEach(mutation => {
            if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
                // Check if the added node is the specific element you're looking for
                mutation.addedNodes.forEach(node => {
                    if (node.nodeType === Node.ELEMENT_NODE && node.matches('#app-embed-container-188556')) {
                        const shadowHost = document.getElementById('app-embed-container-188556');
                        const shadowRoot = shadowHost.shadowRoot;
                        if(shadowRoot){
                            const styleElement = document.createElement('style');
                            styleElement.textContent = `
                                button {
                                    border-radius: 0 !important;
                                    border: solid 1px black !important;
                                }
                            `;
                            shadowRoot.appendChild(styleElement);
                        }
                    }
                });
            }
        });
    });

const targetNode = document.body; // Or any other parent element you want to observe
const config = { childList: true, subtree: true }; // Observe direct children and descendants
observer.observe(targetNode, config);