[Customisation] Chapter 13 : Product Finder customization guide

1）Software preparation

Below are the software needed for Product Catalogue customization

• DB Browser for SQLite

  https://sqlitebrowser.org/dl/

2) Changing the intro video

1. Find or create your desired intro video, the ideal video resolution is 1080 x 1920 pixels.

2. Rename the video as "Idle.mp4" and upload it to the asset folder of your app in the MagicMirror portal

3) Basics of .DB file for Product Catalogue

1. Download the layoutinfo.db file from the Asset directory of your app on MagicMirror Portal

2. Click on Browse Data and you will see the following screen. Each of the lines is a product. A product will have a "Product" label in the "Template" column.

3. Each of the product rows will have its own properties such as:

• Names

  This text will be the display name text of the product

• Brands

  Fill this text with the brand of the product

• ItemStatus

  Define whether the item is a hot item or not, hot items will be displayed on Home Page

• Prices

  The original and discounted price

• Description

  The product description that shows up after clicking the product

• Category

  The category the product belongs to, fill the Category column with the category name of your choice, you can have up to 5 different categories.

• Product Image

  The file name of the product-display image. Example: Jewelry1.png

• Recommends

  Each product, when clicked, will show 3 small item slots that show the recommended item.

In the DB file, there will be 3 corresponding columns, type in the PageID of the intended products in the columns and they will show up in the recommendation slots.

4) Changing product on the Home page

1. The products are added to the Home page by labelling them as hot items in the ItemStatus column.

2. There can be 10 hot items, they are labelled as HotItem0-9 as shown in the picture below. Simply add the label to the intended product for them to appear in the home page

5) Adding a product to the DB file

1. Click on the "Insert a new record" button as shown in the picture below

   

2. A new row will be created, fill in the details columns of the product

6) Uploading the new product images to MagicMirror Portal 

1. Simply drag and drop the new product image to the assets folder of the app on MagicMirror Portal to upload it

2. Make sure the image file names are as stated in the Product Image column

7) Uploading the updated DB file back to MagicMirror Portal 

Save the DB file and upload it back to the assets folder of the app on MagicMirror Portal