Skip to content

Omnivoltaic Shopify Storefront Navigation Guide

Working with Remix.run React Framework

  • Why Remix.run for Storefronts
  • Folder Structure and Organization
  • Components and Reusability

Omnivoltaic Shopify Storefront Navigation Guide

Website Architecture

  • SITE URLS FOR SHOPIFY
  • Remix.run React Framework
  • Vercel Hosting
  • Why Remix.run for Storefronts

Hosting on Vercel

  • Advantages of Vercel Hosting
  • Deployment Process
  • Continuous Integration/Continuous Deployment (CI/CD) Setup

Maintenance and Troubleshooting

  • Regular Updates and Maintenance
  • Troubleshooting Common Issues
  • Version Control for Codebase

PREREQUISITE

  • Node.js version 16.14.0 or higher installed on your machine.
  • Our Shopify store's domain and Storefront API token, which should be updated in the .env file.

Introduction

Welcome to the Omnivoltaic online shopping experience! This guide is designed to help you effortlessly navigate through our Shopify storefronts, ensuring you find the perfect solutions for your energy needs. We have four distinct storefronts: Offgrid, X-Grid, Productive Use of Energy (PUE), and E-Mobility.

SITE URLS FOR SHOPIFY

Site - Omnivoltaic Company - https://www.omnivoltaic.com/

Site - Test - https://01hksbzq7kspa89jqfqjjzepc8-c7457334068640b992de.myshopify.dev

Site - Omnivoltaic Philippines Company-https://philipines.vercel.app/

Site - Sparrow by E4T- https://sparrow-e4t.vercel.app/

Site - Omnivoltaic Off-Grid - https://off-grid.omnivoltaic.com/

Site - Omnivoltaic ESS - https://ess.omnivoltaic.com/

Site - Mini-Grid - https://mini-grid.omnivoltaic.com/

Site - Portable Power - https://portable.omnivoltaic.com/

Site - AmpTorrent - https://www.amptorrent.com/

SIte - Omnivoltaic Productive - https://productive.omnivoltaic.com/

Site - Omnivoltaic Cross-Grid - https://cross-grid.omnivoltaic.com/

Site - Omnivoltaic Mobility - https://mobility.omnivoltaic.com/

Landing Page Overview

Upon arriving at our landing page, you'll find four main sections, each leading to our specialized storefronts. This central hub is designed to provide a seamless transition to the area of your interest.

How to Access Storefronts from the Landing Page

  • Offgrid: Click on the Offgrid section for products and articles related to our company's core offerings.
  • X-Grid: Select X-Grid for solar power supplements, uninterruptible power backup solutions, and more.
  • Productive Use of Energy (PUE): Choose PUE for solutions tailored to small businesses, schools, and agricultural processing.
  • E-Mobility: Opt for E-Mobility for all things related to electric bikes, tricycles, boats, and their accessories.

Detailed Guide for Each Storefront

Offgrid Storefront

  • Products and Articles: Discover a range of energy solutions tailored for off-grid living. Browse through insightful articles that guide your product selection.
  • Navigation Tips: Use the categorized menus to filter products based on your specific needs.

X-Grid Storefront

  • Product Range: Find solar power enhancements, backup solutions, and techniques for load balancing. Ideal for supplementing your existing grid connection. Eg All-in-One Inverters - X-Grid™ Series, Integrated Home Energy Systems - Oasis™ Series and Modular Home Energy Systems - Town™ Series
  • Finding Information: Access detailed articles to understand the best practices and benefits of each product.

Productive Use of Energy (PUE)

  • Applications: Explore solar solutions for diverse applications like water pumping, cold chains, Agricultural procecssing and transportation.Eg Solar Powered Productivity Systems - Camp™ Tool Packs.
  • Product Selection: Use our guides to match your business or educational needs with the right solar products.

E-Mobility

  • Range of Solutions: From e-bikes, Tricycles to electric boats, find a variety of electric mobility options. Learn about building your own bike, maintenance tips, and more. Eg Electric Two-Wheelers - ovEgo™ Motorbike Series, Electric Three-Wheelers -ovEgo™ Tricycle and Electric Boats - ovEgo™ Electric Outboard Series
  • Assembly and Maintenance Guides: Detailed instructions for assembling bike packs and maintaining your electric vehicles.

1. Overview

Our Shopify Hydrogen storefront leverages the following technologies and tools:

  • Remix: A full-stack web framework for building modern web applications.
  • Hydrogen: Shopify's stack for headless commerce, designed to work seamlessly with Remix.
  • Oxygen: A theme development toolkit for Shopify, providing reusable components and styles.
  • Shopify CLI: A command-line tool for managing Shopify apps and themes.
  • ESLint: A JavaScript linter for identifying and fixing code errors.
  • Prettier: A code formatter for consistent code styling.
  • GraphQL Generator: Used for generating GraphQL queries and types.
  • TypeScript and JavaScript: Supported languages for development.
  • Tailwind CSS: A utility-first CSS framework for styling.

2 . Remix Framework

Overview:

Remix is a modern React framework designed to enhance developer productivity and improve the performance of web applications. It provides a robust structure for building web pages and applications, offering features such as server rendering, data fetching, and a plugin system.

Key Concepts:

  • Routes: Remix organizes pages into routes, allowing for clear navigation and separation of concerns.
  • Data Loading: It offers a sophisticated data loading system, enabling efficient retrieval of data before rendering a page.
  • Client-Side Navigation: Remix provides a smooth client-side navigation experience, enhancing the responsiveness of our storefronts.

3. Hydrogen and Oxygen in Remix.run:

Overview: Hydrogen and Oxygen are terms associated with the architecture of Remix.run.

  • Hydrogen:

Hydrogen: Shopify's headless commerce stack that seamlessly integrates with Remix, allowing for a flexible and customizable frontend.

Represents the initial HTML and data that is sent to the browser, providing a quick and efficient first render.

  • Oxygen: Refers to the subsequent JavaScript and interactivity that is loaded, enhancing the user experience after the initial render.

Key Benefits:

  • Faster Initial Load: Hydrogen ensures a fast initial load by sending critical content to the browser quickly.
  • Enhanced User Experience: Oxygen adds interactivity to the page, providing a seamless and engaging user experience.

4. GraphQL in Shopify Integration:

Overview: GraphQL is a query language for APIs that allows clients to request only the data they need. In the context of Shopify integration, GraphQL is used to retrieve product information from Shopify's backend.

Key Concepts:

  • Declarative Data Fetching: GraphQL allows you to declare the data you need, reducing over-fetching or under-fetching of information.
  • Nested Queries: You can nest queries to fetch related data in a single request, minimizing the number of API calls.
  • Strong Typing: GraphQL schemas provide a strong typing system, making it clear what data can be queried.

Requirements:

  • Node.js version 16.14.0 or higher
npm create @shopify/hydrogen@latest -- --template demo-store

Remember to update .env with your shop's domain and Storefront API token!

Getting Started

To get started with our Hydrogen storefront, follow these steps:

npm create @shopify/hydrogen@latest -- --template demo-store

This command sets up a Hydrogen project based on the "demo-store" template.

Local development

To run the storefront locally during development:

npm run dev

This command starts a development server and provides access to the local version of the storefront.

Folder Structure

Our project has the following folder structure:

  • src/: Contains the source code for the Hydrogen storefront.
  • public/: Contains public assets like images and styles.
  • config/: Configuration files for the project.

Building for Production

To build the Hydrogen storefront for production:

npm run build

This command generates optimized production-ready assets.

Technologies Used

Here's a brief explanation of the technologies used in our Hydrogen storefronts.

  • Shopify CLI: Simplifies Shopify app and theme development by automating common tasks and providing development environments.
  • ESLint and Prettier: Ensures code quality and consistent code formatting.
  • GraphQL Generator: Helps in generating GraphQL queries and types for efficient data fetching.
  • TypeScript and JavaScript: Supported languages for building the storefront, allowing for type safety and flexibility.
  • Tailwind CSS: A utility-first CSS framework that simplifies styling and ensures consistency.

Additional Resources

On the footer section you will get more short-cut to access sites and get any help.

  • FAQs: Quick answers to questions regarding our services .
  • Customer Support: Contact information for personalized assistance.
  • About Us: More detailed information regarding our company, products and services we offer.
  • Contact: Will guide you on where you will find our products and sevices details

Conclusion

We hope this guide enhances your shopping experience on our Shopify site. Dive into our world of sustainable energy solutions with ease and confidence!