Products
Products
Video Hosting
Upload and manage your videos in a centralized video library.
Image Hosting
Upload and manage all your images in a centralized library.
Galleries
Choose from 100+templates to showcase your media in style.
Video Messaging
Record, and send personalized video messages.
CincoTube
Create your own community video hub your team, students or fans.
Pages
Create dedicated webpages to share your videos and images.
Live
Create dedicated webpages to share your videos and images.
For Developers
Video API
Build a unique video experience.
DeepUploader
Collect and store user content from anywhere with our file uploader.
Solutions
Solutions
Enterprise
Supercharge your business with secure, internal communication.
Townhall
Webinars
Team Collaboration
Learning & Development
Creative Professionals
Get creative with a built in-suite of editing and marketing tools.
eCommerce
Boost sales with interactive video and easy-embedding.
Townhall
Webinars
Team Collaboration
Learning & Development
eLearning & Training
Host and share course materials in a centralized portal.
Sales & Marketing
Attract, engage and convert with interactive tools and analytics.
"Cincopa helped my Enterprise organization collaborate better through video."
Book a Demo
Resources
Resources
Blog
Learn about the latest industry trends, tips & tricks.
Help Centre
Get access to help articles FAQs, and all things Cincopa.
Partners
Check out our valued list of partners.
Product Updates
Stay up-to-date with our latest greatest features.
Ebooks, Guides & More
Customer Stories
Hear how we've helped businesses succeed.
Boost Campaign Performance Through Video
Discover how to boost your next campaign by using video.
Download Now
Pricing
Watch a Demo
Demo
Login
Start Free Trial
Shopify Oxygen gives developers full control over storefront design using React while relying on Shopify's backend for commerce operations. It combines Hydrogen for development and Oxygen for global hosting. This stack is especially useful when standard Liquid themes limit performance, UX flexibility, or branding needs. With Hydrogen, developers use modern tools like React, Vite, and server-side rendering (SSR) to build storefronts from scratch. Shopify’s Storefront API connects the frontend to Shopify’s backend for handling products, carts, and checkout. Once built, Oxygen takes care of deployment and edge hosting. Starting with Hydrogen Development begins with Hydrogen, a framework that brings server-side rendering and commerce-ready components into a React environment. To create a new Hydrogen project: npm init @shopify/hydrogen Once the setup is complete, navigate into your project folder: npm run dev The development server starts with hot reload support. You’ll see changes instantly in the browser, which makes iteration fast and straightforward. Customizing Layout and Pages Hydrogen projects are structured around React and file-based routing. Each page corresponds to a file inside the routes/ directory. To display featured collections, you can write a GraphQL query and render the response inside a component: const QUERY = gql` query FeaturedCollections { collections(first: 3) { nodes { id title handle image { url } } } } ` Hydrogen gives you full control over the markup, layout, and interaction behavior. You’re not limited by theme templates or opinionated structure. This makes it easier to create storefronts that exactly match your UI goals. File-Based Routing Hydrogen uses file-based routing, so every .jsx file in the routes/ folder maps directly to a URL. For example, this file: routes/products/[handle].jsx automatically becomes a dynamic product page accessible at: /products/your-product-handle Here’s a simplified example of what might live inside that file to make routing predictable, reduce boilerplate, and help you organize pages as your storefront grows. You can also wrap routes with shared layouts, such as navigation bars or footers, using App.server.jsx . export default function ProductPage({params}) { const {handle} = params; const {data} = useShopQuery({ query: PRODUCT_QUERY, variables: {handle} }); return (
{data.product.title}
); } Integrating Video into Your Storefront Video helps bring products to life and makes your storefront more engaging. Hydrogen supports both hosted and embedded video with minimal setup. To embed a YouTube video:
You can pull video URLs dynamically from your CMS or Shopify metafields. For example, on a product page, you can load the video based on the product handle and stream it alongside other data. Hydrogen supports lazy loading, so you can defer loading media that isn’t immediately visible, improving page performance. Example : Adding a Self-Hosted Video that Plays Silently in the Background
Deploying to Oxygen After development, deploy the storefront to Oxygen, Shopify’s global hosting platform. It automatically handles server-side rendering at the edge. Step 1 : Connect the project to your Shopify store. shopify link Step 2 : Deploy Your Storefront shopify hydrogen deploy Once deployed, the app is hosted globally with automatic scaling and fast response times. Preview links are generated for branches and pull requests, which makes testing with teams easier. Environment Setup Hydrogen projects often need environment-specific values like API tokens, store domains, or feature flags. You can define these in a .env file: PUBLIC_STORE_DOMAIN=my-store.myshopify.com PRIVATE_STOREFRONT_API_TOKEN=abc123 These variables are available during development and deployment. Keep secrets like API tokens out of your codebase and configure production values through Shopify’s admin interface for each Oxygen deployment. Performance and Streaming Hydrogen uses React Server Components and supports streaming , which allows pages to render progressively. This means initial page elements load fast and content appears in sections as data becomes available. For example, the product title and price can render immediately, while related products or video content stream in seconds. This improves perceived performance and keeps the experience responsive. No manual setup is needed; Hydrogen and Oxygen handle this out of the box. Debugging and Logs If something goes wrong during deployment or rendering, Oxygen provides access to logs directly in the Shopify admin. You can view real-time logs, trace errors back to specific files, and test different branches using preview URLs. During local development, browser dev tools still work as expected for inspecting requests, debugging components, and monitoring performance.
Video Hosting
Image Hosting
Galleries
Video Messaging
CincoTube
Pages
Live
