Tenten's Tech Stack: The Tools We Use to Build World-Class Shopify Stores

Why Your Tech Stack Matters More Than Your Dev Skills

You can have an excellent developer, but if they're using the wrong tools, they'll build slower and your projects will be harder to maintain.

Tenten has built 300+ Shopify stores over 8 years. In that time, we've tested, rejected, and standardized on a specific set of tools. This stack is not the "sexiest" or most cutting-edge. It's the most pragmatic for shipping quality, maintainable Shopify builds on deadline.

This guide walks through our stack: why we chose each tool, what problems it solves, and what you should consider if you're building a similar operation.

Core Development Tools

Version Control: GitHub

We use GitHub for all code repositories. Every Shopify project lives in a private repo.

Why GitHub: Industry standard, native integration with most CI/CD tools, excellent for code review and team collaboration.

Alternative: GitLab, Bitbucket. GitHub is fine.

Setup: Private repos for client projects. Public repos for open-source libraries (Tenten builds some open-source Shopify tools). Access via SSH keys, no passwords.

Development Framework: Remix + Hydrogen (Headless Shopify)

For custom Shopify builds (beyond Liquid theme customization), we use Hydrogen (Shopify's React framework for headless commerce).

Why Hydrogen: Native Shopify integration, built for performance, handles inventory sync automatically, supports Shopify Admin API natively.

Alternative: Next.js (more flexible, more popular, but less Shopify-native), SvelteKit (lighter weight, but smaller community).

When we use it: Any build requiring custom checkout, custom product pages, or complex inventory/subscription logic. Not every project needs it—sometimes Liquid + apps is enough.

Cost: Free (open-source), but requires Remix hosting ($20-50/month for basic, $200+/month for high-traffic).

Hosting: Vercel (for Hydrogen) + Shopify Hosting (for Liquid themes)

Hydrogen projects run on Vercel (Shopify-native hosting). Liquid themes run on Shopify's built-in hosting.

Why Vercel: Automatic deployments from Git, edge function support, built-in analytics.

Cost: Free tier (sufficient for small stores), $20+/month for production.

CSS Framework: Tailwind CSS

All our styling uses Tailwind CSS (utility-first CSS framework).

Why Tailwind: Faster development, enforces consistency, smaller CSS bundles than custom CSS, excellent tooling.

Alternative: Bootstrap (older, heavier), CSS Modules, Styled-Components.

Setup: Installed as npm package, integrated into Remix/Hydrogen builds.

Testing: Playwright (E2E) + Vitest (Unit)

End-to-end tests: Playwright (automated browser testing)
Unit tests: Vitest (JavaScript unit test runner)

Why these: Playwright is fast, works with any framework, great for checkout flow testing. Vitest is lightweight and Vite-native.

What we test: Checkout flows, product page logic, inventory sync, payment processing.

Coverage: We aim for 80%+ coverage on critical paths (checkout, payment), 50%+ on UI components.

Design & UX Tools

Design System: Figma

All design work happens in Figma. Design specs, component libraries, prototypes—all in Figma.

Why Figma: Cloud-based (no desktop bloat), real-time collaboration, components link to code, native prototyping.

Cost: $12/month per editor (we have 3 designers, so $36/month).

Brand & Messaging: Internal playbook

We maintain a brand playbook for each client (Figma-based). It includes:

• Logo usage guidelines
• Color palette (primary, secondary, neutral)
• Typography (font families, sizes, weights)
• Voice & tone guidelines
• Template patterns (for emails, ads, social)

This playbook lives in Figma and is shared with the client. Updates are version-controlled.

Wireframing: Figma (same tool)

No separate wireframing tool. Figma does wireframes, designs, prototypes, and handoff all in one place.

Alternative: Whimsical (lighter, faster), Balsamiq (older). Figma works.

Development Efficiency Tools

Code Editor: VS Code

Standard editor for the team. Extensions we use:

• Shopify Theme (syntax highlighting, Liquid snippets)
• Prettier (code formatting)
• ESLint (JavaScript linting)
• Tailwind Intellisense (CSS autocomplete)

Cost: Free.

Task Management: Linear

Linear is our project management tool. Every client project is a Linear workspace. Issues are organized by sprint.

Why Linear: Fast, minimal UI, great for software teams, integrates with GitHub (link PRs to issues).

Alternative: Jira (overkill for most projects), Asana (good but slower), Notion (too flexible).

Cost: $10/user/month. We have 12 developers, so $120/month.

Communication: Slack

Slack channels for each client project, one #general, one #company-wide.

Integrations: Linear (deploy notifications), GitHub (PR reviews), Sentry (error tracking).

Cost: $8/user/month (we have 25 people, so $200/month).

Documentation: Markdown + GitHub

Every project has a README.md with setup instructions. More complex projects have /docs folder with deeper guides.

We don't use Notion for internal docs (unnecessary complexity). Markdown in GitHub is sufficient.

Why Markdown: Lightweight, version-controlled, searchable, renders in GitHub natively.

Shopify-Specific Tools

Shopify CLI

Command-line tool for local development. Lets us preview theme changes locally before pushing to Shopify.

Setup: shopify theme dev syncs local files to dev store in real-time.

Cost: Free.

Liquid Linter: Shopify Theme Check

Lints Liquid code for syntax errors and best practices.

Installed in: VS Code extension + CI/CD pipeline. Blocks merge if lint errors found.

Cost: Free, open-source.

Admin API Client: Shopify Python Client

For scripts that manage Shopify data (bulk product uploads, inventory sync, etc.), we use Shopify's Python client library.

Examples:

• Bulk product import from CSV
• Variant image sync
• Inventory management across multiple locations
• Order export for analytics

Cost: Free, open-source.

API Testing: Postman

Postman collections for every Shopify API endpoint we use. Team can reference and test API calls before integrating into code.

Cost: Free tier (sufficient for small teams).

Analytics & SEO Tools

Analytics: Shopify Analytics + Google Analytics 4

Shopify Analytics (built-in): Daily revenue, conversion rate, top products, customer insights.

Google Analytics 4: Custom events, user journeys, content performance, traffic sources.

We link GA4 to Shopify for unified reporting.

Cost: Free (both).

SEO: Semrush

Semrush for:

• Keyword research
• Competitor analysis
• On-page SEO audits
• Backlink audits

We run SEO audits before launch and quarterly reviews post-launch.

Cost: $199/month for Business plan.

Content Optimization: Jasper

Jasper (AI writing assistant) for:

• Product description drafting (we refine, not auto-publish)
• Blog post outlines
• Meta descriptions

Setup: Integrates with browser, can be used in any text editor.

Cost: $49/month.

Heatmap & Session Recording: Hotjar

Hotjar to understand user behavior:

• Heatmaps (where do users click?)
• Session recordings (why do users abandon?)
• Surveys (what do users think about feature X?)

We review heatmaps post-launch to identify UX friction.

Cost: $99/month for Heatmap + Session Recording.

Performance Monitoring: Sentry

Sentry for error tracking in production. Any JavaScript error is automatically reported to Slack.

Setup: SDK installed in Hydrogen/Remix projects. Error dashboard shows stack trace, frequency, and affected users.

Cost: $99/month for 25 events/minute.

Operations & Finance Tools

Project Management: Linear (listed above)

Time Tracking: Harvest

Harvest for logging project hours. Team logs time to Linear issues (integration).

Why we use it: Accurate billing for client projects, project profitability analysis.

Cost: $12/user/month. We have 25 people, so $300/month.

Invoicing & Finance: Quickbooks Online

QuickBooks for invoicing, expense tracking, and financial reporting.

Why: Integrates with Harvest (auto-populate invoices from time logs), integrates with banking, tax-ready reports.

Cost: $30/month (Plus plan).

Email: Gmail + Superhuman

Gmail for email hosting. Superhuman for lightning-fast email client (team uses).

Cost: Gmail free, Superhuman $30/month per user ($750/month for 25 people).

Document Management: Google Drive

Google Drive for shared documents, contracts, SOWs, internal memos.

Alternative: Notion (more searchable), Confluence (more structured). Google Drive is fine for simple doc sharing.

Cost: $2/user/month for 100GB storage (built into Google Workspace).

The Annual Cost of Tenten's Tech Stack

Category	Tool	Cost
Design	Figma	$36/month
Code Management	GitHub	$21/month (Teams plan)
Project Mgmt	Linear	$120/month
Communication	Slack	$200/month
Time Tracking	Harvest	$300/month
Finance	Quickbooks + Superhuman	$780/month
Analytics & SEO	Semrush + Sentry + Hotjar	$497/month
AI Writing	Jasper	$49/month
Hosting	Vercel (average 10 projects)	$200/month
TOTAL		$2,203/month

Per developer (12): $184/month per person in tool costs.

What We Don't Use

Notion: Too flexible, slows down decision-making. Linear + Slack + Google Drive cover what we need.

Custom CMS: We use Shopify's native CMS (Pages) for most content. No custom Strapi, Contentful setup unless the client demands it.

Expensive AB Testing Tools: Shopify built-in A/B testing is sufficient for most stores. We use Optibase or Unbounce only for specific high-traffic tests.

Design-to-Code Tools: Figma-to-code auto-generation (Anima, Framer) sounds great but produces worse code than hand-written. We use Figma for specs, then developers build it manually. Faster overall.

Database Tools: For Hydrogen projects, we use Shopify's built-in database (inventory, products). No Postgres, MongoDB, Supabase unless the project specifically requires relational data (rare).

Why This Stack Works for Shipping Shopify

This stack is optimized for: Speed to market, maintainability, team collaboration.

It's NOT optimized for: Cutting-edge tech, maximum flexibility, or tiny file sizes.

Every tool chosen because it:

1. Solves a clear problem
2. Integrates well with other tools
3. Has a high skill ceiling (we're not outgrowing it anytime soon)
4. Reduces context-switching (fewer tools = more focus)

Key Principles for Your Own Tech Stack

If you're building a Shopify agency or in-house team, here are principles we follow:

1. Standardize, don't customize

Standard tools (Figma, GitHub, Linear, Slack) vs. custom systems. Standard tools have communities, documentation, and integrations.

2. Optimize for team collaboration, not individual heroics

Every tool supports async work and multiple people editing simultaneously. No single points of failure.

3. Integrate ruthlessly

GitHub to Linear, Linear to Slack, Harvest to QuickBooks, GA4 to Shopify. Fewer manual handoffs = fewer mistakes.

4. Version control everything

Code in Git, designs in Figma (with version history), documentation in Markdown. Future team members can see decisions.

5. Measure tool ROI annually

Every tool gets a cost-benefit review. If it's not pulling its weight, we drop it.

---

Ready to build or scale your Shopify operation?

If you're evaluating tools for your own Shopify builds or team, let's talk. Tenten has 8 years of experience with what works and what's overhead. Schedule a consultation to discuss your technical setup.

---

Editorial Note
This stack is boring on purpose. Boring tools are reliable tools. We prefer shipping on time with standard tech over building in cutting-edge tools that require expertise we don't have.

Frequently Asked Questions