Theme Components Section

Theme Components Section

Start customizing your mobile app in the theme settings section. Just drag and drop the component you want to add to your mobile app and preview the changes happening in real-time on the mobile screen next to it. In the right-hand corner, you can find the button to change the theme and theme section.

Configure Theme
MageNative’s mobile app builder comes with 9 pre-built themes that are completely customizable. The themes are built to cater to certain specific kinds of stores. You can also find an option to Build Your Theme using the available components.


There are 9 components by making use of which you can build and customize your app. You can see the list of components that are enabled on your home screen. Right next to it, you'll see the preview of all the components and changes you make.
Let's discuss each component and its functionality.



Banner Slider
The banner slider lets you add different banners to your app to make it look more enticing and appealing. Drag it to the mobile screen next to it and see how it will look in your app. Click on the edit button to adjust its layout, color, and fonts and upload different banners, and click on the ’apply changes’ button to save the modifications. Also, you can hide/delete it by clicking on the ‘hide/delete’ button.



Product Slider
Product slider lets you showcase your featured or top-selling products in your app in the form of a carousel. Drag it to the mobile screen next to it and see how it will look in your app. It lets you adjust its layout, color, and fonts and uploads different products into it by clicking on the edit button. When you are done with changes, click the ‘apply changes button’ to save the modifications. Or you can hide/delete it by clicking on the ‘hide/delete’ button.



Standalone Banner
A standalone banner lets you display special offers or sales in your mobile app. Here you can change its layout, i.e. button position, text alignment, or button title. Adjust its colors and fonts. And upload banners using collections, products, or web URLs. When you are done with the required changes, click the ’apply changes’ button to save the modifications. Also, you can hide/delete it by clicking on the ‘hide/delete’ button.



Category Square
You can use the category square component to display the product category in the form of squares. Drag and drop it to the mobile screen next to it and preview what it looks like. You can also adjust its layout, color fonts, or upload items by clicking on the edit button. After making all the required changes, click the 'Apply changes’ button to save the modifications. You can hide/delete it by clicking on the ‘hide/delete’ button.



Collection grid layout
The collection grid layout lets you showcase your product collection in the form of a grid. Here you can adjust its layout by adding ‘no of rows’, ‘Item shape’, or ‘text alignment’. Or you can show/hide the Item Title and Item border. Moreover, it lets you change its color and fonts. And let you link products to the collection grid. You can make all these changes by clicking on the edit button, and when you are done with the changes, save them by clicking on ‘Apply changes’. You can hide/delete it by clicking on the ‘hide/delete’ button.



Product Layout
Another useful component in the app is the 3 product layout, where you can show one main featured item and related items on the screen. Drag it to the mobile screen next to it and preview what it looks like. Click on the ‘Edit’ button to change the layout, i.e. Item Text Alignment, Product Shape, header title, or header subtitle. Also, you can change color, and fonts, upload images, and click ‘apply changes’. You can hide/delete it by clicking on the ‘hide/delete’ button.



Product Grid Layout
A product grid layout lets you showcase a product collection in the form of a grid. Click on the edit button to change its layout i.e.
1- ‘Choose layout’ lets you pick the layout in which you want to show your item, like a list or grid
2- You can change the number of items displayed in a row by clicking ‘Items in a row’.
3- Click on ‘No. of rows’ to adjust row numbers as per your requirement
4- You choose from the ‘Item shape’ dropdown to change the item shape to square or rounded
5- You can change ‘text alignment’ by choosing from the ‘text alignment’ dropdown.



Show/hide option
Show/hide options let you show/hide elements like Header, header subtitle, header action, Item border, Item title, Item price, Item special price, or header deals.  

Header Title update
Header title update lets you change header title, subtitle, or Header action. You can also change the colors and fonts of the grid and click on ‘Apply changes when you are done with all the changes or click on ‘cancel’ if you don't want to make any changes. You can hide/delete it by clicking on the ‘hide/delete button.  

Collection slider
The collection slider lets you showcase the collection of the product. You can make changes in the collection slider by clicking on the edit button. Here you can adjust the layout, i.e. product shape and text alignment. You can show/hide the header, header subtitle or Item border. You can change colors, and fonts, and upload items, then click on the ‘apply changes’ button when you have completed all the changes. You can hide/delete it by clicking on the ‘hide/delete button.



I hope this will help you use different components and themes and customize your app in a better way.

    • Related Articles

    • Theme Settings Section

      Once you have installed your app, you would first design the homepage that suits your brand image and preferences. With MageNative, you can perform customization seamlessly with minimum effort and view the changes in real-time. Theme Settings Click ...

    • How to make Products/Collections available for Mobile App Builder

      How to make Products available for Mobile App Builder-MageNative Log in to your Shopify Admin Go to the Products -> All products Select the Product(s) that you want to make available for the Mobile App Builder-MageNative Click on More Actions and Add ...

    • Overview Section

      The MageNative Shopify Mobile App extension is very useful to build the mobile app easily and in a very flexible manner. With the help of the MageNative Shopify Mobile App extension, the store admin can convert the Shopify website into a featured ...

    • Preview Your Apps Section

      Preview Your Mobile Apps Congratulations on completing the first step which is the Theme Setting. You can now preview your fully functional and featured Android and iOS apps and make changes in real-time. Follow these simple steps to view your mobile ...

    • How to Enable App-only Discounts

      Offering discounts and rebates on purchases is an effective way to attract customers to your store. 93% of U.S. shoppers cite discounts and offers as important factors when deciding whether or not to purchase from a retailer or brand. Moreover, ...