Shopify Case Study
Next JS Hydrogen Headless Shopify
Design and File System Patterns for Headless E Commerce
Next E Commerce and comparison to Shopify’s Hydrogen File System/Component builds. Comparison study.
Even if you don’t use Shopify for e commerce, you can use the APIs and user tracking for segmentation and targeting. Transactional Flows can be used for deposits, customization, and fulfillment. Events like deposits have been made and links to delivery APIs can be connected without a lot of infrastructure creation. (ie some customers purchase tiered level of service, some customers purchase custom orders) Shopify Customers and Orders can be tagged and trigger events that tailor to individual user or entitled checkout experience.
Headless Shopify allows for transactions to occur securely within walled deployment and application builds.
CSS / Collaboration
Visually collaborate, minify and reset before build
You can include in static build and or component based (Next) (Vue/Svelte) compile.
Publish to static 11ty file system by default.
Use with Tailwind or Vanilla Design System. You don’t need to just use 1 library.
Simplify based on need.
Webflow Content and 360 Product Curation
Similar output and flexibility to Tailwind. Webflow CSS has the additional advantage of Visual Preview.
VUE/Svelte can be nested into head/page/div/section configuration of static Webflow build tools. Use Webflow static file system instead of Nuxt, Sapper, Sveltekit, with the same output, and dynamic Accessibility/SEO Modeling opportunity.
1 click template/page/UTM routing converter can export to Markdown/11ty CMS with CI CD vanilla CMS build to 11ty.
Infinite Scaling and Deployment can accommodate Automation, GEO/Globalization, Personalization Dashboard Management.
Export static HTML/CSS/JS to any component building template system: 11ty, Next, Nuxt, Sveltekit. Use with Tailwind. Animation and Full Screen iframe/form code are supported in the CSS/JS.
Vanilla CSS stack with prefix / BEM naming opportunity
Add vanilla responsive Usability and ADA Compliance code to Figma conversions. Export to any template system
Generate validation and form methods and test to APIs and webhooks. Use export like Angular, or POST to form endpoint.
Utility Based System Design
UI Kit and Tailwind
Both systems have modifiers and small components with code libraries that can be copied and pasted, with great documentation.
Systems plus, with Modifiers
Rethinking Bootstrap, Foundation, Material Design
Most of us and many themes, templates rely on old school kickback Bootstrap, it is time to revisit how these systems effect ability to effectively design.
With the advent of PWA to App Development the Design System is no longer embedded into the static asset serving stack.
Simplified modeling and Global / Scoped Design needs to be outlined.
Utility First
Traditional Example
<div class="chat-notification">
<div class="chat-notification-logo-wrapper">
<img class="chat-notification-logo" src="/img/logo.svg" alt="ChitChat Logo">
</div>
<div class="chat-notification-content">
<h4 class="chat-notification-title">ChitChat</h4>
<p class="chat-notification-message">You have a new message!</p>
</div>
</div>
<style>
.chat-notification {
display: flex;
max-width: 24rem;
margin: 0 auto;
padding: 1.5rem;
border-radius: 0.5rem;
background-color: #fff;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.chat-notification-logo-wrapper {
flex-shrink: 0;
}
.chat-notification-logo {
height: 3rem;
width: 3rem;
}
.chat-notification-content {
margin-left: 1.5rem;
padding-top: 0.25rem;
}
.chat-notification-title {
color: #1a202c;
font-size: 1.25rem;
line-height: 1.25;
}
.chat-notification-message {
color: #718096;
font-size: 1rem;
line-height: 1.5;
}
</style>
With Modifiers
Tailwind
Use Tailwind as the containers, and include an atomic design system in the master CSS. Use multiple systems, based on Content Collborators’ level of expertise.
<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4">
<div class="flex-shrink-0">
<img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
</div>
<div>
<div class="text-xl font-medium text-black">ChitChat</div>
<p class="text-gray-500">You have a new message!</p>
</div>
</div>
Tailwind Components UI
UI Kit
More than the basics
In addition to the basic UI Containers, you can manage Animation, Semantic Viewports, Data Loading. Vue Based components, that are protype friendly.
Functional Components (e.g. Notification) should omit the element parameter.
// Passing a selector and an options object.
var sticky = UIkit.sticky('.sticky', {
offset: 50,
top: 100
});
// Functional components should omit the 'element' argument.
var notifications = UIkit.notification('MyMessage', 'danger');//Vanilla JS
Selecting DOM elements using the # or . notation:
document.querySelector('.button')
Waiting for page DOM to load:
document.addEventListener("DOMContentLoaded", () => { ... })
Executing AJAX requests:
fetch('/api.json').then(response => response.text()).then(body => console.log(body))
Utilize API first file systems on top of “legacy” deployment. Create a file system and serve on in database, CMS, e commerce engine of choice.
Examples: Sanity, Directus generates add ons for data and can deploy anywhere.