Learning a new platform can be daunting. For developers who love to look line by line through areas of code, a SaaS (software as a service) platform can seem even a bit more daunting; we don't know what's going on underneath the covers. When you’re coming from a platform like Magento Open Source or Adobe Commerce, there’s a learning curve and you have to start Thinking In SaaS.

SwiftOtter is probably most well-known for our Magento training materials, and we’ve helped thousands of developers all over the world master challenging topics in their ecommerce developer journey. Now, it’s time to bring that expertise to the SaaS world with our very first BigCommerce development course!

BigCommerce has done a fantastic job with documentation on their side, and this can be very valuable as basic reference material. For a developer looking to fully understand the inner workings and capabilities, however, the documentation may leave you with unanswered questions. SwiftOtter’s approach to training and education materials has always been to equip you with practical, working knowledge of the platform you are working with, and this BigCommerce course is no different.

Our first BigCommerce development course is focused on the default BigCommerce front-end, exploring in detail the capabilities of the Stencil framework. Chris will walk you through all the ins and outs of the code, explain how and why it works, and teach you how to actually use it in practical ways. It will almost be like having a mentor right at your desk while you embark on this journey, and there’s no better ecommerce developer mentor to have!

What to expect

This is an in-depth series of lessons on all the key aspects of the Stencil framework, the theme engine for the built-in BigCommerce front-end. We cover topics like advanced template techniques, inspecting BigCommerce data schema, how to effectively customize CSS and JavaScript, responsive images, making your theme Page Builder friendly, and more.

Chris will take you on deep dives into the “how,” not just the “what,” of features throughout the framework. We break down how the reference/default theme accomplishes key tasks. This isn’t just a series of lectures. There are hands-on exercises where we’ll build custom theme features that evolve throughout the course, applying each new topic as we learn it. You’ll also get practical tips for structuring your code and for solving the challenges of workflows like QA testing and content staging.

How does this fit in with the BigDev Bootcamp by BigCommerce?

Our course delves into topics and demonstrates more practical application than you’ll find in other resources. The BigCommerce documentation is solid reference material, while this course is more of a guided tutorial. This is also a more focused course than BigDev Bootcamp and BigCommerce University options. Stencil themes are one piece of the Boot Camp, where it’s the dedicated topic of this course, and you can learn at your own pace with this SwiftOtter course. Ultimately, this course is a beautiful compliment to BigDev Bootcamp.

The Syllabus

Introduction and Setup

• Welcome (3:27)
• Prerequisites
• Getting Started with Cornerstone (9:00)
• The Stencil CLI (11:03)
• Stencil CLI Advanced Concepts (10:31)
• Filesystem Tour (6:16)

Chapter 1: Handlebars Templates

• Introduction to Handlebars (3:51)

1.1: Page Composition

• Nesting Templates, Blocks and Partials (7:16)
• Pages, Layouts and Components (10:14)
• Exercise: Hello World with Partials (7:33)
• Exercise: Hello World with a Component (5:21)

1.2: Handlebars Expressions

• The Basics (9:42)
• Helpers (8:29)
• Evaluation Context (11:58)
• Exercise: Flesh Out Home Page (12:51)

1.3: Advanced Handlebars

• Advanced Handlebars Concepts (11:38)
• Array Handling (6:03)

1.4 (Exercise): Product Info Blocks

• Preparing the Info Blocks Data (10:36)
• Implementing the Product Info Blocks (13:02)
• Using dynamicComponent (6:35)

Chapter 2: Stencil Concepts

2.1: Stencil Objects

• Introduction to Stencil Objects (3:31)
• Inspecting Data with the debug Parameter (6:58)
• YAML Front Matter (11:29)
• Schema Review: YAML-Controlled Objects (10:55)
• Schema Review: Other Objects (10:45)
• Exercise: Expand Home Page Content (8:50)

2.2: Advanced Template Concepts

• Custom Templates (9:19)
• Exercise: The Showcase Category Template (29:33)
• Localization in Stencil (12:35)
• Exercise: Add Translation (13:20)
• Widget Regions (8:10)
• Exercise: Add Regions (4:12)

2.3: Theme Settings

• Theme Settings Basics (4:58)
• Exercise: Create Theme Settings (15:34)
• Theme Setting Schema (7:52)
• Exercise: Create Theme Setting Schema (16:34)

Chapter 3: Static Assets

3.1: CSS

• CSS Toolsets and Structure (17:34)
• Custom Stencil Sass Functions (11:58)
• Exercise: Styling Our Custom Features (21:57)

3.2: Image Handling

• Static Images (7:21)
• Exercise: Add the Blog Section Logo (6:04)
• Content Images Part 1 (15:42)
• Content Images Part 2 (8:35)
• Exercise: Add the Category and Brand Section Logos (11:14)
• Responsive Images (26:42)
• Exercise: Add Showcase View Images (15:07)

3.3: Fonts and Icons

• Using Custom Fonts (10:13)
• Exercise: Add Font Settings (15:34)
• Using Icons (7:44)
• Exercise: Add Product Info Block Icons (7:26)

3.4: JavaScript

• JavaScript Toolsets and Structure (13:45)
• Custom Page Modules (9:39)
• Using Theme Settings in JS (5:40)

3.5 (Exercise): Finishing the Showcase View

• Showcase Icons and Styles (16:01)
• Showcase Enhanced View Functionality (20:09)
• Add Showcase Theme Settings (8:29)

Chapter 4: Beyond Code

4.1: The Theme in Production

• Bundling and Applying Your Theme (9:39)
• Alternative Deployment Methods (7:58)
• Editing Theme Files in the Admin (2:37)

4.2: Page Builder

• Page Builder Widgets (11:15)
• Editing Theme Settings (5:50)
• Pulling the Latest Theme Setting Values (6:29)

4.3: Dev and Deployment Workflows

• Compatibility with Upgrades (12:20)
• QA and Content Strategies (11:24)