Add custom CSS to Conversion Blocks

Every Conversion Block has a Custom CSS box at the bottom of its settings. Use it for changes the settings can't make. Your theme's own CSS can't reach inside a block.

Custom CSS beats the block's settings. It loads after them, so when both change the same thing, your CSS wins.

Styling a bundle or the cart drawer? They have their own CSS box. Read Where do I put custom CSS for a bundle or the cart drawer?

Add CSS to a block

1. In Shopify admin, open Online Store → Themes.
2. Click Customize on your theme.
3. Open the template and select the block.
4. Scroll to the bottom of its settings and find Custom CSS.
5. Paste your CSS.
6. Click Save.

What you can paste

Plain declarations style the block's outer box:

margin-top: 12px;
max-width: 420px;

Full rules style parts inside the block. To find a class, right-click the block on your store and choose Inspect.

@media (max-width: 749px) {
  :host { display: none !important; }
}

That example hides the block on phones. See the hide article below for more. Lines that start with @import are removed.

Three blocks work differently

Full rules for these three go in your page's CSS. :host doesn't work there. With Use wrapper on mobile off, the Wrapper CSS applies from 768px wide and up.

Good to know

• Use plain declarations or full rules, not both. If the box holds a full rule, plain declarations next to it do nothing.
• Each block has its own box, so CSS in one block doesn't change another.
• Each block on each template needs its own CSS.
• Use settings first. CSS is for what they can't do, and it overrides them.
• A selector can stop working if we change a block later.

If it doesn't work

• Nothing changes: check you saved and that your CSS has no typo.
• A setting seems to do nothing: check the Custom CSS box. CSS there overrides the setting.
• The change shows on some products only: those products use another template. Add the CSS there too.
• Your theme's CSS file does nothing: it can't reach inside a block. Use the Custom CSS box.

Related

• Hide a Conversion Block on mobile or desktop
• Change Conversion Block fonts and colors
• Conversion Blocks guide

Also searched as: custom css, css block, style block, hide block on mobile, hide block on desktop, shadow dom, theme css not working on block, change block css, block margin, block width, my theme css wont change the block, css beats settings, setting not working because of css, does css override settings