The Section Studio

Installing the Foundation

There are 5 copy-pastes needed to install your TSS foundation and take over typography, color, spacing, and buttons in any Shopify theme. You only do this once per store/theme.

What the foundation is

4 small files that live inside your theme. They add a set of brand controls to your Theme Settings panel and make your fonts, type scale, colors, + button styles apply everywhere. 4 files are included with this lesson: Theme setting additions.json, bc-foundation.liquid, bc-foundation.css.liquid, and the two theme.liquid lines below.

To edit code: in Shopify admin go to Online Store → Themes, find your theme, and click ⋯ → Edit code.

1 Add the foundation settings

This adds the foundation's brand controls to your Theme Settings panel.

  • In the code editor, open
  • Find the very first [ at the top of the file
  • Paste the entire contents of Theme setting additions.json on the line right after that opening [
  • Save
2 Paste the Foundation snippet
  • Click Snippets in the left sidebar
  • Click Add a new snippet
  • Name it
  • Paste the full contents of bc-foundation.liquid
  • Save
3 Paste the stylesheet
  • Click Assets in the left sidebar
  • Click Add a new asset → Create a blank file
  • Name it
  • Paste the full contents of bc-foundation.css.liquid
  • Save
4 Tell your theme to talk to these files
  • Open and Command/Ctrl-F for </head> (the closing head tag, near the top of the file). You're adding two lines, both inside the <head>:

Paste this on the line just before </head>:

{% render 'bc-foundation' %}

Paste this at the very end of the <head>, after all of the theme's own CSS:

{{ 'bc-foundation.css' | asset_url | stylesheet_tag }}

Save.

⚠️ Order matters.

Both lines go in the <head> because the render line outputs the CSS variables that every section depends on, so it has to load before the page paints. The stylesheet line must come after the theme's own CSS so it wins cleanly without !important.

5 Set up the new theme settings
  • Go to Theme Settings
  • Open the new ✴︎ groups and set your Base theme, fonts, type scale, colors, and button styles
  • Spot-check: load your homepage, a product page, and the cart. Headings, body text, and buttons should all match your brand, and your TSS sections should look correct.

Woohoo, just five copy-pastes and the whole store speaks the same visual language (AND saves a ton of time not needing to write a bunch of custom CSS for fonts or set things over and over again in custom sections).

Made a mistake?

Don't fret, every save is recoverable. In the code editor, click the clock / Older versions icon next to any file to view its history and revert to a previous version.

Heads up: after a theme update or Duplication

The foundation lives inside your theme's files, so updating or switching themes can wipe it. Shopify treats the update as a fresh copy of the theme. Nothing's lost permanently; you just re-apply these same pieces (about 5-10 minutes).

Any questions at all about getting set up, drop me a line at hello@bungalowcreative.co and I'm happy to help.