Follow

Getting started: Configure The App Appearance

 

 I. Dashboard Configure

 

On the navigation bar, click on App builder. We have 2 key parts to modify your app appearance by your own and here they are: Theme and Information.
1. Theme
In Theme, you will see the page that list our available themes.

image001.png

By default, the Matrix Theme would be selected. You can choose to install other themes or continue Customizing the selected theme.
By choosing installing a theme, you can modify the theme by your own. We are now available on modifying Theme Color, including all of the colors used in the app. We detached the colors to 2 parts: Basic Colors and Advance Colors
Basic Color Options

image003.png

In this section, you can enter color for Header background, Label background (Key color), Top menu icon, Button background, Button text, Menu background, Menu text, Menu line, Menu icon. You can use Theme Preview on the right side to know how each aspect looks on the app and choose the most suitable colors more easily.

Advance Color Options

In this section and you can enter color for: Search box background, Search text, App background, Content, Image border, Line, Price, Special price, Icon, Section, Status Bar Background, Status Bar Text, Loading. Again. You can use Theme Preview on the right side to know how each aspect looks on the app and choose the most suitable colors more easily.

image005.png

2. Information

Here is the place for you to enter App name, upload icon, logo and loading screen image. Besides, Splash Screen Color and Loading Splash Screen Color would be configured in this section.

image007.png

II. Backend Configuration

1. Magento 1

1.1. Configure Banners

  • Log in to your Magento Backend. To configure banners, locate to Simiconnector/ Themes/ Home content/ Banners

image018.png

NOTE: If you are seeing the message below, please refer to Part 1: Installing the connector and enter the correct Token key and App Key

image020.png

  • On this new page, you can see your list of banners and you can add new banners by clicking on (+) Add Banner.

- Store View: Choose the store(s) where you would like the banner to appear

- Title: Create a name for your This name is visible on your backend only.

- Image (width:800px, height:400px): The banner image to be shown on mobile app.

- Tablet Image (width:800px, height:400px): The banner image to be shown on tablet app.

- Direct viewers to: Choose what tapping on the banner will lead to: Product Detail page (Product In-app), Category page (Category In-app) or External link (Website Page).

- Product ID / Category ID / Url: Choose a specific product, category or URL for the banner to point to.

- Sort Order: The order where this banner will appear.

- Status: Choose if you want the banner to be Enabled (shown to customers) or Disabled (not shown to customers)

Finally, click on “Save Banner” to save your information.

1.2. Home Categories

1. To configure which categories appear on home page, locate to Simiconnector/ Themes/ Home content/ Home Categories

image022.png

2. On this new page, you can see your list of home categories and you can add new categories by clicking on to (+) Add Category.

Item information: General configuration of home categories for every theme

  • Store View: Choose the store(s) that you would like the category to appear
  • Image: The category image to be shown on mobile app
  • Tablet Image: The category image to be shown on tablet app
  • Category ID: Choose which category to be shown
  • Sort Order: The order where this category will appear (left-to-right direction)
  • Status: Choose if you want the category to be Enabled (shown to customers) or Disabled (not shown to customers).

image024.png

a) Default + Zara Theme Configuration

  • Login to your SimiCart Dashboard: From Theme Design > Home Layout > Choose Default Theme OR Zara theme > click Save.

image028.png

 

  • Go back to your backend and upload category images + choose a store and a store view where you want to show them on + choose appropriate categories to be shown.

Recommended Image size:

  • Default: 400x400 pixel (or any image with Square shape).
  • Zara will fit your images in a vertical order starting from banners so there is no limit here. Just use your imagination. We do recommend rectangle images size 600x300 or similar.

image033.png image035.png

Example categories: VIP (500x500) + Accessories (600x300)

Screenshot_1.png

As can be seen in the red highlighted area.VIP Category is positioned as 1 (start from 0), and Accessories is positioned as 2

b) Matrix Theme Configuration

  • Login to your SimiCart Dashboard: From Theme Design > Home Layout > Choose Matrix Theme > click Save

image036.png

 

  • Go back to your backend:

- Upload category images

- Choose a store and a store view where you want to show

- Choose appropriate categories to be shown.

However, unlike Zara or default, Matrix theme offers a mock-up presentation and additional configurations due to its strong ability to be customized.

image038.png

 

- Image Width/Screen Width Ratio: The ‘category image width’ to ‘mobile screen width’ ratio in percentage.

- Image Height/Screen Width Ratio: The ‘category image height’ to ‘mobile screen width’ ratio in percentage

- Tablet Image Width/Screen Width Ratio: The ‘category image width’ to ‘tablet screen width’ ratio in percentage (Leave it empty if you want to use Phone Value)

- Tablet Image Height/Screen Width Ratio: The ‘category image height’ to ‘tablet screen width’ ratio in percentage (Leave it empty if you want to use Phone Value)

- Row Number: Choose which row you want the category to appear

- Store view for Mockup Preview: Choose which theme you want to show for the mockup underneath

Screenshot_2.png

 

Finally, click Save Category and you will see the changes applied in the Matrix Theme Mockup Preview.

 

1.3. Product Lists

Product list is not a particular category. It is a list of products which have a common characteristic (best seller, most viewed etc.)

1. To configure which product list appear on home page, locate to Simiconnector/ Themes/ Home content/ Product Lists

image046.png

2. On this new page, you can see your list of home categories and you can add new categories by clicking on (+) Add Product List

Product List information: General configuration of product list for every theme

  • Store View: Choose the store(s) where you would like the product list to appear
  • Title: Create a name for your product list
  • Product List Image: The product list image to be shown on mobile app
  • Product List Tablet Image: The product list image to be shown on tablet app
  • Sort Order: The order in which this list will appear (left-to-right direction)
  • Product List Type: Choose to use a SimiCart’s pre-defined product list or create your custom list.
  • Product ID: Select products to be included in your custom list. If you choose a SimiCart’s pre-defined list, this field will disappear.
  • Enable: Choose if you want the category to be Enabled (shown to customers) or Disabled (not shown to customers)

image048.png

Similar configuration process from Categories can be done here apart from the fact that you can choose the product list and more importantly to add a custom list of any products you want to have in there.

Finally, click Save List and you will see the changes applied in the Matrix Theme Mockup Preview.

 

2. Magento 2

2.1. Configure Banners

1. Log in to your Magento Backend. To configure banners, locate to SimiCart/ Themes/ Banners

image050.png

NOTE: If you are seeing the message warning message, please refer to Step 1: Installing the connector and enter the correct Secret Key

2. On this new page, you can see your list of banners and you can add new banners by clicking on (+) Add Banner.

  • Store View: Choose the store(s) where you would like the banner to appear
  • Title: Create a name for your This name is visible on your backend only.
  • Image (Width:800px, Height:400px): The banner image to be shown on mobile app.
  • Tablet Image (Width:800px, Height:400px): The banner image to be shown on tablet app.
  • Direct viewers to: Choose what tapping on the banner will lead to: Product detail page (Product In-app), Category page (Category In-app), External link (Website Page).
  • Product ID / Category ID / Url: Choose a specific product, category or URL for the banner to point to.
  • Sort Order: The order in which this banner will appear.
  • Status: Choose if you want the banner to be Enabled (shown to customers) or Disabled (not shown to customers)

Finally, click on “Save Banner” to save your information.

2.2. Home Categories

1. To configure which categories appear on home page, locate to SimiCart/ Themes/ Home Categories

image052.png

2. On this new page, you can see your list of home categories and you can add new categories by clicking on (+) Add Simicategory.

image054.png

 

Item information: General configuration of home categories for every theme

  • Store View: Choose the store(s) where you would like the category to appear
  • Image: The category image to be shown on mobile app
  • Tablet Image: The category image to be shown on tablet app
  • Categories: Choose which category to be shown
  • Sort Order: The order in which this category will appear (left-to-right direction)
  • Status: Choose if you want the category to be Enabled (shown to customers) or Disabled (not shown to customers)

 

a) Default + Zara Theme Configuration

  • Login to your SimiCart Dashboard: From Theme Design > Home Layout > Choose Default Theme or Zara theme > click Save

image056.png

  • Go back to your backend and upload category images + choose a store and store view where you want to show them + choose appropriate categories to be shown.

Recommended Image size:

  • Default: 400x400 pixel (or any image with Square shape).
  • Zara will fit your images in a vertical order starting from banners so there is no limit here. Just use your imagination. We do recommend rectangle images size 600x300 or similar

  image033.png image035.png

Example categories: VIP (500x500) + Accessories (600x300)

Screenshot_1.png

As can be seen in the red highlighted area.VIP Category is positioned as 1 (start from 0), and Accessories is positioned as 2

 

b) Matrix Theme Configuration

  • Login to your SimiCart Dashboard: From Theme Design > Home Layout > Choose Matrix Theme > click Save

image036.png

 

  • Go back to your backend website

- Upload category images

- Choose a store and a store view where you want to show them

- Choose appropriate categories to be shown.

However, unlike Zara or default, Matrix theme offers a mock-up presentation and additional configurations due to its strong ability to be customized.

image060.png

 

- Image Width/Screen Width Ratio: The ‘category image width’ to ‘mobile screen width’ ratio in percentage.

- Image Height/Screen Width Ratio: The ‘category image height’ to ‘mobile screen width’ ratio in percentage

- Tablet Image Width/Screen Width Ratio: The ‘category image width’ to ‘tablet screen width’ ratio in percentage (Leave it empty if you want to use Phone Value)

- Tablet Image Height/Screen Width Ratio: The ‘category image height’ to ‘tablet screen width’ ratio in percentage (Leave it empty if you want to use Phone Value)

- Row Number: Choose which row you want the category to appear

- Store view for Mockup Preview: Choose which theme you want to show for the mockup underneath.

Screenshot_2.png

 

Finally, click Save and you will see the changes applied in the Matrix Theme Mockup Preview.

 

2.3. Product Lists

Product list is not a particular category. It is a list of products which have a common characteristic (best seller, most viewed etc.)

  • To configure which product list appears on home page, locate to Simiconnector/ Themes/ Home content/ Product Lists

image062.png

 

  • On this new page, you can see your list of home categories and you can add new categories by clicking on (+) Add Product List

Product List information: General configuration of product list for every theme

- Store View: Choose the store(s) that you would like the product list to appear

- Title: Create a name for your product list

- Product List Image: The product list image to be shown on mobile app

- Product List Tablet Image: The product list image to be shown on tablet app

- Sort Order: The order in which this list will appear (left-to-right direction)

- Product List Type: Choose to use a SimiCart’s pre-defined product list or create your custom list.

- Product ID: Select products to be included in your custom list. If you choose a SimiCart’s pre-defined list, this field will disappear.

- Enable: Choose if you want the category to be Enabled (shown to customers) or Disabled (not shown to customers)

image064.png

Similar configuration process from Categories can be done here apart from the fact that you can choose the product list and more importantly to add a custom list of any products you want to have in there.

Finally, click Save List and you will see the changes applied in the Matrix Theme Mockup Preview.

 

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments