Guides → Custom CSS vs Custom Codes vs SGB Additional CSS

Custom CSS vs Custom Codes vs SGB Additional CSS

How to choose between Custom CSS, Custom Codes, and SGB Additional CSS

SGEN gives you three places to add styling and code to your site: Custom CSS, Custom Codes, and the Additional CSS trait inside SG-Builder. Each one has a clear job. They are not interchangeable — using the wrong surface costs you time, produces confusing results, or quietly breaks when you least expect it.

This guide puts all three side by side. It explains what each surface does, what it does not do, and which one to reach for in each situation. A decision tree in the Steps section turns the comparison into a five-second check: describe your scenario in one sentence, follow the branches, land on the right surface.

The examples in this guide use your business — a small ecommerce coffee brand running SGEN — so the scenarios feel concrete rather than abstract.

What is this for?

SGEN's three styling surfaces are layered by scope, from narrowest to widest.

SGB Additional CSS is per-component. You select a component in SG-Builder, open its trait panel, and paste CSS rules into the Additional CSS field. Those rules scope to that one component instance on that one page. Nothing else on the site is affected. The rules travel with the page when you publish — they live alongside the component's content, not in a separate admin panel.

Custom CSS is site-wide, named, toggleable stylesheets. Each snippet is a block of raw CSS that SGEN injects into the of every public page. Rules here cascade over every component, on every page, until you flip the snippet Inactive. You can scope a snippet to a single page using body.page_id-N selectors — where N is the page ID you find in the edit URL at /sg-admin/pages/edit/. Use the page ID, not the slug: slug-based body classes disappear when a page is set as the site homepage.

Custom Codes is a global injection point for anything that is not pure CSS: third-party

Both appear in the public page source. display:contents on the wrapper makes it invisible to CSS layout — the

is present in the DOM for targeting but does not introduce a layout box. Head-placement snippets () are not affected by this behavior — comments inside head-placement codes render normally.

What success looks like

Success looks like

After saving to the right surface and reloading the public site, here is what you expect to see for each: Custom CSS snippet saved and active: Custom Code snippet saved and active: SGB Additional CSS published: Global Styles save: If your change does not appear immediately: hard-reload the browser with Ctrl+Shift+R. If still not visible, confirm Status is Active. For SGB Additional CSS, confirm you clicked Publish Page — not Save Draft.

  • The list at Custom → CSS shows the row with a green Active badge.
  • Viewing the public page source inside reveals a