実績・プロジェクト/CremaCraft
Custom Shopify Horizon theme rebrand for a specialty coffee & espresso gear storefront, with a bespoke flagship-product landing section and AJAX cart flow.
CremaCraft is a Shopify storefront built on a heavily customized fork of Shopify's Horizon theme, rebranded end-to-end for a specialty coffee and espresso-accessories brand. The storefront runs a CJdropshipping-fulfilled catalog with PayPal added alongside Shopify Payments at checkout, and ships a bespoke earthy/brown visual identity (custom color palette, logo SVG set, typography) layered over the base theme via a dedicated stylesheet. Beyond standard theme sections (collections, blog, cart, search), the project adds bespoke merchandising sections — a Flagship Product hero with an interactive image gallery and instant AJAX add-to-cart, brand pillars, a collection banner, and a featured catalog grid.
Key architectural decisions, concrete code implementations, and performance wins behind this project.
Merchandisers needed a dedicated hero section to spotlight a single flagship product across the storefront without manually re-linking it in the theme editor every time inventory or campaigns changed.
Built a Liquid resolution chain that first scans all products for a 'flagship' or 'hero' tag, falls back to a merchant-selected product block setting, and finally falls back to the first product in the catalog — guaranteeing the section never renders empty.
The default theme add-to-cart flow triggers a full page reload, breaking the interactive gallery/quantity-selector experience on the flagship hero and adding latency before checkout.
Intercepted the flagship form's submit event, posted FormData to Shopify's /cart/add.js endpoint via fetch, gave the button optimistic loading/success states, and redirected straight to /checkout on success (falling back to /cart on failure).
// community_discussion
Have thoughts, questions, or ideas regarding this system's architecture? Leave a comment below with your GitHub account.