Scale School  ·  The Tech Lab

SGC Section Library

Your install guides in one place. Set the Foundation once, then drop in any section — every one lands already on-brand. Copy buttons are live; just click and paste.

SGC Foundation Testimonial Slider Product Benefits

Start here — install once

Scale School  ·  The Tech Lab

Install Your SGC Foundation

Four copy-pastes. You do this once per store, then every SGC section just drops in and looks like yours.

Think of the foundation as the wiring behind your walls. It adds a set of brand controls to your Theme Settings - your fonts, type scale, colours, spacing, and buttons - and makes them apply everywhere. Install it one time, set your brand once, and every section I hand you plugs straight in already on-brand. No writing custom CSS over and over. You are not going to break your store, and every save is reversible. Let's go.

🔁 First - duplicate your theme

Before you touch any code, make a copy to work on so your live store stays completely safe. Go to Online Store → Themes, find your theme, click ⋯ → Duplicate, and do all the steps below on the duplicate. Nothing changes on your live store until you choose to publish the copy - so you can set everything up with zero risk.

🔒 SGC members only. This foundation and the sections are part of Scale School, inside the Shopify Growth Collective. Please keep the code inside the program - don't share, copy, or resell it. It's part of what you paid to be in the room. 🥂

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, colours, and button styles apply everywhere.

The 4 pieces in this lesson: Theme setting additions.json (pasted into settings_schema.json), sgc-foundation.liquid, sgc-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.

Add the foundation settings

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

  • In the code editor, open config/settings_schema.json
  • Find the very first [ at the top of the file
  • Paste the SGC settings (below) on the line right after that opening [
  • Save

Add the foundation snippet

  • Click Snippets in the left sidebar
  • Click Add a new snippet
  • Name it sgc-foundation.liquid
  • Paste the full snippet (below)
  • Save

Add the stylesheet

  • Click Assets in the left sidebar
  • Click Add a new asset → Create a blank file
  • Name it sgc-foundation.css.liquid
  • Paste the full stylesheet (below)
  • Save

Tell your theme to talk to these files

  • Open theme.liquid and Cmd/Ctrl-F for </head> (near the top of the file)
  • Paste the two lines (from the button below) right before the closing </head> tag
  • Save

Set up your brand in Theme Settings

  • Go to Customize → Theme settings
  • Open the new SGC ✦ groups
  • Set your Base theme (choose Horizon on the newest themes), fonts, type scale, colours, 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 any SGC section should look right

Made a mistake? You're safe.

Every save is recoverable. In the code editor, click the clock / Older versions icon next to any file to view its history and roll back.

Heads up after a theme update or duplicate: the foundation lives inside your theme's files, so updating or switching themes can wipe it. Nothing's lost - you just re-apply these same four pieces (about 5-10 minutes).

That's it. Four pastes, and your whole store speaks one visual language. 🥂

Any questions getting set up, post in the Shopify Growth Collective and I'll help you out. — Jen

Section

Scale School  ·  Section Library

Install the SGC Testimonial Slider

A rotating testimonial slider with your logo, quote, and author. One copy-paste, then style it to your brand.

👀 Here's one way it can look. The same slider as a glowing customer review. Scroll to the bottom of this guide for more ways to use it.

Testimonial slider used as Customer review
Customer review 5-star review over a lifestyle photo — the classic.

🔁 Work on a duplicate

If you're on your live store, duplicate your theme first (Online Store → Themes → ⋯ → Duplicate) and do this on the copy, so nothing changes on your live store until you publish.

✦ Foundation required first

This section reads its fonts, spacing, and colours from your SGC Foundation (the guide above). Install that once before adding sections. If a section ever looks plain and unstyled, that's the sign the foundation isn't in yet.

🔒 SGC members only. Part of Scale School, inside the Shopify Growth Collective. Please keep the code inside the program - it's part of what you paid to be in the room. 🥂

Create the section file

  • In the code editor, click Sections in the left sidebar
  • Click Add a new section
  • Name it sgc-testimonial-slider.liquid

Paste the section code and Save

  • Paste the code (button below) into the new file
  • Save

Add it to a page and set your colours

  • Go to Customize, open a page, click Add section, choose SGC Testimonial Slider
  • In its settings, leave Colour scheme blank and set your custom colours
  • Add your real content in the blocks and preview
⚠️ The colour defaults can be white on white, so it may look blank until you set a background or text colour. That's normal - not broken.

Made a mistake? You're safe.

Every save is recoverable - click the clock / Older versions icon next to the file to roll back. And you can delete the section any time; it's like it was never there.

More ways to use it

👀 Same slider, endless uses. Every mock-up below is this exact Testimonial Slider — reviews, press, results, a founder story, a big stat, even bold quote cards with no photo at all. Turn the stars off, swap the background, change the words.

Testimonial slider used as Luxury review
Luxury review A premium quote over moody, dark photography.
Testimonial slider used as Press ·
Press · "As seen in" A publication pull-quote instead of a customer.
Testimonial slider used as Results / transformation
Results / transformation A client win — bold quote over an action shot.
Testimonial slider used as Founder story
Founder story A brand manifesto, no stars — mission over imagery.
Testimonial slider used as Impact stat
Impact stat A big number instead of a quote.
Testimonial slider used as No photo · quote card
No photo · quote card Solid brand colour, no image — a bold typographic quote.
Testimonial slider used as No photo · stat card
No photo · stat card Solid-colour stat card — zero photography needed.

Section

Scale School  ·  Section Library

Install the SGC Product Benefits

An icon + text benefits grid with an image or video beside it. One copy-paste, then style it to your brand.

👀 Here's one way it can look. The exact same section, styled for a wellness brand. Scroll to the bottom of this guide for more ways to use it.

Product Benefits styled as Wellness brand
Wellness brand Benefits + Ingredients, olive palette, herbal-tea photography.

🔁 Work on a duplicate

If you're on your live store, duplicate your theme first (Online Store → Themes → ⋯ → Duplicate) and do this on the copy, so nothing changes on your live store until you publish.

✦ Foundation required first

This section reads its fonts, spacing, and colours from your SGC Foundation. Install that once before adding sections. If a section ever looks plain and unstyled, that's the sign the foundation isn't in yet.

🔒 SGC members only. Part of Scale School, inside the Shopify Growth Collective. Please keep the code inside the program - it's part of what you paid to be in the room. 🥂

Create the section file

  • In the code editor, click Sections in the left sidebar
  • Click Add a new section
  • Name it sgc-product-benefits.liquid

Paste the section code and Save

  • Paste the code (button below) into the new file
  • Save

Add it to a page and set your colours

  • Go to Customize, open a page, click Add section, choose SGC Product Benefits
  • In its settings, leave Colour scheme blank and set your custom colours
  • This one defaults its sliding effect ON - for your first look, uncheck "Enable sliding section effect" so it does not tuck under a sticky header
  • Add your real content in the blocks and preview
⚠️ The colour defaults can be white on white, so it may look blank until you set a background or text colour. That's normal - not broken.

Made a mistake? You're safe.

Every save is recoverable - click the clock / Older versions icon next to the file to roll back. And you can delete the section any time; it's like it was never there.

That's it - one paste, and it's live and on-brand. 🥂

Any questions, post in the Shopify Growth Collective and I'll help. — Jen

More ways to use it

👀 Same section, totally different stores. Every mock-up below is this exact Product Benefits section — just different colours, fonts, and photos. It can be benefits, a ritual, a subscription flow, a what's-in-the-box, or a build-your-own. Make it yours.

Product Benefits styled as Anti-ageing skincare
Anti-ageing skincare The benefits, with a glowing close-up application shot.
Product Benefits styled as Soft beauty brand
Soft beauty brand "Why you'll love it" benefits, blush palette, product-and-roses styling.
Product Benefits styled as Luxury skincare
Luxury skincare A numbered ritual (Cleanse → Protect) on charcoal + gold — steps, not benefits.
Product Benefits styled as Supplement subscription
Supplement subscription A bold "How it works" — big numbered steps on black.
Product Benefits styled as Tech gadget
Tech gadget A "What's in the box" flat-lay — the section listing components.
Product Benefits styled as Kids subscription box
Kids subscription box A playful "Build your box" — used as pick-your-own options.
Any questions, post in the Shopify Growth Collective and I'll help. — Jen 🥂