The Client

Springpilot.com sells specialized pilot control spring kits (SP55 and SP66) for excavators. The client came to me with several frustrations about their Shopify store's user experience and needed targeted improvements without breaking their existing Spotlight theme.

The Problems

The store had several UX issues that were hurting the customer experience:

  1. Cramped Product Layout - Product descriptions appeared next to images, making the page feel cluttered and hard to read
  2. Ugly Review Display - The Judge.me review widget showed overly long product titles like "SP55 - Pilot Control Spring Kit (GEN1)" which looked messy
  3. Dead Links - URLs in product descriptions weren't clickable, forcing international customers to copy/paste eBay links
  4. Missing Social Presence - No easy way for customers to find their Facebook group or eBay store from the footer

My Solution: Non-Invasive Customization

Rather than modifying the theme files directly (which would break on updates), I created a clean separation of concerns:

  • springpilot.js - All JavaScript customizations with a master toggle
  • springpilot.css - All CSS overrides
  • Footer section via Theme Editor - Social media links

The Master Toggle Pattern

const USE_JACOB_CUSTOMIZATIONS = "yes";

if (USE_JACOB_CUSTOMIZATIONS === "yes") {
  // All customizations here
}

This gives the client a one-line switch to instantly disable all customizations if something goes wrong—essential for troubleshooting.

Feature 1: Product Page Layout Fix

Moved the product description from beside the images to below the entire product grid on desktop. This creates breathing room and makes the page feel more professional.

document.addEventListener('DOMContentLoaded', function() {
  if (window.innerWidth >= 750) {
    const description = document.querySelector('.product__description');
    const productGrid = document.querySelector('.product.grid');
    
    if (description && productGrid) {
      const wrapper = document.createElement('div');
      wrapper.className = 'product__description-moved';
      wrapper.appendChild(description.cloneNode(true));
      productGrid.parentNode.insertBefore(wrapper, productGrid.nextSibling);
      description.style.display = 'none';
    }
  }
});

Feature 2: Judge.me Review Title Simplification

The Judge.me widget insisted on showing full product names. My solution intercepts the rendered text and replaces it with cleaner versions:

  • "SP55 - Pilot Control Spring Kit (GEN1)" → "SP55 (GEN1)"
  • "SP66 - Pilot Control Spring Kit (GEN2)" → "SP66 (GEN2)"
function simplifyProductTitles() {
  const allElements = document.getElementsByTagName('*');
  
  for (let i = 0; i < allElements.length; i++) {
    const element = allElements[i];
    
    if (element.classList.contains('jdgm-carousel-item__product-title') ||
        element.classList.contains('jdgm-rev__product-title')) {
      if (element.childNodes.length === 1 && 
          element.childNodes[0].nodeType === 3) {
        const text = element.childNodes[0].textContent.trim();
        
        if (text === 'SP55 - Pilot Control Spring Kit (GEN1)') {
          element.childNodes[0].textContent = 'SP55 (GEN1)';
        }
      }
    }
  }
}

setTimeout(simplifyProductTitles, 500);
setTimeout(simplifyProductTitles, 2000);

The dual timeouts handle Judge.me's delayed rendering.

Feature 3: Smart URL Auto-Linking

Product descriptions contained text like "EBAY (https://ebay.us/m/urLMMD)" that needed to become clickable. A regex replacement handles this:

const description = document.querySelector('.product__description');
if (description) {
  description.innerHTML = description.innerHTML.replace(
    /(\w+)\s*\((https:\/\/[^\)]+)\)/g,
    '<a href="$2" target="_blank" style="color: #fe840a;">$1</a>'
  );
}

Now "EBAY (https://...)" becomes a clickable orange link that opens in a new tab.

Added Facebook and eBay icons to the footer using Font Awesome, styled in the brand's orange color (#fe840a) with hover animations. This was done via Shopify's theme editor as a custom liquid section, so it persists across theme updates.

Feature 5: Excavator Compatibility Checker

Built an interactive tool that lets customers check if their excavator model is compatible with the spring kits. Supports multi-select for makes and models with search filtering:

  • Search by make (Caterpillar, Komatsu, Volvo, etc.)
  • Search by model number
  • Auto-selection when searching models without selecting make first
  • Success/error feedback with appropriate styling

The Architecture

/assets/
├── springpilot.js    # All JavaScript (with master toggle)
└── springpilot.css   # All CSS overrides

/sections/
└── footer-group.json # Social media links config

/docs/
└── CUSTOMIZATION_SUMMARY.md  # Client documentation

Key Decisions

Why not modify theme files?
Shopify themes update regularly. Modifications to core files get overwritten. By keeping everything in separate files, theme updates won't break customizations.

Why a master toggle?
Clients aren't developers. If something goes wrong, they need a simple way to disable customizations without understanding the code.

Why vanilla JavaScript?
No build step required. The client can edit files directly in Shopify's code editor without needing a development environment.

Results

  • Cleaner, more readable product pages
  • Professional review displays
  • One-click access to eBay store for international customers
  • Easy social media discovery in footer
  • Interactive compatibility checker to reduce support questions
  • Update-safe architecture that won't break
  • Clear documentation for future maintainers

The client can now update their theme without worrying about losing customizations, and has a simple toggle to disable everything if needed for troubleshooting.