The goal of the mobile store for your e-commerce app is to improve the user experience and increase sales. With this new technology, small business owners can set up a full-fledged mobile shop right inside their app. Use our advanced mobile shop, organize your product groups, and give your customers a shopping experience that is better than ever. Follow these instructions to use the Mobile Store feature to its fullest and change the way you do business online.
Included Features
- Manage your store:
Follow payment orders, release your newly released products, spread your collections, segment your customers for promotional campaigns, and update your product listings.
- Offer multiple payment options:
You will have multiple payment gateways, including PayPal and Stripe. You only need to set up the payment gateway of your choice, set your credentials, and enjoy tracking your profit.
Components
There are three components included:
- Shopping Hub: Shows your marketplace interface designed by component elements.
- Collection Showcase: Shows a group of products listed in a certain collection.
- Product Spotlight: Represents a certain product on your app.
Collection Showcase and Product Spotlight are those types of components that can be used without creating a whole marketplace; think about a restaurant app; you can use the collection component for displaying daily specials and the single product component for a "Dish of the Day." These components work well in Event apps, Fitness apps, and Influencer apps without needing a full e-commerce store.
How To Install The Component
This component can be installed in:
- App's Navigation Page✓
- App's Side Menu ✓
You can find the shopping components in the Commerce section. Click or drag and drop the components into your navigation or side menu to install them.
How To Configure The Component: Shopping Hub
Click the gear icon to configure the component settings.
Rename the component, choose an Android and an iOS icon for it, and upload a background image for your shopping hub screens.
In the admin menu, you will find the Commerce menu:
- Stores: This is where you can create your shops. You can have one main shop within one tab and many customized elements.
- Collections: This is where you collect certain products under one category and assign them to your shop.
- Products: Provide products with full details, such as the price, category, and several product images.
- Orders: This is where you can monitor your clients' orders and payment transactions.
To keep from getting lost, you need to do these steps in order.
Creating A Product
- From the admin menu, click 'Products.’
- Click ‘Add New Product’.
- A window will appear where you can enter your product title and description, category, time zone and product images.
- Organization
Add your product vendor, add tags and add collection
Note that you need to create a collection first!
- Theme:
Choose your theme.
- Pricing
- Price: Add the selling price you want to use.
- Compare-at price: This section is for you if you want to examine how your product appears both before and after a discount. Add your product price before the discount. The discounted price will be calculated and displayed to users as a percentage.
- Mark 'Charge tax on this product' if you charge tax.
- Cost per item: Add your product's original price.
- Profit and Margin will be calculated automatically once you add the cost per item.
For instance, if a product costs $85 to produce but costs $100 to sell, the profit and margin will be calculated automatically to demonstrate to the business owner how much progress he has made.
Note that cost per item, Profit, and Margin are only for the business owner, as users won't be able to see these choices as it calculates and tracks how much money you have made with your business.
- Shipping
You can enable shipment. Mark ‘Enable Shipping’ and insert your product weight per kilogram.
Check this document to know how to configure your shipping settings.
And when you click ‘Create’, additional options will appear:
- Product Status & Information
Above the product image, select the state of your product; if it isn't in stock, select ‘Offline’, and below, you’ll find the product's created ID and date of creation.
- Inventory
- By adding the quantity of stocks, you can keep track of it. Additionally, you can update it if your product line grows.
- If you charge tax on this product.
- If your product has an SKU or barcode.
- Variants
This section is about setting up product options for users, as they can choose from multiple pre-selected items—think of small, medium, and large-sized dresses—and the user gets to choose their size, their color, or both. Click ‘Add options’ and let’s start:
⇒ Option Name: Add the category name of your choices.
⇒ Option Values: Add your choices
⇒ Add another option: You can add another option by clicking ‘Add Options’, and once you're done, click 'Done' to save your settings.
You can delete, add a specific price for certain options, and choose the status of a specific choice: limited or unlimited stock; if it’s limited, don’t forget to update how many units are left of this size option.
And don’t forget to save.
Create A Collection
- From the admin menu, click 'Collections’.
- Click ‘Add New Collection’.
- A window will appear where you can enter your collection title and description, click or drag and drop an image, and select a collection theme.
And when you click ‘Create’, additional options will appear:
- Below the collection image, you’ll find the collection’s created ID and date of creation.
- Now, it’s time to assign products to this collection. Click ‘Add Product.’
Select the product and click ‘Done’.
Keep in mind that there are two ways to add a product to a collection: you can either add the product to the collection section or assign the collection to the product section.
Creating a Marketplace
Now it's time to design your shop layout and start assigning your collections. You can use two methods to do so:
- You can access the stores section from the admin menu, click ‘Add New Store’ and start designing your marketplace.
- Or, you can go back to the Mobile Store component and click ‘Setup’.
In the design area, you'll find some elements you can put on the screen to make the shape of your interface:
- Headline
- Buttons
- Cards
- Collections
Make sure to drag and drop the elements into your workspace.
⇒ Collection Element:
A collection card is an element that you can use to assign your created collections to. Click or drag and drop a collection card and click the gear icon to open it’s settings section.
Settings:
The settings for each collection card are pretty similar; add a headline, font size, headline alignment, and it’s tint. And don’t forget to upload an image if the card has an image-including option.
All Cards differ in style (Square or Wide), whether it has headline option or not, etc.
When you’re done choosing your preferred cards, tap ‘Select’.
And assign the card’s collection, and click ‘Done’.
And don’t forget to add your store name and click ‘Save App Config’ once done.
Check out this guide to understand how to arrange your elements.
Orders
This is where you can track orders submitted by your app users.
- From the admin menu, click 'Orders.’
- You will be prompted to the orders page, where you can check all the details of your users' orders.
- Click on one of your orders to check order transaction details.
Payment Gateways
Remember to enable the payment methods you wish to provide your users with during the purchase process. Stripe, Cash, and PayPal are your options.
Follow this guide to set up your mobile shop's payment gateways.
Check out this document to know how to configure store settings, tax, and shipping.
How To Configure The Component: Collection Showcase
Click the gear icon to configure the component setting.
Rename the component, choose an Android and an iOS icon for it and tap ‘Select’ to assign a collection to the component.
Choose your collection and click ‘Done’.
How To Configure The Component: Product Spotlight
Click the gear icon to configure the component setting.
Rename the component, choose an Android and an iOS icon for it and tap ‘Select’ to assign a product to the component.
Choose your product and click ‘Done’.
Must-Have Components
You must include all your payment components:
- Order Manager Spotlight: It shows all orders created by the user, including all the order details (date & time of created order, payment method type, status, etc.).
- Shopping Cart Spotlight: It allows users to add, review, and manage selected products before proceeding to checkout.