Skip to main content

Theme Customizations

Documentation of the custom Elevate theme implementation for Cold Steel.

Theme Overview​

Base Theme: Elevate​

Theme Features​

  • ✅ Fully Responsive
  • ✅ Mega Navigation (multi-column menus)
  • ✅ Multi-Tiered Sidebar Menu
  • ✅ Masonry Design
  • ✅ Frontpage Slideshow
  • ✅ Quick Add to Cart
  • ✅ Switchable Product View (grid/list)
  • ✅ Product Comparison Table
  • ✅ Complex Search Filtering
  • ✅ Customizable Product Selector
  • ✅ Cart Suggested Products
  • ✅ BigCommerce Page Builder Support
  • ✅ High-Res Product Images
  • ✅ Product Videos
  • ✅ Google AMP Support
  • ✅ Enhanced E-commerce (Google Analytics)
  • ✅ CSRF Protection
  • ✅ Account Payment Methods v2

Cold Steel Customizations​

Current Style​

{
  "current-style": "fashion"
}

Visual Identity​

Brand Colors​

// Navigation
$navpages-menu-bar-color: #0066B3;

// Product Elements
$product-title-color: #333333;
$product-desc-color: #202738;
$product-card-bg: #ffffff;
$product-card-bg-hover: #fafafd;

// Category Elements
$category-section-bg: #fafafd;
$category-header-bg: #333333;
$category-box-shadow: #fafafd;

// Badges
$new-badge: #61ca70;
$new-badge-hover: #000000;

// Social Media Brand Colors
$product-facebook-color: #3b5998;
$product-twitter-color: #55acee;
$product-pinterest-color: #bd081c;
$product-linkedin-color: #0077b5;

Typography​

{
  "headings-font": "Google_Teko_300,300i,400,400i,500,500i,600,600i,700,700i",
  "headings-fontSize": 36,
  "body-font": "Google_Roboto_400,400i,500,500i,600,600i,700,700i",
  "product-title-font": "Google_Teko_300,300i,400,400i,500,500i,600,600i,700,700i",
  "product-title-fontSize": 26,
  "kicker-font": "Google_Roboto_400,400i,500,500i,600,600i,700,700i",
  "footer_newsletter_font": "Google_Roboto+Condensed_300,300i,400,400i,700,700i"
}

Header Customization​

Topbar Notice Banner​

Custom Swiper carousel in header showing promotional messages:

<div class="topbar-notice">
    <div class="swiper topbar-swiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide">Shop Knife BOGO Deals</div>
            <div class="swiper-slide">Free Shipping on Orders Over $95</div>
        </div>
    </div>
</div>

Configuration:

  • Loop enabled
  • 6-second autoplay delay
  • Fade effect
  • Navigation arrows
  • Dismissible with close button

Static Banner​

{
  "static-banner-text": "Custom promotional text",
  "hide_static_banner": false
}

Mega Menu Configuration​

  • Columns: Configurable 3-8 column width
  • Type: Multi-column dropdown with categories
  • Custom Styling: Blue background (#0066B3)
  • Mobile: Hamburger menu with accordion sidebar
// elevatecustom.js
if (scroll >= FullHeaderHeight) {
    $('.header').addClass('sticky-header');
    $('.header_placeholder').css({display: 'block'});
}

Features:

  • Activates after scrolling past full header height
  • Smooth animation transition
  • Placeholder div prevents content jump
  • Desktop only (>1023px width)

Product Display​

Category View Modes​

Users can toggle between:

  1. Grid View (default)

    • Card-based layout
    • Hover effects
    • Quick view button
    • Swatch display option

  2. List View

    • Extended product information
    • Larger images
    • Detailed descriptions

Cookie-based preference persistence:

// elevatecustom.js
function Set_Cookie(value) {
    document.cookie = "data-view=" + value;
}

Product Cards​

  • Background: White (#ffffff)
  • Hover Background: Off-white (#fafafd)
  • Price Color: Light gray (#bababa)
  • Badge Colors: New (green #61ca70), Sale (customizable)
  • Share Icons: Social media with brand colors

Image Cycling​

Feature allowing customers to cycle through product photos on category pages:

  • Hover-triggered image rotation
  • Smooth transitions
  • Lazy-loaded subsequent images

Newsletter Section​

Klaviyo integration with custom styling:

{
  "footer_newsletter_title": "Sign up for the latest news and offers",
  "footer_newsletter_font": "Google_Roboto+Condensed_300,300i,400,400i,700,700i",
  "hide_footer_newsletter": false
}

Social Media Integration​

Hard-coded social links in footer.html:

Payment Icons​

SVG sprite-based payment method icons:

  • American Express
  • Discover
  • Mastercard
  • Visa
  • PayPal
  • Amazon Pay
  • Google Pay
  • Klarna

Copyright & Credits​

© 2024 Cold Steel All Rights Reserved |
Designed by Rhino Group |
Sitemap

Product Page Enhancements​

Klaviyo Product Tracking​

var item = {
    Name: "{{product.title}}",
    ProductID: "{{product.id}}",
    ImageURL: "{{getImage product.main_image 'product_size'}}",
    URL: "{{product.url}}",
    Brand: "{{product.brand.name}}",
    Price: "{{product.price.without_tax.value}}",
    CompareAtPrice: "{{product.price.rrp_without_tax.value}}"
};
klaviyo.push(['track', 'Viewed Product', item]);

Product Tabs​

  • Description
  • Specifications
  • Reviews
  • Additional Information
{
  "related-sub": "From the same Collection",
  "customer-also-sub": "From the same Collection"
}

Cart Page Customizations​

Financing Options​

Two financing providers displayed on cart page:

  1. Klarna Placement
<klarna-placement
    data-key="top-strip-promotion-badge"
    data-locale="en-US"
    data-purchase-amount="{{floor (multiply product.price.without_tax.value 100)}}"
></klarna-placement>
  1. Sezzle Widget
const renderSezzle = new AwesomeSezzle({
    amount: `{{cart.sub_total.value}}`,
    widgetType: `cart`,
    widgetTemplate: `%%logo%% Shop now. Pay later with Sezzle. %%link%%`,
    fontFamily: 'Source Sans Pro, sans-serif'
});

Custom Components​

Swiper Carousels​

Two custom Swiper implementations:

  1. CTA Banner Carousel (coldsteel/swiper.js)

    • Responsive breakpoints
    • Grid layout on desktop
    • Pagination bullets
    • 3 columns on desktop, 2.3 on tablet, 1.3 on mobile

  2. Featured Products Swiper

    • Up to 5 products on large screens
    • Progressive enhancement across breakpoints
    • Navigation arrows on desktop
    • Touch-enabled swiping

Custom search with:

  • Live results dropdown
  • Product previews
  • Category suggestions
  • Modal interface

Cart Preview​

Dropdown cart in header:

  • Item count badge
  • Quick view of items
  • Subtotal display
  • Checkout button

Responsive Design​

Breakpoints​

// Mobile-first approach
@media (min-width: 551px) { /* Tablet */ }
@media (min-width: 801px) { /* Small desktop */ }
@media (min-width: 1024px) { /* Desktop */ }
@media (min-width: 1280px) { /* Large desktop */ }
@media (min-width: 1850px) { /* Extra large */ }

Mobile Optimizations​

  • Hamburger menu
  • Accordion category sidebar
  • Stacked layouts
  • Touch-optimized buttons
  • Simplified navigation

Custom Fonts​

Icomoon Icon Font​

@font-face {
    font-family: 'icomoon';
    src: url('{{cdn 'assets/fonts/icomoon.eot?pdewnu'}}');
    /* Additional formats */
}

Third-Party Libraries​

import '@fancyapps/fancybox/dist/jquery.fancybox.min';

Features:

  • Product image zoom
  • Thumbnail navigation
  • Keyboard shortcuts
  • Touch gestures

Legacy carousel for some components:

<link rel="stylesheet" type="text/css" href="{{cdn 'assets/scss/elevate/slick.css'}}"/>

Schema Customizer​

The schema.json provides 1000+ lines of customization options including:

Global Settings​

  • Banner section (text, colors, fonts)
  • Background and lines
  • Body text and links
  • Page headings
  • Buttons (primary, secondary, alert)
  • Forms (inputs, selects, checkboxes)
  • Menu bar colors
  • Dropdown styles
  • Mobile menu appearance
  • Sidebar menu configuration

Product Settings​

  • Card layout options
  • Image display settings
  • Price styling
  • Badge configuration
  • Review display
  • Newsletter section
  • Social media links
  • Payment icons
  • Copyright text
  • Link configuration

Accessibility Features​

  • Semantic HTML5 elements
  • ARIA labels and roles
  • Keyboard navigation
  • Focus indicators
  • Screen reader-friendly text

Performance Optimizations​

  • Lazy loading images (lazysizes)
  • Code splitting by page type
  • Minified assets
  • CDN delivery
  • Browser caching headers

Changelog​

Version 1.3.0 (Nov 15, 2020)​

  • Redeveloped sticky header animation
  • Reduced spacing between nav buttons
  • Adjusted sub-menu spacing
  • Added category sidebar hide option

Version 1.2.4 (Nov 6, 2020)​

  • Category images display options (banners or thumbnails)
  • Fixed typo in schema file

Version 1.2.3 (Nov 1, 2020)​

  • Fixed color swatch bug with multiple patterns
  • Adjusted search box styling (Outdoors variant)

Version 1.2.2 (Oct 31, 2020)​

  • Tweaked main menu color option
  • Mobile menu arrow color sync

Version 1.2.1 (Oct 30, 2020)​

  • Hide page builder sidebar banners on mobile
  • Fixed Braintree cart icon bug

Version 1.2.0 (Oct 26, 2020)​

  • Added category banner shadow option
  • Global region for page builder in sidebar
  • Improved lazy loading (LQIP mode)
  • Redesigned blog layout
  • Default category view option

Version 1.1.0 (Oct 20, 2020)​

  • Added global header region for Page Builder
  • Fixed Google Font "Saira" loading bug
  • Fixed sidebar display with shop-by-price disabled

See CHANGELOG.md for complete history.