For a beautiful look and feel to our mobile application’s catalog, it is necessary to add thumbnail images for main categories. We are going to prepare images for each of the top-level categories and update categories to use those images in our Magento mobile app.
It doesn’t matter if we want to use the existing category images, or prepare new images, first of all, we have to resize/crop them to 80px x 80px at 72 dpi in order to be displayed properly on targeted mobile devices. If we don’t resize them, they will break the layout of our Magento mobile app and the category listing will not look very nice to the mobile users. We can use any image-editing program to resize/crop them as we need. When we resize our images and save them in png or jpg format, we can upload and assign them to our product categories.
How to do it…
1. Log in to Magento Admin Panel and navigate through Catalog | Manage Categories.
2. Locate the Choose Store View list located in the left column above the Categories tree and select our Store View that we defined for our Magento mobile app.
Important: Do not apply any changes on All Store Views, but rather in the separate Store View that we created, in order to avoid messing up the website’s settings that are not connected to our Magento mobile app!
3. On the left-hand side of the screen, click on the category that needs to be updated inside the tree.
4. On the right-hand side of the screen, you can see the General information tab. There we can see some information about the selected category.
5. Find the field labeled Thumbnail Image and uncheck the Use Default Value checkbox on the right. This way the Browse… button will appear enabled.
If this category already has an image set on some other scope (All Store Views), you may have to check the Delete Image checkbox and click on the Save Category button in order to make the Browse… button appear enabled. This will not delete the image set in other Store View scopes but just in those selected, which is just what we need.
6. Click on the Browse… button in order to upload the prepared image for the selected category.
7. After uploading is finished, just click on the Save Category button in the top-right corner of the screen.
8. The category is now saved and a new thumbnail image is assigned to it.
9. Repeat step 3 for each category that is the first child of the Root Catalog category.
How it works
When the thumbnail image is uploaded, it is assigned to the edited category and our mobile application uses that image when the category screen is shown.
It is important to use the exactly defined dimension of images (80px x 80px at 72 dpi) in order for them to be displayed properly in our mobile app.
If we are going to use the same images like we have already defined as the main image for a specific category, it may be easiest to first download the category images from the main website and then to resize and upload them as thumbnail images for each category.
- Magento merchants: Our solution is specially designed for Magento platform so you can get all the best features of Magento to apps. If you use a solution for every platform you’remissing many good things.
- Mobile shopping apps: You will have apps that are coded separately and specifically for iPhone and android. Your customers can search and download your shopping apps from Google Play and Apple stores. And again, such tailored apps will bring the best user experience!
More useful post you may concern: