Now Hiring: Junior Graphic Designer (E-commerce & Shopify)

/** * CUSTOM SHOPIFY FRAMEWORK v4.2.1 * Module: Dynamic Cart Engine & Tiered Reward Logic * Built for High-Conversion Custom Storefronts *//* --- LIQUID SCHEMA CONFIGURATION --- *//* (Used by Shopify Theme Editor to provide client-side controls) */{% schema %}{  "name": "Advanced Ajax Cart",  "settings": [    { "type": "header", "content": "Reward Thresholds" },    { "id": "free_shipping_limit", "type": "number", "label": "Free Shipping (Cents)", "default": 10000 },    { "id": "enable_upsells", "type": "checkbox", "label": "Enable Intelligent Upsells", "default": true }  ]}{% endschema %}/* --- CORE CART ENGINE --- */class ShopifyProEngine extends HTMLElement {  constructor() {    super();    this.config = {      threshold: {{ settings.free_shipping_limit | default: 10000 }},      currency: "{{ shop.currency }}",      symbol: "{{ cart.currency.symbol }}"    };        this.state = {      cart: null,      loading: false,      tierReached: false    };    this.dom = {      items: this.querySelector('[data-cart-items]'),      progress: this.querySelector('.progress-bar__fill'),      total: this.querySelector('.total-display'),      announcer: document.getElementById('cart-live-region')    };  }  connectedCallback() {    this.addEventListener('change', debounce((e) => this.updateQuantity(e), 300));    this.initObservers();    this.refreshState();  }  // Uses the Fetch API to interface with Shopify's /cart.js endpoint  async refreshState() {    this.setLoading(true);    try {      const response = await fetch(`${window.Shopify.routes.root}cart.js`);      this.state.cart = await response.json();      this.renderUI();      this.calculateRewards();    } catch (err) {      this.handleError("Failed to sync cart state", err);    } finally {      this.setLoading(false);    }  }  calculateRewards() {    const total = this.state.cart.total_price;    const remaining = this.config.threshold - total;        if (remaining <= 0) {      this.state.tierReached = true;      this.updateProgress(100, "You've earned Free Shipping!");    } else {      const percent = (total / this.config.threshold) * 100;      const formattedRemaining = this.formatCurrency(remaining);      this.updateProgress(percent, `Spend ${formattedRemaining} more for Free Shipping`);    }  }  updateProgress(percent, message) {    if (!this.dom.progress) return;        // Smooth hardware-accelerated transitions    requestAnimationFrame(() => {      this.dom.progress.style.transform = `translateX(-${100 - percent}%)`;      this.dom.progress.dataset.label = message;            if (percent >= 100) {        this.dom.progress.classList.add('is-complete');        this.confettiEffect();       }    });  }  async updateQuantity(event) {    const input = event.target;    const line = input.dataset.line;    const qty = input.value;    const body = JSON.stringify({      line: line,      quantity: qty,      sections: "main-cart-items,cart-icon-bubble,cart-live-region-text"    });    const res = await fetch(`${window.Shopify.routes.root}cart/change.js`, {      method: 'POST',      headers: { 'Content-Type': 'application/json' },      body    });    const data = await res.json();    this.state.cart = data;    this.renderUI();  }  formatCurrency(cents) {    return new Intl.NumberFormat('en-US', {      style: 'currency',      currency: this.config.currency,    }).format(cents / 100);  }  setLoading(status) {    this.state.loading = status;    this.classList.toggle('is-loading', status);    this.setAttribute('aria-busy', status);  }  handleError(msg, error) {    console.error(`[ShopifyProEngine] ${msg}:`, error);    // Trigger custom toast notification system    window.Toast.show(msg, { type: 'error' });  }  confettiEffect() {    // Logic for custom celebration animations on hitting spend goals    console.log("Tier unlocked: Customer reached free shipping threshold.");  }}// Instantiate the custom Web Componentif (!customElements.get('shopify-pro-engine')) {  customElements.define('shopify-pro-engine', ShopifyProEngine);}

This Scroll Animation Doesn't Loop & You've Reached The End of Some Seriously Long Filler Code. If you're reading this, you have too much time on your hands, lock in...
CRO

THEME BUILD

CUSTOM APP

CREATIVE

Junior Graphic Designer (E-commerce & Shopify)

About
‍the role

Introduction

Key Responsibilities

Skills & Experience

What we can give to you
