Freelance Project for

Building AZ Kids Store: How We Turned Local Heritage into an Online Shopping Experience

URL: az-kids-travel.gr • Author: Panagiotis Pitsikoulis

AZ Kids Store extends the magic of AZ Kids Travel into a full-fledged e-commerce experience. Parents, teachers and young adventurers can now bring Greek fairy tales, puzzles and handcrafted keepsakes straight into their homes. Under the hood, the shop runs on a streamlined stack—WordPress 6 + WooCommerce, a bespoke Tailwind CSS theme, and purpose-built wholesale tooling—developed in collaboration with three teammates who helped photograph, describe and upload dozens of products.

1. Platform Choice — WordPress + WooCommerce

For a content-heavy brand built on storytelling, WordPress offered the perfect balance of editorial flexibility and plug-and-play commerce. WooCommerce provided:

Secure payment gateways (Stripe & Viva Wallet)
Product variations (size, language, packaging)
Built-in coupon and inventory management

Because page-load speed matters for families on mobile, we stripped away bloated plugins and replaced the stock theme with a minimal Tailwind build.

2. Custom Tailwind Theme

Zero JavaScript for critical rendering—only Alpine.js for cart toggles.
Utility-first classes keep CSS under 15 KB gzipped.
Dark-mode tokens derived from Tailwind’s color palette so parents can browse comfortably at night.
SVG icons in a Spritemap; no external icon fonts.

3. Wholesale & Role-Based Pricing

A significant revenue stream comes from schools ordering class sets. We added a wholesale_customer role in WooCommerce and built a custom plugin that:

Applies tiered discounts at 10, 25 and 50 units.
Exposes bulk-add checkboxes on the shop grid.
Hides VAT invoices from retail shoppers but attaches them automatically for wholesale accounts.

4. Collaboration Workflow

Three teammates joined the project:

Maria K. — product photography & image optimization.
Giannis P. — SKU management & stock imports via WooCommerce CSV.
Eleni M. — bilingual copywriting (GR/EN) inside WordPress Block Editor.

Each contributor received a custom WordPress role restricting them to product and media CPTs. Slack webhooks notify the team when a product hits “Ready for Review,” keeping the launch schedule transparent.

5. Performance & Caching

WP-Super-Cache serves anonymous users from static HTML files.
Object caching via Redis on every product query.
All images pass through webp_uploads; thumbnails lazy-load with loading="lazy".
HTTP/2 + Brotli compression enabled on the Nginx layer.

6. Payment & Security Layers

The checkout page runs behind HTTPS enforced by HSTS. Stripe Elements handles credit-card fields to ensure PCI compliance. A server-side webhook retries failed status updates for guaranteed order integrity. We also enabled ReCAPTCHA v3 on login and checkout to deter bots.

7. Multilingual Support

Using WPML, every product has Greek and English slugs. The theme’s Tailwind components call esc_html__( ... , 'azkids' ), keeping translations safe from XSS. Language switching respects the user’s browser locale and persists via cookie.

8. Video & Animation Integration

Product pages embed short MP4 clips in a <video> tag with automatic HLS fallback for Safari.
Lottie animations run on scroll to showcase puzzle assembly and necklace details.
All motion assets load in a defer chunk <script type="module" defer>, preserving first paint.

9. Observability & CI/CD

GitHub Actions lints PHP with phpcs and builds Tailwind on every push.
Staging deploys on a separate subdomain; main merges promote to production.
New Relic monitors PHP response times; Peak LCP metrics feed into Google Analytics 4.

10. Result

Page-to-interactive averages 1.1 seconds on 4 G. Wholesale buyers can complete a bulk order in under three clicks, parents checkout in less than a minute, and educators find bilingual resources without hunting through menus. Most importantly, every product keeps the AZ Kids mission alive: “Our own heroes, in our own place.”

Interested in the Code?

You can inspect snippets of the Tailwind theme, custom wholesale plugin, and translation workflow on my GitHub profile. For a deeper dive—or to discuss performance tuning WooCommerce—feel free to contact me through the portfolio site at panagiotispitsikoulis.gr.

Enter a URL above to start browsing

No URL loadedStatus: ReadyReady

AZ Kids Store: Gifts That Spark Wonder and Imagination