Online Store App Building Guide. Read, Create & Earn.

1. Introduction

Welcome to the documentation for StoreOne Usage. This comprehensive guide will take you through the ins and outs of our powerful plugin and provide you with all the necessary information to utilize its features effectively. Whether you're a beginner or an experienced user, this guide will walk you through the installation process, configuration options, and advanced functionalities of the plugin.

2. Getting Started

2.1 App Setup

After signing up on storeone.app, you will gain access to a detailed configuration window where you can set up all the necessary configurations for your mobile application. The available configurations include:

2.2 App Configuration

Once you've set up the color theme and basic information, you will be prompted to create your app using either dummy data or by uploading your own WooCommerce data sheet.

2.3 App Creation

Upon selecting the "Create new app" option, you will be redirected to a screen where you will find detailed information about your app, including:

2.4 Previewing Your Application

To preview your newly created mobile application, you can scan the provided QR code using StoreOne's preview application available at storeone preview.Simply download StoreOne's preview application, scan the QR code, and explore the preview, which will reflect the layout of your app.

3. Theorem UI

3.1 Overview

Theorem UI is a powerful tool within StoreOne that allows you to customize the layout of your mobile application, giving you full control over its appearance and user experience. With Theorem UI, you can create visually stunning and engaging designs to attract and retain your app users.

3.2 Slider Section

The slider section in Theorem UI allows you to create dynamic slides that can be displayed in your mobile application. Slides are a great way to showcase featured products, promotions, or important announcements. To create a slider section, follow these steps:

3.2.1 Creating Slides

To create slides, navigate to the "Sliders" submenu under Theorem UI in your WordPress admin panel. In the Sliders interface, you can add new slides by providing the following details for each slide

Title: Give the slide a descriptive title to convey its purpose or message.

Image URL: Upload an image or provide the URL of an existing image to be displayed in the slide.

Type: Choose the type of slide. It can be either a product slide or a category slide.

Product (Dependent on Type): If the slide type is a product, select the specific product that you want the user to be redirected to when they interact with the slide.

Once you have added all the desired slides, click on the "Publish" button to make the slider section available for use in your mobile application layout.

3.3 Product Section

Theorem UI's product section allows you to showcase various products directly on the home page of your mobile application. You can use this section to feature new arrivals, best sellers, or any other product category you wish to highlight. Follow these steps to create a product section:

Navigate to the Theorem UI dashboard in your WordPress admin panel.

Click on the "Add New Section" button to start creating a new section.

Provide a title for the section, such as "Featured Items" or "Hot Deals."

Select the type of section as "Product."

Choose the categories of products you want to display in this section. You can select multiple categories to showcase a diverse range of products.

Define the layout of the section. Theorem UI offers different layout options, such as default, grid, and list, allowing you to present your products in the most appealing way.

Select the item layout, which determines how individual products will be displayed within the section. You can choose from options like default and image-only layouts.

Configure the number of columns for the section. This determines how many products will be displayed in a single row.

Optionally, set a limit on the number of products to be displayed in the section. This allows you to control the quantity of products visible to users.

Once you have defined all the settings for the product section, save your changes, and the section will be added to your mobile application layout.

3.4 Category Section

The category section in Theorem UI enables you to highlight specific product categories on the home page of your mobile application. This section is useful for users who want to explore products within specific categories, such as clothing, electronics, or accessories. To create a category section:

Access the Theorem UI dashboard in your WordPress admin panel.

Click on the "Add New Section" button to create a new section.

Provide a title for the section, such as "Top Categories" or "Explore by Category."

Select the section type as "Category."

Define the layout of the section, choosing from available.

4. Building Your Mobile Application

4.1 Customizing the Layout

Once you have removed the existing sections created by Theorem UI, you can start customizing the layout of your mobile application. This provides you with the freedom to design a unique and personalized user experience.

4.2 Adding Slider Sections

Utilize Theorem UI's customization options to create engaging slider sections. Follow the instructions provided in Section 3.2 to create slides, specify their properties, and publish the slider.

4.3 Adding Product Sections

Leverage Theorem UI's flexibility to add product sections to your mobile application. Refer to Section 3.3 for instructions on configuring product sections, including selecting categories, layouts, item layouts, column settings, and limits.

After adding the above two sections, your mobile layout will look something like this.

As you can see, how easy it is to play around with your mobile application’s layout using Theorem UI.

5. Conclusion

Congratulations on exploring the features of StoreOne! You now have the knowledge and tools to build your own mobile application. If you encounter any difficulties or have questions, please don't hesitate to contact us at support@storeone.app.