Theme

SOG-Rhino custom theme v6.0.34 based on Cornerstone v5.0.19 with Stratum2 fonts and responsive design

Overview

The SOG-Rhino theme is a custom BigCommerce Stencil theme built on Cornerstone v5.0.19. It features a modern, mobile-first design tailored for the knife and outdoor gear market with custom typography, responsive layouts, and optimized product displays.

Theme Name: SOG-Rhino
Version: 6.0.34
Base: Cornerstone v5.0.19
Framework: Handlebars + Sass + JavaScript
Build Tool: Webpack (via Stencil CLI)

Visual Design

Brand Identity

The theme emphasizes SOG's heritage in tactical and outdoor knives with:

Color Palette: Military greens, tactical blacks, metallic accents
Typography: Stratum2 font family for headings, clean sans-serif for body
Imagery: High-resolution product photography, lifestyle imagery
Aesthetic: Rugged, professional, precision-focused

Typography

Primary Font: Stratum2

Custom Stratum2 font family used throughout the site:

@font-face {
  font-family: 'Stratum2';
  src: url('../fonts/Stratum2-Regular.woff2') format('woff2'),
       url('../fonts/Stratum2-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Stratum2';
  src: url('../fonts/Stratum2-Bold.woff2') format('woff2'),
       url('../fonts/Stratum2-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

Font Stack

// Headings
$font-family-headings: 'Stratum2', 'Helvetica Neue', Arial, sans-serif;

// Body text
$font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

// Monospace (for product SKUs)
$font-family-mono: 'SF Mono', Monaco, 'Courier New', monospace;

Engraving Fonts

15 custom fonts available in the engraving tool:

Stratum2 (Regular, Bold)
Blade Runner — Sci-fi inspired
Terminator — Military stencil style
Arial — Classic sans-serif
Times New Roman — Serif option
Courier — Monospace
Brush Script — Handwritten style
Old English — Gothic blackletter
Stencil — Industrial stencil
Impact — Bold display
Comic Sans — Casual (limited availability)
Helvetica Neue — Modern sans-serif
Georgia — Web-safe serif
Verdana — Readable sans-serif
Lucida Console — Technical monospace

Color Scheme

// Primary colors
$primary-green: #2d5016;     // Forest green
$primary-black: #1a1a1a;     // Rich black
$accent-orange: #d97706;     // Safety orange
$accent-silver: #9ca3af;     // Metallic silver

// UI colors
$background-main: #ffffff;
$background-secondary: #f3f4f6;
$text-primary: #1a1a1a;
$text-secondary: #6b7280;
$border-color: #e5e7eb;

// Interactive states
$link-color: $primary-green;
$link-hover: darken($primary-green, 10%);
$button-primary: $primary-green;
$button-secondary: $accent-orange;
$button-disabled: #d1d5db;

// Status colors
$success: #10b981;
$warning: #f59e0b;
$error: #ef4444;
$info: #3b82f6;

Responsive Design

Breakpoints

// Mobile-first breakpoints
$breakpoint-xs: 0;       // 0-575px
$breakpoint-sm: 576px;   // 576-767px
$breakpoint-md: 768px;   // 768-991px
$breakpoint-lg: 992px;   // 992-1199px
$breakpoint-xl: 1200px;  // 1200px+
$breakpoint-xxl: 1440px; // 1440px+

// Usage
@media (min-width: $breakpoint-md) {
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

Mobile Optimization

Hamburger menu below 992px
Sticky header on scroll
Touch-friendly tap targets (44×44px minimum)

Product Grids

1 column on mobile (< 576px)
2 columns on tablet (576-991px)
3 columns on desktop (992-1199px)
4 columns on large desktop (1200px+)

Images

Responsive srcset for different device sizes
Lazy loading for below-the-fold images
WebP with JPG fallback

Template Structure

Handlebars Templates

Homepage (`templates/pages/home.html`)

{{#partial "hero"}}
  {{> components/contentful/hero-section}}
{{/partial}}

{{#partial "featured-products"}}
  {{> components/contentful/featured-products}}
{{/partial}}

{{#partial "instagram-feed"}}
  {{> components/instagram/feed}}
{{/partial}}

{{> layout/base}}

Product Page (`templates/pages/product.html`)

{{#partial "page"}}
<div class="productView">
  {{> components/products/product-view}}
  
  {{#if product.custom_fields.engravable}}
    {{> components/engraving/engraving-tool}}
  {{/if}}
  
  {{> components/products/product-recommendations}}
</div>
{{/partial}}

{{> layout/base}}

Category Page (`templates/pages/category.html`)

{{#partial "page"}}
  {{> components/contentful/category-hero}}
  
  <div class="product-listing">
    {{> components/category/product-grid}}
    {{> components/faceted-search/filters}}
  </div>
{{/partial}}

{{> layout/base}}

Custom Components

Engraving Tool Component

{{!-- templates/components/engraving/engraving-tool.html --}}
<div class="engraving-tool" data-component="engraving">
  <h3>Custom Engraving</h3>
  <div id="engraving-app"></div>
  {{!-- Preact app mounts here --}}
</div>

Contentful Hero Component

{{!-- templates/components/contentful/hero-section.html --}}
<section class="hero-section" data-contentful-id="{{contentful.hero.id}}">
  <div class="hero-content">
    <h1 class="hero-title">{{contentful.hero.title}}</h1>
    <p class="hero-subtitle">{{contentful.hero.subtitle}}</p>
    <a href="{{contentful.hero.cta.url}}" class="btn btn-primary">
      {{contentful.hero.cta.text}}
    </a>
  </div>
  <div class="hero-image">
    <img src="{{contentful.hero.image.url}}?w=1920&q=80" 
         alt="{{contentful.hero.image.title}}"
         loading="eager">
  </div>
</section>

Styling Architecture

Sass Structure

assets/scss/
├── settings/             # Variables and configuration
│   ├── _global.scss      # Global settings
│   ├── _colors.scss      # Color palette
│   ├── _typography.scss  # Font settings
│   └── _spacing.scss     # Spacing scale
├── tools/                # Mixins and functions
│   ├── _mixins.scss      # Utility mixins
│   ├── _breakpoints.scss # Responsive helpers
│   └── _grid.scss        # Grid system
├── generic/              # Reset and normalize
│   ├── _reset.scss       # CSS reset
│   └── _box-sizing.scss  # Box model
├── elements/             # Base element styles
│   ├── _typography.scss  # Heading, paragraph
│   ├── _forms.scss       # Input, button, select
│   └── _tables.scss      # Table styles
├── components/           # Component styles
│   ├── _header.scss      # Site header
│   ├── _navigation.scss  # Navigation menus
│   ├── _product-card.scss
│   ├── _engraving-tool.scss
│   ├── _contentful.scss  # Contentful components
│   └── _instagram-feed.scss
├── utilities/            # Utility classes
│   ├── _spacing.scss     # Margin, padding
│   ├── _display.scss     # Display utilities
│   └── _text.scss        # Text utilities
└── theme.scss            # Main entry point

Component Example: Product Card

// assets/scss/components/_product-card.scss
.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: $background-main;
  border: 1px solid $border-color;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;

  &:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
  }

  &__image {
    position: relative;
    padding-top: 100%; // 1:1 aspect ratio
    overflow: hidden;
    background: $background-secondary;

    img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  &__badge {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 4px 12px;
    background: $accent-orange;
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 4px;
    text-transform: uppercase;
  }

  &__content {
    padding: 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  &__title {
    margin: 0 0 8px;
    font-family: $font-family-headings;
    font-size: 1rem;
    font-weight: 700;
    color: $text-primary;
    line-height: 1.4;
  }

  &__price {
    margin: 8px 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: $primary-green;
  }

  &__cta {
    margin-top: auto;
    padding: 12px 24px;
    background: $button-primary;
    color: white;
    text-align: center;
    text-decoration: none;
    border-radius: 4px;
    font-weight: 600;
    transition: background 0.2s;

    &:hover {
      background: $link-hover;
    }
  }
}

JavaScript Architecture

Module Structure

// assets/js/theme/
├── global.js              // Global initialization
├── product.js             // Product page logic
├── category.js            // Category page logic
├── cart.js                // Cart functionality
├── contentful.js          // Contentful API client
├── engraving/
│   ├── app.jsx            // Preact engraving app
│   ├── components/
│   └── utils/
└── utils/
    ├── api.js             // API helpers
    ├── form-utils.js      // Form validation
    └── storage.js         // LocalStorage wrapper

Event Handling

// assets/js/theme/product.js
import PageManager from './page-manager';
import { initEngravingTool } from './engraving/app';

export default class Product extends PageManager {
  onReady() {
    this.initImageGallery();
    this.initQuantitySelector();
    this.initAddToCart();

    // Initialize engraving tool if product is engravable
    const engravableFlag = this.$scope.find('[data-engravable]');
    if (engravableFlag.length) {
      initEngravingTool(this.$scope);
    }
  }

  initAddToCart() {
    this.$scope.on('submit', '[data-cart-item-add]', async (event) => {
      event.preventDefault();
      
      const form = event.currentTarget;
      const formData = new FormData(form);
      
      // Include engraving data if present
      const engravingData = this.getEngravingData();
      if (engravingData) {
        formData.append('engraving', JSON.stringify(engravingData));
      }
      
      await this.addToCart(formData);
    });
  }
}

Customization System

Theme Settings (schema.json)

BigCommerce theme customizer settings:

[
  {
    "name": "Engraving Options",
    "settings": [
      {
        "type": "checkbox",
        "label": "Enable Engraving Tool",
        "id": "engraving_enabled",
        "default": true
      },
      {
        "type": "select",
        "label": "Default Engraving Font",
        "id": "engraving_default_font",
        "options": [
          { "value": "stratum2", "label": "Stratum2" },
          { "value": "blade-runner", "label": "Blade Runner" },
          { "value": "arial", "label": "Arial" }
        ],
        "default": "stratum2"
      }
    ]
  },
  {
    "name": "Contentful Integration",
    "settings": [
      {
        "type": "text",
        "label": "Contentful Space ID",
        "id": "contentful_space_id",
        "default": "zg6h9gisshv3"
      },
      {
        "type": "checkbox",
        "label": "Enable Homepage Hero",
        "id": "contentful_homepage_hero",
        "default": true
      }
    ]
  }
]

Custom Fields

Products can have custom fields for engraving configuration:

Field Name	Type	Purpose
`engravable`	Checkbox	Enable engraving for this product
`engraving_location`	Text	Where engraving appears (e.g., "blade", "handle")
`max_characters`	Number	Maximum engraving length
`font_whitelist`	Text	Comma-separated allowed fonts

Performance Optimizations

Critical CSS

Inline critical CSS for above-the-fold content:

<head>
  <style>
    /* Critical CSS inlined */
    .header { /* ... */ }
    .hero-section { /* ... */ }
    .product-card { /* ... */ }
  </style>
  <link rel="preload" href="assets/css/theme.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
</head>

Font Loading Strategy

<link rel="preload" href="/assets/fonts/Stratum2-Regular.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/assets/fonts/Stratum2-Bold.woff2" as="font" type="font/woff2" crossorigin>

Image Optimization

<img
  src="{{getImage product.main_image 'product' (cdn ../theme_settings.default_image_product)}}"
  srcset="{{getImage product.main_image 'product' (cdn ../theme_settings.default_image_product)}} 1x,
          {{getImage product.main_image 'product' (cdn ../theme_settings.default_image_product)}}?width=800 2x"
  alt="{{product.title}}"
  loading="lazy"
  decoding="async"
  width="400"
  height="400"
>

Accessibility

WCAG 2.1 AA Compliance

Color contrast ratios meet 4.5:1 minimum
All interactive elements keyboard accessible
Focus indicators visible on all focusable elements
ARIA labels on icon-only buttons
Form validation with screen reader announcements

Semantic HTML

<header role="banner">
  <nav role="navigation" aria-label="Main navigation">
    <!-- Navigation items -->
  </nav>
</header>

<main role="main">
  <article itemscope itemtype="https://schema.org/Product">
    <!-- Product content -->
  </article>
</main>

<footer role="contentinfo">
  <!-- Footer content -->
</footer>

<button aria-label="Add {{product.name}} to cart" 
        aria-describedby="product-price-{{product.id}}">
  <span aria-hidden="true">🛒</span>
  Add to Cart
</button>

Browser Support

Browser	Minimum Version
Chrome	90+
Firefox	88+
Safari	14+
Edge	90+
iOS Safari	14+
Chrome Android	90+

Progressive enhancement ensures core functionality works on older browsers with degraded styling.

Overview​

Visual Design​

Brand Identity​

Typography​

Primary Font: Stratum2​

Font Stack​

Engraving Fonts​

Color Scheme​

Responsive Design​

Breakpoints​

Mobile Optimization​

Navigation​

Product Grids​

Images​

Template Structure​

Handlebars Templates​

Homepage (templates/pages/home.html)​

Product Page (templates/pages/product.html)​

Category Page (templates/pages/category.html)​

Custom Components​

Engraving Tool Component​

Contentful Hero Component​

Styling Architecture​

Sass Structure​

Component Example: Product Card​

JavaScript Architecture​

Module Structure​

Event Handling​

Customization System​

Theme Settings (schema.json)​

Custom Fields​

Performance Optimizations​

Critical CSS​

Font Loading Strategy​

Image Optimization​

Accessibility​

WCAG 2.1 AA Compliance​

Semantic HTML​

Screen Reader Support​

Browser Support​