HubSpot × Shopify

AI coding with Claude Code or Cursor → Push to GitHub → Auto-deploy with Vercel. From preview environment checks to PR merging, a low-cost setup for the 'build → verify → publish' cycle.

For simple HTML-based pages or single-page landing pages, Cursor is convenient—GUI-based operations make file creation and editing visually intuitive. For projects spanning multiple files or adding API-powered features, I work with Claude Code running in the terminal, where it can oversee the entire project.

Link GitHub and Vercel, and your site automatically deploys whenever you push to GitHub. Setup is simple—just select your GitHub repository from the Vercel project and sync. Once configured, synchronization happens automatically without you thinking about it.

Vercel is more than just a hosting service. It offers Storage features including databases (KV, Postgres), scheduled execution (QStash), and email sending (Resend). Claude Code can handle coding that leverages these services when instructed. Speed Insight, available for about $10/month, quantifies site performance and usability issues.

For small scale, both GitHub and Vercel can barely manage within free tiers. Claude Code starts at about $20/month for modest use, enabling low-cost 'build → publish' workflows. Even at larger scale, Claude Code $100, Cursor $20, Vercel Pro $20 plus some usage fees lets you manage multiple sites and pages.

Leverage Shopify's product management and checkout while fully customizing the frontend. Next.js enables fast static generation, flexible design, and complex business logic implementation. Break free from theme constraints and build a site that expresses your brand.

Incremental Static Regeneration (ISR) combines static site speed with dynamic content freshness. Product pages are served instantly from cache, dramatically improving Core Web Vitals. Inventory and price updates are automatically reflected via Webhooks.

Add to cart, update quantity, and remove items without page reloads. This stress-free shopping experience prevents cart abandonment and improves conversion rates. Implementation combines Storefront API mutations with React state management.

Automatically display discount prices when B2B customers log in. Combine Shopify customer tags and coupon features for flexible pricing without code changes. Invoice payment via draft orders streamlines B2B transaction workflows.

Optimize image delivery costs in headless EC with Cloudinary. Automatic format conversion, resizing, and CDN delivery improve load times while significantly reducing server load and costs. Shopify product image sync can also be automated.

Implement custom APIs for requirements beyond HubSpot's standard connectors. Conditional customer sync, custom field mapping, bidirectional Shopify integration—design and implement flexible CRM integrations tailored to your business needs.

Build websites with HubSpot CMS Hub and integrate with Marketing Hub for unified lead capture to nurturing. Enable smart content personalization, form/CTA/LP creation, and detailed analytics all in one platform.

Automate repetitive tasks with HubSpot workflows. Lead assignment, follow-up emails, task creation, property updates—reduce manual work and boost sales and marketing productivity. Extend with APIs when standard features aren't enough.

Auto-sync spreadsheet data to HubDB with Google Apps Script. Staff simply edit the spreadsheet, and store listings or rankings on your HubSpot site update automatically. A system anyone can operate without technical knowledge.

Automatically send coupons on customer birthdays. HubSpot workflow re-enrollment executes automatically every year, with configurable follow-ups based on open status. Add SMS integration to further boost open rates.

Design strategy for unified online and offline customer data management. Use Shopify as master data with bidirectional POS sync. Architecture that delivers seamless customer experience while considering privacy and security.

Design customer data sync between Shopify and POS (Smaregi, etc.). Build reliable, easy-to-operate sync architecture with auto-sync on registration, duplicate prevention, and sync on/off control.

Convert in-store points to online coupons. Design and implement a safe, user-friendly conversion system with point consumption/coupon issuance sync, fraud prevention, and point refunds on cancellation.

Display POS point balances in real-time on EC site account pages. Achieve secure, high-speed point lookups through Shopify customer ID to POS member number mapping and API authentication/security design.

Unify customers registered separately on EC and in-store. A customer deduplication system with email/phone as matching keys, address normalization, and sync error recovery—features essential for real-world operations.

Use familiar spreadsheets as your input interface. Auto-generate invoices from entered data without learning new tools. A practical solution integrating Google Apps Script with freee API.

Secure API token management, defense-in-depth access control, and audit logging—security design that small businesses can adopt without strain. Build systems you can operate confidently without dedicated security staff.

Build retry-resilient systems with duplicate invoice prevention, auto-retry on network errors, and idempotency guarantees. Operator-friendly design where staff can use the system without fear of mistakes.

Design for processing large data volumes like month-end batch invoicing. Implement pagination, parallel execution control, and progress display to process hundreds of records smoothly without timeouts.

Dry-run mode for testing without touching production data, pre-validation of input data, and detailed error reports. A test-first design approach where even first-time operators can use the system with confidence.

Automatically integrate Shopify orders with order management systems (NextEngine, etc.) and automate everything from shipping to fulfillment notifications. Prevent manual transcription errors and dramatically reduce order processing workload. Multi-store unified management supported.

Detect orders in real-time with Shopify Webhooks, convert to order management system format, and auto-integrate. Implement duplicate prevention, error retries, and status management essential for stable operation.

When shipping completes in the order management system, automatically sync tracking number and carrier to Shopify. Shipping notification emails are sent automatically to customers, reducing customer support inquiry workload.

Auto-export order data to Google Sheets for aggregation and analysis. Inventory sync is also possible, enabling seamless integration even for operations managing inventory in spreadsheets.

OAuth token auto-refresh, lock mechanisms preventing concurrent execution, and idempotency guarantees for 24/7 stable operation. Auto-recover from failures while minimizing operator burden.

To eliminate dependency on specific staff in customer support, we integrated internal wiki with AI chat. By having AI learn from thousands of support records, we built a RAG system that generates evidence-based responses. This created an information foundation usable from day one, even for new employees.

Why we chose RAG (Retrieval-Augmented Generation). The difference from simple ChatGPT usage, the importance of being able to cite sources, and an explanation of how RAG works that even non-engineers can understand.

Integrating multiple data sources—manuals, support history, estimate data—into a single database. We introduce the mechanism that enables cross-searching all data in one query and the concept of vector search.

Chat widget available on every page, friendly design, clear disclaimers, and transparency through audit logs. We explain the UI/UX design and operational points aimed at creating an AI chat that people actually use.

Processing thousands of records every time takes both time and money. We introduce the differential sync mechanism that uses content hashing to detect changes and reprocesses only what has changed.