- \n
- WordPress Multi-Vendor<\/li>\n
- After ship<\/li>\n
- One Signal<\/li>\n<\/ul>\n
- \n
- You can create an app for any type of store. IonCommerce supports all types of products.<\/li>\n
- As far as the payment gateways is a major consideration, you can integrate all gateways that are compatible with WordPress WooCommerce due to the web view feature facility.<\/li>\n
- When it comes to shipping gateways, it allows all the shipping methods.<\/li>\n<\/ul>\n<\/div>\n
[\/et_pb_text][\/et_pb_column_inner][\/et_pb_row_inner][et_pb_row_inner admin_label=”Objectives” module_id=”objectives” _builder_version=”4.19.3″ _module_preset=”default” background_enable_color=”off” custom_margin=”||||false|false” custom_padding=”2.5rem||||false|false” border_radii=”on|15px|15px|15px|15px” collapsed=”on” global_colors_info=”{}”][et_pb_column_inner saved_specialty_column_type=”2_3″ _builder_version=”4.19.3″ _module_preset=”default” background_color=”rgba(61,61,61,0.025)” custom_padding=”2.5rem|2.5rem|2.5rem|2.5rem|true|true” border_radii=”on|15px|15px|15px|15px” global_colors_info=”{}”][et_pb_text _builder_version=”4.19.3″ _module_preset=”default” header_2_font=”|600|||||||” header_2_font_size=”32px” custom_margin=”||0.5rem||false|false” global_colors_info=”{}”]<\/p>\n
Objectives<\/h2>\n
[\/et_pb_text][et_pb_text ul_item_indent=”2rem” _builder_version=”4.19.3″ _module_preset=”default” header_3_font=”|600|||||||” header_3_font_size=”20px” header_3_line_height=”1.3em” header_4_font=”|600|||||||” locked=”off” global_colors_info=”{}”]<\/p>\n
Following are the objectives of IonCommerce:<\/p>\n
1)\u00a0 \u00a0 \u00a0 This ensures high sales, and in time delivery of the products.<\/p>\n
2)\u00a0 \u00a0 \u00a0 This reduces the time of transaction and payment.<\/p>\n
3)\u00a0 \u00a0 \u00a0 It allows visitors across certain boundaries to see and order the products.<\/p>\n
4)\u00a0 \u00a0 \u00a0 The ease of ordering and payment enhances the conversion rate.<\/p>\n
5)\u00a0 \u00a0 \u00a0 Extended options and ease throughout the transaction render more confidence and satisfaction to the customer.<\/p>\n
[\/et_pb_text][\/et_pb_column_inner][\/et_pb_row_inner][et_pb_row_inner admin_label=”Pre Requisites” module_id=”pre-requisites” _builder_version=”4.19.3″ _module_preset=”default” background_enable_color=”off” custom_margin=”||||false|false” custom_padding=”2.5rem||||false|false” border_radii=”on|15px|15px|15px|15px” collapsed=”on” global_colors_info=”{}”][et_pb_column_inner saved_specialty_column_type=”2_3″ _builder_version=”4.19.3″ _module_preset=”default” background_enable_color=”off” custom_padding=”||||false|false” border_radii=”on|15px|15px|15px|15px” global_colors_info=”{}”][et_pb_text _builder_version=”4.19.3″ _module_preset=”default” header_2_font=”|600|||||||” header_2_font_size=”32px” custom_margin=”||10px||false|false” global_colors_info=”{}”]<\/p>\n
Pre Requisites<\/h2>\n
[\/et_pb_text][et_pb_text _builder_version=”4.19.3″ _module_preset=”default” header_4_font=”|600|||||||” text_orientation=”center” global_colors_info=”{}”]<\/p>\n
Before you use the app and start the installation process on your machine, this is important points to know in detail.<\/p>\n
1)\u00a0 \u00a0 \u00a0\u00a0<\/span>Tools<\/b>.<\/p>\n
For ionic mobile app development, you need ionic development environment ready.\u00a0 Please follow below official links to setup your development machine.<\/p>\n
https:\/\/ionicframework.com\/getting-started<\/a><\/p>\n
https:\/\/ionicframework.com\/docs\/installation\/cli<\/a><\/p>\n
\n
2)<\/b>\u00a0<\/span>Application build and test dependencies.<\/b><\/p>\n
Below given are the essential dependencies that are needed to build the application and also for testing purpose i.e<\/p>\n
- \n
- WordPress 6.1+<\/li>\n
- WooCommerce 7.2+<\/li>\n
- Latest Node version<\/li>\n
- Latest Ionic CLI Version<\/li>\n
- Latest Capacitor CLI Version<\/li>\n
- Latest Awesome Cordova Plugins Version<\/li>\n
- Ionic Framework Version: 6+<\/li>\n
- Android Studio with SDK Manager<\/li>\n
- Latest XCode Version<\/li>\n<\/ol>\n
3)\u00a0 Essentials<\/b><\/p>\n
- \n
- You must have wordpress site setup with woocommerce plugin.<\/li>\n
- You must create firebase account setup<\/li>\n
- You must have OneSignal account setup for push notifications.<\/li>\n<\/ol>\n
[\/et_pb_text][\/et_pb_column_inner][\/et_pb_row_inner][et_pb_row_inner admin_label=”Ionic Source Code Setup” module_id=”ionic-source-code-setup” _builder_version=”4.19.3″ _module_preset=”default” background_enable_color=”off” custom_margin=”||||false|false” custom_padding=”2.5rem||||false|false” border_radii=”on|15px|15px|15px|15px” collapsed=”on” global_colors_info=”{}”][et_pb_column_inner saved_specialty_column_type=”2_3″ _builder_version=”4.19.3″ _module_preset=”default” background_color=”rgba(61,61,61,0.025)” custom_padding=”2.5rem|2.5rem|2.5rem|2.5rem|true|true” border_radii=”on|15px|15px|15px|15px” global_colors_info=”{}”][et_pb_text _builder_version=”4.19.3″ _module_preset=”default” header_2_font=”|600|||||||” header_2_font_size=”32px” custom_margin=”||10px||false|false” global_colors_info=”{}”]<\/p>\n
Ionic Source Code Setup<\/h2>\n
[\/et_pb_text][et_pb_text ul_item_indent=”2rem” _builder_version=”4.19.3″ _module_preset=”default” header_3_font=”|600|||||||” header_3_font_size=”20px” header_3_line_height=”1.3em” locked=”off” global_colors_info=”{}”]<\/p>\n
Ionic Source Code Setup<\/b><\/p>\n
For install ionic environment use this link<\/p>\n
https:\/\/ionicframework.com\/docs\/intro\/cli<\/a><\/p>\n
Now we have set up the ionic environment. We need to connect our app with woocommerce website. Open the folder name (App Source Code) inside the downloaded packages.<\/p>\n
Inside the folder, you will find all the ionic application code.<\/p>\n
Now open project folder\/src\/services\/config\/config.service.ts file and change the following.<\/p>\n
- \n
- consumer key<\/li>\n
- consumer secret<\/li>\n
- https:\/\/your-site-url.com\u00a0<\/span><\/a>(it will be the URL of your domain)<\/li>\n<\/ul>\n
It will load woocommerce products data into your application<\/p>\n
![](\"https:\/\/ecommerce-app.imw3.com\/cosmetic\/wp-content\/uploads\/2023\/01\/Capture.png\")
<\/p>\nTest Application<\/b><\/p>\n
Now you can test the application in your ionic development environment.<\/p>\n
[\/et_pb_text][\/et_pb_column_inner][\/et_pb_row_inner][et_pb_row_inner admin_label=”Plugin Installation” module_id=”plugin-installation” _builder_version=”4.19.3″ _module_preset=”default” background_enable_color=”off” custom_margin=”||||false|false” custom_padding=”2.5rem||||false|false” border_radii=”on|15px|15px|15px|15px” locked=”off” collapsed=”on” global_colors_info=”{}”][et_pb_column_inner saved_specialty_column_type=”2_3″ _builder_version=”4.19.3″ _module_preset=”default” background_enable_color=”off” custom_padding=”||||false|false” border_radii=”on|15px|15px|15px|15px” global_colors_info=”{}”][et_pb_text _builder_version=”4.19.3″ _module_preset=”default” header_2_font=”|600|||||||” header_2_font_size=”32px” custom_margin=”||10px||false|false” global_colors_info=”{}”]<\/p>\n
Plugin Installation<\/h2>\n
[\/et_pb_text][et_pb_text ul_item_indent=”2rem” _builder_version=”4.19.3″ _module_preset=”default” header_3_font=”|600|||||||” header_3_font_size=”20px” header_3_line_height=”1.3em” header_4_font=”|600|||||||” locked=”off” global_colors_info=”{}”]<\/p>\n
We have to add IonCommerce plugin.<\/p>\n
You will find the IonCommerce plugin in a zipped folder that you downloaded.<\/p>\n
Go straight to the admin panel>Plugin>Add New.<\/p>\n
![\"\"](\"https:\/\/themes-coder.com\/wp-content\/uploads\/2019\/09\/plugin_install.png\")
<\/p>\nThe above-given page will show up. From here, click on the \u201cupload plugin\u201d option, make sure that the plugin that you have is in .zip format. Click on the \u201cBrowse\u201d option, upload the plugin folder and once the folder is chosen, click on the \u201cInstall Now\u201d option\u201d.<\/p>\n
Once the plugin is installed, you can activate or deactivate the plugin through settings according to your usage.<\/p>\n
After WordPress plugins installation and setup, please follow the below-mentioned instructions to set up your mobile application.<\/p>\n
IonCommerce app works with woocommerce rest api, please follow the link below to enable woocommerce rest api on your server.<\/p>\n
https:\/\/docs.woocommerce.com\/document\/woocommerce-rest-api\/<\/a><\/p>\n
After enable IonCommerce plugin, please make sure your site woocommerce rest api working correctly. You can follow that simple tutorial link to check whether rest api works correctly on your sever or not.<\/p>\n
https:\/\/github.com\/woocommerce\/woocommerce\/wiki\/Getting-started-with-the-REST-API<\/a><\/p>\n
Now you have all set at your wordpress site end. Please proceed with ionic source code setup.<\/p>\n
Enable REST API & Generate API keys<\/strong><\/p>\n
To enable the\u00a0REST API<\/strong>\u00a0with in WooCommerce, go to\u00a0WooCommerce> Settings> Advanced<\/strong>\u00a0and tick the Enable\u00a0Legacy API<\/strong>\u00a0<\/span>link .<\/p>\n
The WooCommerce REST API works on a key system to control access. These keys are linked to WordPress users on your website.<\/p>\n
To create or manage keys for specific WordPress user:<\/p>\n
Go to:\u00a0WooCommerce> Settings> Advanced> REST API<\/strong><\/p>\n
1) Select\u00a0Add Key<\/strong>
2) Select the user you would like to generate a key for, in the user file and add a description.
3)Choose the desired level of access for this API key , which can be\u00a0Read<\/strong>\u00a0access,\u00a0Write<\/strong>\u00a0access or\u00a0Read\/Write<\/strong>\u00a0access.
4)Select the\u00a0Generate API<\/strong>\u00a0key<\/strong>\u00a0button and WooCommwrce will generate API keys for that certain user.<\/p>\nOnce the keys have been generated, you will see two new keys, a\u00a0QRCode<\/strong>\u00a0and a\u00a0Revoke API<\/strong>\u00a0Key button. These two keys are your\u00a0Consumer Key<\/strong>\u00a0and\u00a0Consumer Secret<\/strong>.<\/p>\n
5) Place your site link, consumer key and consumer secret in the mobile application\u00a0config<\/strong>\u00a0file that uses the WooCommerce API.<\/p>\n
[\/et_pb_text][\/et_pb_column_inner][\/et_pb_row_inner][et_pb_row_inner admin_label=”OneSignal Integration” module_id=”one-signal-integration” _builder_version=”4.19.3″ _module_preset=”default” background_enable_color=”off” custom_margin=”||||false|false” custom_padding=”2.5rem||||false|false” border_radii=”on|15px|15px|15px|15px” locked=”off” collapsed=”on” global_colors_info=”{}”][et_pb_column_inner saved_specialty_column_type=”2_3″ _builder_version=”4.19.3″ _module_preset=”default” background_color=”rgba(61,61,61,0.025)” custom_padding=”2.5rem|2.5rem|2.5rem|2.5rem|true|true” border_radii=”on|15px|15px|15px|15px” global_colors_info=”{}”][et_pb_text _builder_version=”4.19.3″ _module_preset=”default” header_2_font=”|600|||||||” header_2_font_size=”32px” custom_margin=”||10px||false|false” global_colors_info=”{}”]<\/p>\n
OneSignal Integration<\/h2>\n
[\/et_pb_text][et_pb_text ul_item_indent=”2rem” _builder_version=”4.19.3″ _module_preset=”default” header_3_font=”|600|||||||” header_3_font_size=”20px” header_3_line_height=”1.3em” locked=”off” global_colors_info=”{}”]<\/p>\n
Android<\/strong><\/h2>\n
Generate a Google Server API Key<\/strong><\/h3>\n
Your\u00a0Google Server API<\/strong>\u00a0Key and\u00a0Google Project Number<\/strong>\u00a0are used to send push notifications to\u00a0ANDROID<\/strong>\u00a0devices.<\/p>\n
To begin, we\u2019ll obtain a Google Server API Key and Google Project Number. These keys allow\u00a0OneSignal<\/strong>\u00a0to use Google\u2019s web push services for your notifications.<\/p>\n
Create A Firebase Project<\/strong><\/h3>\n
- \n
- Visit the\u00a0Firebase Console<\/a>\u00a0and sign in with your Google account.<\/li>\n<\/ol>\n
![\"\"](\"https:\/\/themes-coder.com\/wp-content\/uploads\/2020\/04\/11NU6gv.png\")
<\/p>\nPress\u00a0\u201cCREATE NEW PROJECT\u201d<\/strong>\u00a0or select an existing one below<\/p>\n
![\"\"](\"https:\/\/themes-coder.com\/wp-content\/uploads\/2020\/04\/22hh3QPH6GTCo6ZoegMzsyCdjd.png\")
<\/p>\nEnter a project name and press\u00a0\u201cCREATE PROJECT\u201d<\/strong>.<\/p>\n
![\"\"](\"https:\/\/themes-coder.com\/wp-content\/uploads\/2020\/04\/33mPdUXljfiVq1nhM9LCqLh6WrxF.png\")
<\/p>\nFirebase Cloud Messaging Token and Sender Id<\/strong><\/h3>\n
Getting your Firebase Cloud Messaging token and Sender ID<\/p>\n
- \n
- \u00a0Click the Gear icon in the top left and select\u00a0\u201cProject settings\u201d<\/strong>.<\/li>\n
- \u00a0Select the\u00a0\u201cCLOUD MESSAGING\u201d<\/strong>\u00a0tab.<\/li>\n
- Save the two values listed:\n
- \n
- You\u2019ll need your\u00a0Server key<\/strong>, also known as the\u00a0Google Server API key.<\/strong><\/li>\n
- You\u2019ll need your\u00a0Sender ID<\/strong>, also known as the\u00a0Google Project Number<\/strong>, later as well<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n
![\"\"](\"https:\/\/themes-coder.com\/wp-content\/uploads\/2020\/04\/44b9S61ZPGMEKmjDIjicBO.png\")
<\/p>\nOneSignal App Android Setting<\/strong><\/h3>\n
Configure your\u00a0OneSignal<\/strong>\u00a0app\u2019s Android platform settings<\/p>\n
- \n
- Go to Settings and press the\u00a0Configure<\/strong>\u00a0button to the right of\u00a0Google Android<\/strong>.<\/li>\n<\/ol>\n
![\"\"](\"https:\/\/themes-coder.com\/wp-content\/uploads\/2020\/04\/55BefOxyVZ0rASvFBSZOjLc46.jpg\")
<\/p>\nPaste your Google Server API Key and Google Project Number in here and press Save.<\/p>\n
![\"\"](\"https:\/\/themes-coder.com\/wp-content\/uploads\/2019\/09\/66in8b3GloCuRx4qyNSWB.jpg\")
<\/p>\nAfter saving this\u00a0server API Key<\/strong>\u00a0and\u00a0Sender ID<\/strong>\u00a0from the\u00a0firebase project,<\/strong>\u00a0you can get the\u00a0one signal app Id<\/strong>\u00a0from the settings<\/p>\n
![\"\"](\"https:\/\/themes-coder.com\/wp-content\/uploads\/2019\/09\/7797AIR24IyfA2XVIfXQWW0aBGwv.png\")
<\/p>\nand your sender id from the firebase project<\/p>\n
![\"\"](\"https:\/\/themes-coder.com\/wp-content\/uploads\/2019\/09\/88WTocYWNIAN7GhL5YpI8Gnxrt.png\")
<\/p>\nplace this android app id in config.ts (src\/services\/config\/config.service.ts) file then save it.<\/p>\n
![](\"https:\/\/ecommerce-app.imw3.com\/cosmetic\/wp-content\/uploads\/2023\/01\/Capture-1.png\")
<\/p>\n<\/p>\n
IOS<\/strong><\/h2>\n
Generate an IOS Push Certificate<\/strong><\/h3>\n
Required for all IOS apps.<\/p>\n
Required For Setup<\/strong><\/h3>\n
- \n
- A\u00a0OneSignal Account<\/a>, if you do not already have one.<\/li>\n
- Your\u00a0OneSignal App Auth<\/strong>\u00a0Key, available in\u00a0Keys & IDs.<\/a><\/li>\n
- A Mac with\u00a0Xcode 8+<\/strong>. If you are using\u00a0Xcode 7<\/strong>,\u00a0PhoneGap Build<\/strong>, or\u00a0Cordova<\/strong>,\u00a0follow this guide instead.<\/a><\/li>\n<\/ul>\n
Provisioning<\/strong><\/h3>\n
Option A: Create Certificate Request Manually<\/strong><\/h3>\n
We recently released a tool to automate this process!<\/p>\n
Make sure your role for the team is Admin inside your Apple Developer account > Membership section. Otherwise you will not be able to use this tool.<\/p>\n
Simply follow the directions on\u00a0OneSignal\u2019s Provisionator<\/a>\u00a0Tool then\u00a0continue to Step 4<\/a>.<\/p>\n
OR<\/strong><\/h3>\n
Option B: Create Certificate Request Manually<\/strong><\/h3>\n
- \n
- Open Keychain Access on your\u00a0Mac OS X<\/strong>\u00a0system. It may be located in \u201cApplications<\/strong>\u201d > \u201cUtilities<\/strong>\u201d > \u201cKeychain<\/strong>\u00a0Access<\/strong>\u201c<\/li>\n
- Select \u201cKeychain<\/strong>\u00a0Access<\/strong>\u201d > \u201cCertificate<\/strong>\u00a0Assistant<\/strong>\u201d > \u201cRequest<\/strong>\u00a0a<\/strong>\u00a0Certificate<\/strong>\u00a0From<\/strong>\u00a0a Certificate<\/strong>\u00a0Authority\u2026<\/strong>\u201c.<\/li>\n<\/ol>\n
![\"\"](\"https:\/\/themes-coder.com\/wp-content\/uploads\/2019\/09\/10105qc0LYTGR56pHGMmDZUYGn.png\")
<\/p>\nSelect the \u201cSave to disk<\/strong>\u201d option and enter your information in the required fields. This creates a certification request file that will be used<\/p>\n
![\"\"](\"https:\/\/themes-coder.com\/wp-content\/uploads\/2019\/09\/11011N7UN3vHEkh49m9JW2RBc.png\")
<\/p>\nEnable Push Notification<\/strong><\/h3>\n
To enable Push Notifications and apply the Certification Request to generate Certificate.<\/p>\n
- \n
- Select your app from the\u00a0Apple\u2019s Developer site<\/a>\u00a0and press \u201cEdit<\/strong>\u201c.<\/li>\n<\/ol>\n
![\"\"](\"https:\/\/themes-coder.com\/wp-content\/uploads\/2019\/09\/12012fh1rNf6NRxsxmaEJPo3AVETQy6xg.png\")
<\/p>\nScroll down to the bottom and enable Push Notifications. Press Done, but do not configure either Production or Development certificate.<\/p>\n
Instead, go to\u00a0Add iOS Certificate<\/a>\u00a0and select \u201cApple Push Notification service SSL (Sandbox & Production)<\/strong>\u201d and click Continue.<\/p>\n
This certificate will be applicable to both Sandbox and Production environments, so you do not need a separate key for each.<\/p>\n
![\"\"](\"https:\/\/themes-coder.com\/wp-content\/uploads\/2019\/09\/13013VzBsWcfuH2H5IAgjwEH15hF3h.png\")
<\/p>\n- \n
- Choose an App ID from the App ID pop-up menu.<\/li>\n
- Press \u201cContinue\u201d<\/strong>.<\/li>\n
- Press\u00a0\u201cChoose File\u2026\u201d<\/strong>\u00a0select the \u201ccertSigningRequest\u201d file you saved in step 1, press \u201copen<\/strong>\u201c, and then press\u00a0\u201cGenerate<\/strong>\u201c..<\/li>\n<\/ol>\n
![\"\"](\"https:\/\/themes-coder.com\/wp-content\/uploads\/2019\/09\/140146uGje7uFTqGpnGmX5Iud3.png\")
<\/p>\nPress \u201cDownload\u201d<\/strong>\u00a0to save your certificate.<\/p>\n
![\"\"](\"https:\/\/themes-coder.com\/wp-content\/uploads\/2019\/09\/15015HbomXMRLZMtNx8jntWmC0d.png\")
<\/p>\nCreating A Private Key<\/strong><\/h3>\n
- \n
- Open the .cer<\/strong>\u00a0file you downloaded in the last step by double clicking on it in Finder.<\/li>\n<\/ol>\n
![\"\"](\"https:\/\/themes-coder.com\/wp-content\/uploads\/2019\/09\/16016nKOKBnG4UHGOzCRjK5bVIJby.png\")
<\/p>\nAfter a few seconds the \u201cKeychain<\/strong>\u00a0Access<\/strong>\u201d program should pop up. Select\u00a0Login<\/strong>\u00a0>\u00a0My Certificates<\/strong>, then right click on your key in the list and select \u201cExport<\/strong>\u201c.<\/p>\n
![\"\"](\"https:\/\/themes-coder.com\/wp-content\/uploads\/2019\/09\/17017X7rTmxHFvSIDuX2jtkxowFRhF.png\")
<\/p>\n<\/p>\n
- \n
- Give the file a unique name using the .p12 extension, and press save. You will have an option to protect the file with a password. If you add a password, you need to enter this same password on\u00a0OneSignal<\/strong>.<\/li>\n<\/ol>\n
Upload Your Push<\/strong><\/h3>\n
Upload Your Push Certificate to\u00a0OneSignal<\/strong>.<\/p>\n
If you haven\u2019t already, you should\u00a0set up your OneSignal account<\/a>.<\/p>\n
- \n
- Select your app from the All Apps page in\u00a0OneSignal<\/strong>, then go to\u00a0 \u00a0 \u00a0\u201cApp Settings<\/strong>\u201d and press \u201cConfigure\u201d<\/strong>\u00a0to the right of the Apple\u00a0iOS<\/strong>\u00a0Settings.<\/li>\n<\/ol>\n
![\"\"](\"https:\/\/themes-coder.com\/wp-content\/uploads\/2019\/09\/18018sV91njjGiWYKauVm.jpg\")
<\/p>\nSelect the .p12<\/strong>\u00a0you exported along with a password that you added, and press\u00a0Save<\/strong>.<\/p>\n
![\"\"](\"https:\/\/themes-coder.com\/wp-content\/uploads\/2019\/09\/19019jyd2Yp8N2uZnqMBR2YIsMRGT98s.jpg\")
<\/p>\nplace this ios app id in config.ts (src\/services\/config\/config.service.ts) file then save it.<\/p>\n
<\/p>\n[\/et_pb_text][\/et_pb_column_inner][\/et_pb_row_inner][et_pb_row_inner admin_label=”App Styling” module_id=”app-styling” _builder_version=”4.19.3″ _module_preset=”default” background_enable_color=”off” custom_margin=”||||false|false” custom_padding=”2.5rem||||false|false” border_radii=”on|15px|15px|15px|15px” locked=”off” collapsed=”off” global_colors_info=”{}”][et_pb_column_inner saved_specialty_column_type=”2_3″ _builder_version=”4.19.3″ _module_preset=”default” background_color=”rgba(61,61,61,0.025)” custom_padding=”2.5rem|2.5rem|2.5rem|2.5rem|true|true” border_radii=”on|15px|15px|15px|15px” global_colors_info=”{}”][et_pb_text _builder_version=”4.19.3″ _module_preset=”default” header_2_font=”|600|||||||” header_2_font_size=”32px” custom_margin=”||10px||false|false” global_colors_info=”{}”]<\/p>\n
App Styling<\/h2>\n
[\/et_pb_text][et_pb_text ul_item_indent=”2rem” _builder_version=”4.19.3″ _module_preset=”default” header_3_font=”|600|||||||” header_3_font_size=”20px” header_3_line_height=”1.3em” header_4_font=”|600|||||||” hover_enabled=”0″ locked=”off” global_colors_info=”{}” sticky_enabled=”0″]<\/p>\n
![](\"https:\/\/ecommerce-app.imw3.com\/cosmetic\/wp-content\/uploads\/2023\/01\/Capture-7.png\")
<\/p>\nThis allows you to choose any of Home Screen Style from 9 available styles.<\/span><\/p>\n
![](\"https:\/\/ecommerce-app.imw3.com\/cosmetic\/wp-content\/uploads\/2023\/01\/Capture-8.png\")
<\/span><\/p>\nThis allows you to choose any Category Screen Style from 6 available styles.<\/p>\n
![](\"https:\/\/ecommerce-app.imw3.com\/cosmetic\/wp-content\/uploads\/2023\/01\/Capture-13.png\")
<\/p>\nThis allows you to choose any Product Card Style from 28 available styles.<\/p>\n
[\/et_pb_text][\/et_pb_column_inner][\/et_pb_row_inner][et_pb_row_inner admin_label=”General Settings” module_id=”general-settings” _builder_version=”4.19.3″ _module_preset=”default” background_enable_color=”off” custom_margin=”||||false|false” custom_padding=”2.5rem||||false|false” border_radii=”on|15px|15px|15px|15px” locked=”off” collapsed=”on” global_colors_info=”{}”][et_pb_column_inner saved_specialty_column_type=”2_3″ _builder_version=”4.19.3″ _module_preset=”default” background_enable_color=”off” custom_padding=”||||false|false” border_radii=”on|15px|15px|15px|15px” global_colors_info=”{}”][et_pb_text _builder_version=”4.19.3″ _module_preset=”default” header_2_font=”|600|||||||” header_2_font_size=”32px” custom_margin=”||10px||false|false” global_colors_info=”{}”]<\/p>\n
General Settings<\/h2>\n
[\/et_pb_text][et_pb_text ul_item_indent=”2rem” _builder_version=”4.19.3″ _module_preset=”default” header_3_font=”|600|||||||” header_3_font_size=”20px” header_3_line_height=”1.3em” header_4_font=”|600|||||||” locked=”off” global_colors_info=”{}”]<\/p>\n
\n![\"\"](\"https:\/\/themes-coder.com\/wp-content\/uploads\/2019\/09\/cancel-order-button.png\")
<\/p>\nIf you want to show the \u201ccancel order\u201d button, select show. While you can also hide it by applying the \u201chide\u201d option.<\/p>\n
![\"\"](\"https:\/\/themes-coder.com\/wp-content\/uploads\/2019\/09\/cancel-order-duration.png\")
<\/p>\nFrom here you can set a certain time duration, prior to which the buyer can cancel the order. For instance, the 8 Hours option implies that order could be cancelled at least 8 hours prior to the agreed delivery time.<\/p>\n
![\"\"](\"https:\/\/themes-coder.com\/wp-content\/uploads\/2019\/09\/product-max-price-filter.png\")
<\/p>\nThis option allows you to place a filter of maximum price so that the products falling within this certain range show on your site page.<\/p>\n<\/div>\n
\n![](\"https:\/\/ecommerce-app.imw3.com\/cosmetic\/wp-content\/uploads\/2023\/01\/Capture-2.png\")
<\/div>\nThis option allows you to share app on ios.<\/div>\n<\/div>\n- <\/ol>\n
- Default<\/b>: by selecting this option, you allow the web view of checkout. This checkout option appears in your app.<\/li>\n
- Virtual<\/b>: This checkout option is meant for those businesses that deal in virtual or intangible products that cannot be shipped physically, rather just downloaded. For instance, digital products, Pdf files, books, etc. In this checkout style, only the billing detail page appears and not the shipping detail page.<\/li>\n
- Screen in App<\/b>: in this checkout type, a separate order page is created right within the app where billing and shipping details are entered and stored.<\/li>\n<\/ol>\n
b) Custom CSS for Checkout Page<\/b>.<\/p>\n
This custom CSS allows you to change\/modify your checkout page options right in the manner you like.<\/p>\n
- <\/ol>\n
[\/et_pb_text][\/et_pb_column_inner][\/et_pb_row_inner][et_pb_row_inner admin_label=”Links” module_id=”links” _builder_version=”4.19.3″ _module_preset=”default” background_enable_color=”off” custom_margin=”||||false|false” custom_padding=”2.5rem||||false|false” border_radii=”on|15px|15px|15px|15px” locked=”off” collapsed=”on” global_colors_info=”{}”][et_pb_column_inner saved_specialty_column_type=”2_3″ _builder_version=”4.19.3″ _module_preset=”default” background_enable_color=”off” custom_padding=”||||false|false” border_radii=”on|15px|15px|15px|15px” global_colors_info=”{}”][et_pb_text module_id=”404Layouts” _builder_version=”4.19.3″ _module_preset=”default” header_2_font=”|600|||||||” header_2_font_size=”32px” custom_margin=”||10px||false|false” global_colors_info=”{}”]<\/p>\n
Links<\/h2>\n
[\/et_pb_text][et_pb_text ul_item_indent=”2rem” _builder_version=”4.19.3″ _module_preset=”default” header_3_font=”|600|||||||” header_3_font_size=”20px” header_3_line_height=”1.3em” header_4_font=”|600|||||||” locked=”off” global_colors_info=”{}”]<\/p>\n
![](\"https:\/\/ecommerce-app.imw3.com\/cosmetic\/wp-content\/uploads\/2023\/01\/Capture-4.png\")
<\/p>\n![](\"https:\/\/ecommerce-app.imw3.com\/cosmetic\/wp-content\/uploads\/2023\/01\/Capture-12.png\")
<\/p>\nEdit Profile.<\/b><\/p>\n
This is again meant for the visitor to edit his\/her profile information that was used in registration. Through this, you can allow or restrict the visitor from editing the profile.<\/p>\n
My orders<\/b><\/p>\n
Through this page, the visitor can see his\/her order details and history. You can show or hide this option.<\/p>\n
Contact us.<\/b><\/p>\n
This is the page that carries the details of your contact information. You can show or hide this.<\/p>\n
Billing Shipping Info<\/b>.<\/p>\n
This segment is meant for the user where he\/she can store billing and shipping information. You can show or hide it in the left menu.<\/p>\n
Downloads<\/b>.<\/p>\n
This is again meant for the visitor whether he\/she wants downloads or not. You can show or hide it in the left menu.<\/p>\n
News<\/b>.<\/p>\n
This carries the latest news about your business. You can show or hide this from the left menu.<\/p>\n
Introduction.<\/b><\/p>\n
This segment contains your business\u2019s introduction. You can show or hide it from here.<\/p>\n
Share App<\/b>.<\/p>\n
Through this option, the visitor can share your app through different mediums with other users. You can show or hide this option from here.<\/p>\n
RateApp<\/b>.<\/p>\n
Through this option, the visitor can rate your app. You can show or hide this option from here.<\/p>\n
- <\/ol>\n
[\/et_pb_text][\/et_pb_column_inner][\/et_pb_row_inner][et_pb_row_inner admin_label=”Contact Page Settings” module_id=”contact-page-settings” _builder_version=”4.19.3″ _module_preset=”default” background_enable_color=”off” custom_margin=”||||false|false” custom_padding=”2.5rem||||false|false” border_radii=”on|15px|15px|15px|15px” locked=”off” collapsed=”on” global_colors_info=”{}”][et_pb_column_inner saved_specialty_column_type=”2_3″ _builder_version=”4.19.3″ _module_preset=”default” background_color=”rgba(61,61,61,0.025)” custom_padding=”2.5rem|2.5rem|2.5rem|2.5rem|true|true” border_radii=”on|15px|15px|15px|15px” global_colors_info=”{}”][et_pb_text _builder_version=”4.19.3″ _module_preset=”default” header_2_font=”|600|||||||” header_2_font_size=”32px” custom_margin=”||10px||false|false” global_colors_info=”{}”]<\/p>\n
Contact Page Settings<\/h2>\n
[\/et_pb_text][et_pb_text ul_item_indent=”2rem” _builder_version=”4.19.3″ _module_preset=”default” header_3_font=”|600|||||||” header_3_font_size=”20px” header_3_line_height=”1.3em” header_4_font=”|600|||||||” locked=”off” global_colors_info=”{}”]<\/p>\n
![](\"https:\/\/ecommerce-app.imw3.com\/cosmetic\/wp-content\/uploads\/2023\/01\/Capture-5.png\")
<\/p>\nThis entire page is designed in order to facilitate the client in contacting you. You are supposed to fill column on this page appropriately and accurately. This contact form is a bridge between you and the client.<\/span><\/p>\n
[\/et_pb_text][\/et_pb_column_inner][\/et_pb_row_inner][et_pb_row_inner admin_label=”App Content Pages” module_id=”app-content-pages” _builder_version=”4.19.3″ _module_preset=”default” background_enable_color=”off” custom_margin=”||||false|false” custom_padding=”2.5rem||||false|false” border_radii=”on|15px|15px|15px|15px” locked=”off” collapsed=”on” global_colors_info=”{}”][et_pb_column_inner saved_specialty_column_type=”2_3″ _builder_version=”4.19.3″ _module_preset=”default” background_enable_color=”off” custom_padding=”||||false|false” border_radii=”on|15px|15px|15px|15px” global_colors_info=”{}”][et_pb_text _builder_version=”4.19.3″ _module_preset=”default” header_2_font=”|600|||||||” header_2_font_size=”32px” custom_margin=”||10px||false|false” global_colors_info=”{}”]<\/p>\n
App Content Pages<\/h2>\n
[\/et_pb_text][et_pb_text ul_item_indent=”2rem” _builder_version=”4.19.3″ _module_preset=”default” header_3_font=”|600|||||||” header_3_font_size=”20px” header_3_line_height=”1.3em” header_4_font=”|600|||||||” hover_enabled=”0″ locked=”off” global_colors_info=”{}” sticky_enabled=”0″]<\/p>\n
![](\"https:\/\/ecommerce-app.imw3.com\/cosmetic\/wp-content\/uploads\/2023\/01\/Capture-6.png\")
<\/p>\nThis feature allows you to display different information for the visitor I.e Your About Us page, Refund Policy, Privacy Policy, Terms, and Conditions content.<\/span><\/p>\n
[\/et_pb_text][\/et_pb_column_inner][\/et_pb_row_inner][et_pb_row_inner admin_label=”Multi Vendor” module_id=”multi-vendor” _builder_version=”4.19.3″ _module_preset=”default” background_enable_color=”off” custom_margin=”||||false|false” custom_padding=”2.5rem||||false|false” border_radii=”on|15px|15px|15px|15px” locked=”off” collapsed=”on” global_colors_info=”{}”][et_pb_column_inner saved_specialty_column_type=”2_3″ _builder_version=”4.19.3″ _module_preset=”default” background_enable_color=”off” custom_padding=”||||false|false” border_radii=”on|15px|15px|15px|15px” global_colors_info=”{}”][et_pb_text _builder_version=”4.19.3″ _module_preset=”default” header_2_font=”|600|||||||” header_2_font_size=”32px” custom_margin=”||10px||false|false” global_colors_info=”{}”]<\/p>\n
Multi Vendor<\/h2>\n
[\/et_pb_text][et_pb_text ul_item_indent=”2rem” _builder_version=”4.19.3″ _module_preset=”default” header_3_font=”|600|||||||” header_3_font_size=”20px” header_3_line_height=”1.3em” locked=”off” global_colors_info=”{}”]<\/p>\n
![](\"https:\/\/ecommerce-app.imw3.com\/cosmetic\/wp-content\/uploads\/2023\/01\/Capture-10.png\")
<\/p>\nThis is again a paid plugin that allows multiple vendors to sell their products on your website. Once you have purchased and installed this plugin on your WordPress website, select the \u201cYes\u201d option from here to make it completely functional. The link for this particular plugin is given here<\/p>\n
https:\/\/woocommerce.com\/products\/product-vendors\/.<\/a><\/p>\n
- Virtual<\/b>: This checkout option is meant for those businesses that deal in virtual or intangible products that cannot be shipped physically, rather just downloaded. For instance, digital products, Pdf files, books, etc. In this checkout style, only the billing detail page appears and not the shipping detail page.<\/li>\n
[\/et_pb_text][\/et_pb_column_inner][\/et_pb_row_inner][et_pb_row_inner admin_label=”Checkout Settings” module_id=”checkout-settings” _builder_version=”4.19.3″ _module_preset=”default” background_enable_color=”off” custom_margin=”||||false|false” custom_padding=”2.5rem||||false|false” border_radii=”on|15px|15px|15px|15px” locked=”off” collapsed=”on” global_colors_info=”{}”][et_pb_column_inner saved_specialty_column_type=”2_3″ _builder_version=”4.19.3″ _module_preset=”default” background_color=”rgba(61,61,61,0.025)” custom_padding=”2.5rem|2.5rem|2.5rem|2.5rem|true|true” border_radii=”on|15px|15px|15px|15px” global_colors_info=”{}”][et_pb_text _builder_version=”4.19.3″ _module_preset=”default” header_2_font=”|600|||||||” header_2_font_size=”32px” custom_margin=”||10px||false|false” global_colors_info=”{}”]<\/p>\n
Checkout Settings<\/h2>\n
[\/et_pb_text][et_pb_text ul_item_indent=”2rem” _builder_version=”4.19.3″ _module_preset=”default” header_3_font=”|600|||||||” header_3_font_size=”20px” header_3_line_height=”1.3em” header_4_font=”|600|||||||” locked=”off” global_colors_info=”{}”]<\/p>\n
![](\"https:\/\/ecommerce-app.imw3.com\/cosmetic\/wp-content\/uploads\/2023\/01\/Capture-3.png\")
<\/p>\na) Checkout Type<\/b><\/p>\n
In checkout types, there are three further options available.<\/p>\n
- \n
- Default<\/b>: by selecting this option, you allow the web view of checkout. This checkout option appears in your app.<\/li>\n
- Select your app from the All Apps page in\u00a0OneSignal<\/strong>, then go to\u00a0 \u00a0 \u00a0\u201cApp Settings<\/strong>\u201d and press \u201cConfigure\u201d<\/strong>\u00a0to the right of the Apple\u00a0iOS<\/strong>\u00a0Settings.<\/li>\n<\/ol>\n
- Give the file a unique name using the .p12 extension, and press save. You will have an option to protect the file with a password. If you add a password, you need to enter this same password on\u00a0OneSignal<\/strong>.<\/li>\n<\/ol>\n
- Press\u00a0\u201cChoose File\u2026\u201d<\/strong>\u00a0select the \u201ccertSigningRequest\u201d file you saved in step 1, press \u201copen<\/strong>\u201c, and then press\u00a0\u201cGenerate<\/strong>\u201c..<\/li>\n<\/ol>\n
- Select \u201cKeychain<\/strong>\u00a0Access<\/strong>\u201d > \u201cCertificate<\/strong>\u00a0Assistant<\/strong>\u201d > \u201cRequest<\/strong>\u00a0a<\/strong>\u00a0Certificate<\/strong>\u00a0From<\/strong>\u00a0a Certificate<\/strong>\u00a0Authority\u2026<\/strong>\u201c.<\/li>\n<\/ol>\n
- Your\u00a0OneSignal App Auth<\/strong>\u00a0Key, available in\u00a0Keys & IDs.<\/a><\/li>\n
- A\u00a0OneSignal Account<\/a>, if you do not already have one.<\/li>\n
- You\u2019ll need your\u00a0Sender ID<\/strong>, also known as the\u00a0Google Project Number<\/strong>, later as well<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n
- \u00a0Select the\u00a0\u201cCLOUD MESSAGING\u201d<\/strong>\u00a0tab.<\/li>\n
- \u00a0Click the Gear icon in the top left and select\u00a0\u201cProject settings\u201d<\/strong>.<\/li>\n
- Visit the\u00a0Firebase Console<\/a>\u00a0and sign in with your Google account.<\/li>\n<\/ol>\n