00.

Project Overview

INTERNAL ONLY: This document contains implementation details for dev team review.

Key Findings Summary

Category Issues Priority
Tracking Missing ViewContent, AddToCart, Klaviyo events, Snapchat pixel Critical
Performance 600KB+ JS, unminified jQuery, duplicate files High
Code Quality console.log in prod, 347 !important in CSS Medium
SEO Missing Product schema, BreadcrumbList Medium
Conversion No trust badges, reviews, social proof High
Brand No differentiation between Luxe/APSL/Collabs High
01.

Codebase Structure

Theme Architecture

/layout └── theme.liquid # Main layout - tracking pixels here └── password.liquid /sections └── main-product.liquid # Product page (1800+ lines) └── header.liquid # Contains Organization schema └── footer.liquid # Newsletter signup └── cart-drawer.liquid └── popup.liquid # Email capture popup /snippets └── product-card.liquid └── meta-tags.liquid # OG tags, Twitter cards └── facets.liquid /assets └── global.js # 59KB └── jquery-3.6.0.js # 284KB - UNMINIFIED! └── swiper-bundle.min.js # 148KB └── gsap.min.js # 70KB └── cart.js # Cart functionality └── product-form.js # Add to cart handling /templates └── product.json # Default product └── product.product-kuduhood.json # KUDU template (reference!) └── product.product-page-apex.json # APEX template └── collection.json # Default collection

Key Reference Files

Purpose File
Main layout (pixels go here) layout/theme.liquid
Product page logic sections/main-product.liquid
Cart JS (AddToCart events) assets/cart.js
Product form JS assets/product-form.js
Email popup sections/popup.liquid
KUDU template (gold standard) templates/product.product-kuduhood.json
02.

Phase 1: Critical Fixes

Critical — Do these first, regardless of which option client chooses.

1.1 Remove Console.log Statements

assets/load-more.js — Line 43
// REMOVE THIS LINE:
console.log("I was called to animate images");
assets/collapsible-content.js — Line 46
// REMOVE THIS LINE:
console.log("It was called");
assets/banner-with-tabs.js — Line 43
// REMOVE THIS LINE:
console.log(window.getComputedStyle(...));

1.2 Delete Duplicate Files

Files to delete:

  • assets/cart copy.js
  • assets/product-slider copy.js
  • assets/load-more - Copy.js
  • assets/collapsible-content copy.js

Before deleting: Search theme for any references to these filenames.

1.3 Fix Schema URLs

sections/header.liquid — Lines 236, 286
// CHANGE FROM:
"@context": "http://schema.org",

// CHANGE TO:
"@context": "https://schema.org",
03.

Phase 2: Tracking Implementation

Critical — This is why their ads aren't optimizing properly.

2.1 Meta ViewContent Event

sections/main-product.liquid — After line 28
{% comment %} Meta Pixel - ViewContent Event {% endcomment %}
<script>
  document.addEventListener('DOMContentLoaded', function() {
    if (typeof fbq !== 'undefined') {
      fbq('track', 'ViewContent', {
        content_ids: ['{{ product.id }}'],
        content_name: {{ product.title | json }},
        content_type: 'product',
        content_category: '{{ product.type }}',
        value: {{ product.price | divided_by: 100.0 }},
        currency: '{{ cart.currency.iso_code }}'
      });
    }
  });
</script>

2.2 Meta AddToCart Event

assets/product-form.js — Inside success callback
// After successful cart add:
if (typeof fbq !== 'undefined') {
  fbq('track', 'AddToCart', {
    content_ids: [variantId.toString()],
    content_name: productTitle,
    content_type: 'product',
    value: price,
    currency: window.Shopify?.currency?.active || 'USD'
  });
}

2.3 Klaviyo Events

sections/main-product.liquid
{% comment %} Klaviyo - Viewed Product {% endcomment %}
<script>
  document.addEventListener('DOMContentLoaded', function() {
    var _learnq = window._learnq || [];
    _learnq.push(['track', 'Viewed Product', {
      ProductName: {{ product.title | json }},
      ProductID: {{ product.id | json }},
      SKU: {{ product.selected_or_first_available_variant.sku | json }},
      Categories: {{ product.collections | map: 'title' | json }},
      ImageURL: '{{ product.featured_image | image_url: width: 1024 }}',
      URL: '{{ shop.url }}{{ product.url }}',
      Brand: {{ product.vendor | json }},
      Price: {{ product.price | divided_by: 100.0 }}
    }]);
  });
</script>

2.4 Snapchat Pixel

Need from client: Snapchat Pixel ID from their Snapchat Ads account.

layout/theme.liquid — Inside <head>
{% comment %} Snapchat Pixel {% endcomment %}
<script type="text/javascript">
(function(e,t,n){if(e.snaptr)return;var a=e.snaptr=function()
{a.handleRequest?a.handleRequest.apply(a,arguments):a.queue.push(arguments)};
a.queue=[];var s='script';r=t.createElement(s);r.async=!0;
r.src=n;var u=t.getElementsByTagName(s)[0];
u.parentNode.insertBefore(r,u);})(window,document,
'https://sc-static.net/scevent.min.js');

snaptr('init', 'YOUR_SNAP_PIXEL_ID', {
  'user_email': '{{ customer.email | default: "" }}'
});
snaptr('track', 'PAGE_VIEW');
</script>
04.

Phase 3: Performance Optimization

High

3.1 Replace Unminified jQuery

Current: jquery-3.6.0.js = 284KB
Target: jquery-3.6.0.min.js = 87KB
Savings: ~200KB

Option A: Use CDN with Local Fallback

layout/theme.liquid
// REPLACE:
<script src="{{ 'jquery-3.6.0.js' | asset_url }}" defer="defer"></script>

// WITH:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
  defer="defer"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="{{ 'jquery-3.6.0.min.js' | asset_url }}" defer="defer"><\/script>')</script>

Option B: Replace Asset File

  1. Download minified from https://code.jquery.com/jquery-3.6.0.min.js
  2. Upload as assets/jquery-3.6.0.min.js
  3. Update reference in layout/theme.liquid
  4. Delete old assets/jquery-3.6.0.js

3.2 Lazy Load Non-Critical JS

layout/theme.liquid — Conditional loading
{% comment %} Only load on collection pages {% endcomment %}
{% if template contains 'collection' %}
  <script src="{{ 'facets.js' | asset_url }}" defer="defer"></script>
{% endif %}

{% comment %} Only load on product pages {% endcomment %}
{% if template contains 'product' %}
  <script src="{{ 'product-form.js' | asset_url }}" defer="defer"></script>
{% endif %}
05.

Phase 4: SEO Enhancements

Medium

4.1 Add Product Schema

sections/main-product.liquid — Before closing </section>
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": {{ product.title | json }},
  "image": [
    "{{ product.featured_image | image_url: width: 1024 }}"
    {%- for image in product.images offset: 1 limit: 4 -%}
    ,"{{ image | image_url: width: 1024 }}"
    {%- endfor -%}
  ],
  "description": {{ product.description | strip_html | truncate: 5000 | json }},
  "sku": {{ product.selected_or_first_available_variant.sku | json }},
  "brand": {
    "@type": "Brand",
    "name": {{ product.vendor | default: "AlphaStyle" | json }}
  },
  "offers": {
    "@type": "Offer",
    "url": "{{ shop.url }}{{ product.url }}",
    "priceCurrency": "{{ cart.currency.iso_code }}",
    "price": "{{ product.price | divided_by: 100.0 }}",
    "availability": "{% if product.available %}https://schema.org/InStock{% else %}https://schema.org/OutOfStock{% endif %}"
  }
}
</script>

4.2 Add BreadcrumbList Schema

Create: snippets/breadcrumb-schema.liquid
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Home",
      "item": "{{ shop.url }}"
    }
    {%- if template contains 'product' and product.collections.first -%}
    ,{
      "@type": "ListItem",
      "position": 2,
      "name": {{ product.collections.first.title | json }},
      "item": "{{ shop.url }}{{ product.collections.first.url }}"
    }
    ,{
      "@type": "ListItem",
      "position": 3,
      "name": {{ product.title | json }},
      "item": "{{ shop.url }}{{ product.url }}"
    }
    {%- endif -%}
  ]
}
</script>

Then include in layout/theme.liquid:

{% render 'breadcrumb-schema' %}
06.

Phase 5: Conversion Elements

High

5.1 Create Trust Badges Snippet

Create: snippets/trust-badges.liquid
{% comment %} Trust Badges - Usage: {% render 'trust-badges' %} {% endcomment %}
<div class="trust-badges">
  <div class="trust-badge">
    <svg><!-- shipping icon --></svg>
    <span>Free Shipping Over $60</span>
  </div>
  <div class="trust-badge">
    <svg><!-- return icon --></svg>
    <span>Easy Returns</span>
  </div>
  <div class="trust-badge">
    <svg><!-- secure icon --></svg>
    <span>Secure Checkout</span>
  </div>
</div>

<style>
.trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 1.5rem 0;
  padding: 1rem 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.trust-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
}
.trust-badge svg { width: 20px; height: 20px; }
</style>

Add to product page after price block:

{% render 'trust-badges' %}

5.2 Increase Touch Targets

assets/base.css
/* Find buttons with min-height: 4rem (40px) */
/* Update to min-height: 4.4rem (44px) for accessibility */

.button,
.btn,
[type="submit"] {
  min-height: 4.4rem; /* was 4rem */
}
07.

Phase 6: Template Differentiation

High — Only in Full Transformation option

6.1 Create Luxe Collection Template

Create: templates/collection.luxe.json
{
  "sections": {
    "banner": {
      "type": "collection-banner",
      "settings": {
        "show_collection_description": true,
        "show_collection_image": true
      }
    },
    "main": {
      "type": "main-collection-product-grid",
      "settings": {
        "products_per_page": 12,
        "products_to_show_row": 2,
        "columns_mobile": "1",
        "image_ratio": "portrait",
        "image_fit": "cover",
        "show_vendor": false,
        "show_color_count": false,
        "show_size_count": false,
        "enable_filtering": false,
        "enable_sorting": false
      }
    }
  },
  "order": ["banner", "main"]
}

Key differentiators: 2 products per row, no filters, portrait images, clean editorial feel

6.2 Create APSL Collection Template

Create: templates/collection.apsl.json
{
  "sections": {
    "main": {
      "type": "main-collection-product-grid",
      "settings": {
        "products_per_page": 24,
        "products_to_show_row": 4,
        "columns_mobile": "2",
        "image_ratio": "square",
        "show_color_count": true,
        "show_size_count": true,
        "enable_filtering": true,
        "enable_sorting": true
      }
    }
  },
  "order": ["main"]
}

Key differentiators: 4 products per row, full filtering, conversion-optimized

08.

Phase 7: Email/SMS Capture

Medium

7.1 Add SMS Field to Popup

sections/popup.liquid — After email input
<div class="field">
  <input
    id="PopupPhone--{{ section.id }}"
    type="tel"
    name="contact[phone]"
    class="field__input field"
    autocomplete="tel"
    placeholder="Phone (for SMS alerts)"
  >
  <label class="visually-hidden" for="PopupPhone--{{ section.id }}">
    Phone number
  </label>
</div>

7.2 Conditional Popup Messaging

sections/popup.liquid — Add at top
{% assign popup_heading = section.settings.heading %}
{% assign popup_text = section.settings.text %}

{% if request.path contains 'luxe' %}
  {% assign popup_heading = section.settings.luxe_heading | default: popup_heading %}
  {% assign popup_text = section.settings.luxe_text | default: popup_text %}
{% elsif request.path contains 'collab' %}
  {% assign popup_heading = section.settings.collab_heading | default: popup_heading %}
  {% assign popup_text = section.settings.collab_text | default: popup_text %}
{% endif %}

Then add to schema settings:

{
  "type": "text",
  "id": "luxe_heading",
  "label": "Luxe Collection Heading",
  "default": "Be First to Know"
},
{
  "type": "text",
  "id": "collab_heading",
  "label": "Collaboration Heading",
  "default": "Never Miss a Drop"
}
09.

Testing Checklist

Pre-Deployment

Tracking Verification

  • Meta Pixel Helper shows ViewContent on product pages
  • Meta Pixel Helper shows AddToCart on cart add
  • GA4 DebugView shows events
  • Klaviyo shows real-time activity
  • Snapchat Pixel Helper confirms events

Performance

  • Run Lighthouse before and after jQuery change
  • Test page load on 3G throttling
  • Verify no console errors
  • Check all pages for broken functionality

SEO

  • Validate Product schema with Google Rich Results Test
  • Check structured data on all page types
  • Verify OG tags with Facebook Debugger

Functionality

  • Add to cart works on all product templates
  • Cart drawer opens and functions
  • Checkout flow completes
  • Email popup appears and submits
  • Mobile navigation works

Cross-Browser

  • Chrome
  • Safari
  • Firefox
  • Edge
  • iOS Safari
  • Android Chrome
10.

Files Reference

Files to Modify

File Changes
layout/theme.liquid Snapchat pixel, jQuery swap, breadcrumb schema
sections/main-product.liquid ViewContent event, Klaviyo event, Product schema, trust badges
sections/header.liquid Schema URL fix (http → https)
sections/popup.liquid SMS field, conditional messaging
assets/product-form.js AddToCart event
assets/load-more.js Remove console.log
assets/collapsible-content.js Remove console.log
assets/banner-with-tabs.js Remove console.log
assets/base.css Touch target sizes

Files to Delete

  • assets/cart copy.js
  • assets/product-slider copy.js
  • assets/load-more - Copy.js
  • assets/collapsible-content copy.js

Files to Create

  • snippets/trust-badges.liquid
  • snippets/breadcrumb-schema.liquid
  • templates/collection.luxe.json (Full option only)
  • templates/collection.apsl.json (Full option only)

Files to Replace

Current Replace With Savings
jquery-3.6.0.js (284KB) jquery-3.6.0.min.js (87KB) ~200KB

Questions? Ping Mo before starting. Always test in development theme first.