StoreinoGetting Started
Theme Structure
A Storeinoo theme is composed of a layout and five key pages that collectively shape the customer's shopping experience:
Layout :The foundation that encompasses the Header and Footer componentHome Page :Situated at the root (/), it serves as the customer's initial interaction with th- merchant's store. This page should offer an array of opportunities for merchants to share their narrative, making a compelling first impression. It can also showcase products, collections, blogs, and brandShop Page :Dedicated to presenting products within the stor-Product Page :Delivers an intricate view of a single product, potentially featuring upsells and related itemCart Page :Displays the products added to the shopping carBlog Page :Showcases the merchant's blog contenCollections Page :Showcases subcollections belonging to a parent collection.
Please note that the checkout page is pre-developed and situated separately at /checkout, ensuring a seamless and streamlined checkout process for customers.
Themes Type
Storeino offers two approaches to working with themes:
Create a Theme:
If you're ready to build a theme from scratch, you might wonder how to set up your development environment quickly and start coding.
This tutorial provides a straightforward approach. Using the Storeino CLI, you'll be able to efficiently create your new theme, combining innovation with functionality.
Customize a Theme:
As a theme developer, your expertise lies in enhancing existing themes - from making subtle improvements to complete transformations.
This tutorial will guide you through the process. With the Storeino CLI, you can easily modify and update themes.
In the following installation section, we'll cover how to install your selected theme using the Storeino Theme CLI.
Development Environment
To create a Storeino theme, you'll be working with the NextJS framework. For styling, we recommend using Tailwind CSS, though you're free to use any CSS framework you prefer.
The basic project structure is created by the Storeino development team, and we'll cover the installation process shortly. Before starting, make sure you have these prerequisites in place:
Prerequisites:
Node.js: Version 16 or newer is recommended for best performance.
Text Editor: We suggest VS Code with the Vue Language Features (Volar) extension for an improved development experience.
Terminal: Any terminal will work, but the integrated terminal in VS Code is particularly convenient.
With these tools ready, you're all set to begin your Storeino theme development journey.
Core Features
When developing themes, the core features control the layout, functionality, and appearance of a merchant's online store. As a theme developer, your main task is to optimize these essential elements within your themes.
As mentioned earlier, the project's foundation is built on the NextJS framework. This choice gives you creative freedom throughout your development process.
Data Structure
The theme's data organization is managed through these key components:
Schema: Defines the specific fields available for selection within each theme component. This includes products, menus, brands, collections, and more.
Current: Contains the active values currently being used in the theme. These values determine how the theme appears and functions in real-time.
Settings: Acts as the connection point between data coming from the Customizer and the dynamic elements in the "Current" data section.
These three essential keys work together using JSON format to create a strong foundation for storing configuration data. Merchants can customize this data through the Customizer interface, making it easy to adapt the theme to their specific needs.
Global Helpers
To make theme data easier to use, we've integrated global helpers into the $root object. This makes these helpers accessible throughout your entire application.
These global helpers are mainly functions embedded within modules, objects, and events. This design gives you versatile tools to manage and execute various tasks efficiently. For a complete understanding of what these helpers can do, check out the Global Helpers chapter for detailed information.
Next Steps
As you start your STOREINO theme development journey, having a clear set of steps will help you feel confident and work efficiently. Knowing what to do at each stage makes the whole process much easier.
Here's the sequence for creating a STOREINO theme:
For more details on each of these important steps, check out the "Installation" section. There you'll find everything explained thoroughly to help you successfully develop your theme.
We're excited to see what you create! These resources are here to support you throughout your development process.