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…

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

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

To customize the Shopify Forms teaser on your site, you can add custom CSS to your theme. Here’s how: From your Shopify admin, navigate to Online Store > Themes. 2, Click Customize for your active theme. In the theme editor, select Theme settings, then Custom CSS. Add the following CSS code…

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 for…

Help with CSS Styling for Shopify Forms Teaser

Store Design

tholland March 3, 2025, 2:43pm 5

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

Topic		Replies	Views
How can I permanently style forms in Shopify with CSS? Store Design design , css , shopify-themes	9	664	December 17, 2024
How can I reduce the size of my form teaser on Basic Bastard? Store Design design , customizations , css , shopify-themes	1	24	November 10, 2022
Using the Forms App: Impossible to style forms to match rest of the site Shopify Apps shopify-apps	21	1274	May 23, 2025
Shopify Forms - Custom CSS Shopify Apps shopify-apps	5	430	September 13, 2024
How to change the discount code color on Shopify forms Store Design design , customizations , css	4	105	September 2, 2025

Help with CSS Styling for Shopify Forms Teaser

Related topics