Skip to main content
More in Learn

Web Development with Crystallize

It is simple to become confused while selecting a tech solution, tool, architecture, or web development method for your online business because there are so many options today.

Our Livestreams are made to demonstrate key features of Crystallize as well as integration with a number of different technologies.

You’ll receive wisdom directly from the engineers and devs who make Crystallize possible.

Crystallize Basics

Content Modeling for eCommerce (Part 1)

This stream focuses on the topic of content modeling for eCommerce. Different content modeling approaches are discussed, with a real-world example of modeling for an online bookstore. The content modeling is done using Crystallize.

Content Modeling for eCommerce (Part 2)

This stream focuses on the topic of content modeling for eCommerce. Different content modeling approaches are discussed, with a real-world example of modeling for an online bookstore. The content modeling is done using Crystallize.

Content Modeling for eCommerce (Part 3)

This stream is the last in a series of 3 on the topic of content modeling for eCommerce. Product bundles are the headline for this stream. Bundles of products and product variants are covered in detail. Also, how you can create product variant-specific bundles. The content modeling is done using Crystallize.

Export Your Product Catalogue to PDF with Crystallize

In this Livestream video, Stavros, Partner Manager, and Bård, CEO of Crystallize, are generating a product catalog via the Crystallize GraphQL API in PDF format. They are doing it live with an example and go through the code, which you can find here.

Building Navigation with Topic Maps in Crystallize

Learn how you can build rich navigation using Crystallize Topic Maps, and combine products from different categories.

Headless Architecture with GraphQL Service API

Stavros (Partner Manager) and Håkon (Head of Engineering) talk about modern headless architecture and Crystallize Service API that has the purpose to tie all the different services you’d be using together and present it to any given frontend.

Bootstrap Your Tenant with Crystallize CLI

The following Livestream video will help you learn how you can bootstrap your Crystallize tenant with shapes and data.


Tutorials

How to Build an eCommerce Store With Astro

This livestream covers how you can use Astro in combination with Tailwind and Crystallize to build an eCommerce store. We'll focus on the open-source Astro accelerator for Crystallize and see how you can use this as a starting point to fetch products, render them in Astro, and place an order.

Checkout Flow 101 using Crystallize APIs

In this livestream, we dive into the Crystallize APIs to perform a round trip of the complete eCommerce checkout process. You learn how to fetch a product, add products to a cart, create an order intent, and finally push the order to Crystallize.

This is a followup to the livestream focusing on the Shop API.

End-to-End Testing in eCommerce

End-to-end testing enables you to automate quality control of crucial customer journeys in your webshop. In this livestream, we cover end-to-end testing best practices for eCommerce. We dive into testing crucial journeys like the cart and checkout process, show examples of how you can set up these tests, and explore the code to see the details of how it's done.

Testing & Fixing Web Performance and Page Speed for eCommerce

Milliseconds matter. In this livestream, we cover why you should do performance testing, tools you can use for performance testing, how to understand the test results, and how to fix them. We also cover the new Core Web vital metric interaction to next paint (INP) that will be introduced in March 2024 and replace FID. Now is the time to measure and improve to be ready for Google's next update. As we say in Crystallize: let's go Milliseconds hunting.

Building a Custom eCommerce Store From Scratch (Part 1)

In this series, we’re building out a custom eCommerce storefront from scratch using Crystallize as a headless eCommerce service, GraphQL as the query language, and Remix for the frontend framework.

Building a Custom eCommerce Store From Scratch (Part 2)

Responsive images are essential for a great user experience and vital for site speed. In this video, you’ll learn how to use the HTML elements picture, figure, and img with the properties srcset and sizes to ensure the browser loads the right image size for a given screen, using plain HTML and a React library to simplify the developer experience.

Building a Custom eCommerce Store From Scratch (Part 3)

In this series, we’re building out a custom eCommerce storefront from scratch using Crystallize as a headless eCommerce service, GraphQL as the query language, and Remix for the frontend framework. Part 3 focuses on CSS styling.

Building a Custom eCommerce Store From Scratch (Part 4)

In this series, we’re building out a custom eCommerce storefront from scratch using Crystallize as a headless eCommerce service, GraphQL as the query language, and Remix for the frontend framework. Part 4 continues with a focus on frontend styling with CSS.

Building a Custom eCommerce Store From Scratch (Part 5)

In this series, we’re building out a custom eCommerce storefront from scratch using Crystallize as a headless eCommerce service, GraphQL as the query language, and Remix for the frontend framework. Part 5 focuses on tidying up our components to handle pricing and variant selection.

Building a Custom eCommerce Store From Scratch (Part 6)

In this series, we’re building out a custom eCommerce storefront from scratch using Crystallize as a headless eCommerce service, GraphQL as the query language, and Remix for the frontend framework. Part 6 focuses on creating the cart, a vital step in our journey towards a full checkout process.

Product Updates

(Work)Flows with Crystallize

In this livestream, we dive into the Flows concept in Crystallize. Flows allow you to define any number of custom workflow pipelines to orchestrate your content creation, campaigns, translation workflows, product updates, and more.

Composable Content Modeling with Pieces in Crystallize

In this livestream, we cover the new pieces concept in Crystallize. This is the bit that unlocks true composable content modeling in Crystallize, allowing you to create reusable, pre-defined pieces of content structures, and even enabling polymorphism for your shapes.

Introducing the Crystallize Shop API

In this livestream, we introduce the Crystallize Shop API, completely running on the edge. You learn how you can use the Shop API to manage carts, pricing, tax, etc. both automatically and in the good old un-opinionated calculations. State management of carts and how you can place orders in Crystallize.

Component-Level Permissions & Best Practices Using Roles in Crystallize

This livestream is a product update including the component-level permissions, how it works and what some best practices are. The updates on component-level permissions allow you to create fine-grained permissions with selected components and free-form reordering. Editorial users can get a personalized editorial experience just focusing on the content that is relevant for them.

Visual Shopping with Image Hotspots in Crystallize

This product update is focusing on how you can showcase products and marketing content in images. Adding semantic references with hotspots to the featured products allows for a new way of visual shopping. Now natively part of the assets in Crystallize.

Introduction to Archiving in Crystallize

Join us for a session where we walk through the new capabilities in Crystallize for archiving and versioning. Frontend lead Vasil will walk us through these new capabilities.

Roles & Permissions

Join us in this livestream to learn how the new gamified Roles & Permissions in Crystallize works. Live demos and behind the scenes information on the approach and design principles.

Organizing Assets for Reusability with Lightboxes

In this stream, we’re going to talk about how we can take advantage of the lightbox drawer (a feature of Magic Paste) to better reuse assets when creating products.

Digital Asset Management in Crystallize

We’ve released our new Asset Organizer feature that allows you to easily organize and search through all of your media within Crystallize. In this stream, we have an overview of the new tool, plus some neat shortcuts for adding media to your items within Crystallize!

Shop Examples

Building the Backend for Your Back-to-school Store with Crystallize

Setting up your backend is key when designing any ecommerce experience. It allows you to market and sell your products the way you want, after defining a content base. In this Livestream, we dive into an example of setting up a back-to-school eCommerce store.

Gift Cards and Vouchers with Crystallize

Learn how to create, handle and redeem gift cards and vouchers with Crystallize. We will go through different scenarios of how this can be enhanced to handle your specific business logic.

How to Set Up Vouchers in Service API?

In this session, we will go through the process of defining a set of Vouchers in Crystallize, and use them during checkout on the NextJS boilerplate.

Content Modeling for Online Food Store

Learn how you can design and implement a content model for an online food store. We will show you how you can use the open-source Figma design system for content modeling and implement the model in Crystallize. You also learn how you can create the content and how to access it via the GraphQL headless eCommerce API.

Design, Build and Launch React Norway Conference Site

React Day Norway 2021 happened online this year. Prior to the launch, we did a Livestream where we build the new conference website LIVE to kick off the call for papers.

Google Recommendations AI for a Personalized eCommerce Shopping Experience

In this Livestream video, we’ve shown you how you can use the Google Recommendations AI service to create a personalized shopping experience on your webshop. A fully working implementation using React, Next.js, and Crystallize is used and shared in this session.

Building a Premium Video Streaming & Content Website With Paywall Using React + Next.js

This Livestream video covers how you can launch a site with members-only premium content. We discuss strategies for premium or member-only exclusive content and show how you can create this in Crystallize with video streaming powered by AWS Elemental. The frontend is using React / Next.js and is hosted on Vercel. Using Vercel Edge redirects to keep the site as fast for members and visitors.

People showing thumbs up

Need further assistance?

Ask the Crystallize team or other enthusiasts in our slack community.

Join our slack community