search_box

Customize App

Once the Mobile App is installed in the Shopify store, the admin can customize the app as per the requirement.

To customize the app

  • Go to the Shopify store.

The Shopify home page appears as shown in the following figure:

ShopifyHomePage

  • In the left navigation panel, click Apps.

The page appears as shown in the following figure:

AppsList

  • In the right panel, click the MageNative App – Mobile App Builder for Android and iOS link.
  • Under the App Configurations tab, the following information appears
    1. In the Shopify Storefront Access Token box,  enter the Storefront access token, which was created in the previous step How to get the Storefront Access token
    2. Click Save & Next

Shopify Mobile App by MageNative

  • Under the Customize Theme section, enter the app title and set the color palettes as per the following steps:

Shopify Mobile App Customize theme general settings

  1. In the App Name box, enter the name of the app.
    Appears under the App icon on the Mobile home screen.
  2. In the App Theme Color box, enter the required color code.
    Used as the background color in the app.
  • In the left navigation panel of the page, click the Branding Images tab.

The page appears as shown in the following figure:

Shopify mobile app customize theme branding images

  • Under the Branding Images section, do the following steps:
    1. In the App Icon area, click the image icon to select the required image.
      The App Icon appears in the App Store and on the App home screen.
      Note: Select the App Icon image of the 1024 x 1024 px size and format such as png, jpeg, jpg.
    2. In the App Header Icon area, click the image icon to select the required image.
      The App Header Icon appears in the header of the App.
      Note: Select the App Header Icon image of the 762 x 241 px size and format such as png, jpeg, jpg.
    3. In the Splash Screen area, click the image icon to select the required image.
      Shopify mobile app splash screen
      The Splash Screen appears immediately when the app is opened.
      Note: Select the Splash Screen image of the 1080 x 1556 px size and format such as png, jpeg, jpg.
    4. In the Login Page Background Image area, click the image icon to select the required image.
      Shopify mobile app login page background
      The Login Page Background Image is used to display the background image on the Login page of the app.
      Note: Select the Login Page Background Image of the 750 x 1334 px size and format such as png, jpeg, jpg.
  • In the left navigation panel of the page, click the Home Page Content tab.

The page appears as shown in the following figure:

Shopify mobile app home page content
The store admin can select the home page banner and the featured collection for the app.

  1. To add the home page banner, in the Home Page Banners area,  do the following steps:
    1. Click the Add Banner button.
      Some fields appear to upload the banner image and provide the link to the selected option.
      SelectHomePageBanner
    2. Click the image icon to select the required image for the banner.
      Note: Select the Banner image of the 700×300 px size and format such as png, jpeg, jpg.
    3. In the list, select one of the following options:
      • Collection: If selected, then another list field appears as highlighted, where the admin has to select the required collection name so that the banner is linked and redirected to the collection selected from the list.
        ListFieldRelatedToCollection1
      • Product: If selected, then the next relevant fields appear to search and enter the product name so that the banner is linked and redirected to the product selected from the listed product list.
        ListFieldRelatedToProduct1
      • Web Address: If selected, then a text field appears to enter the Web address so that the banner is linked and redirected to the mentioned web address.
        TextFieldRelatedToWeb
  2. Scroll down to the Featured Collection area.
    In the Featured Collection area, store admin can display the featured collection of the products on the Home Screen of the app.
    Shopify mobile app featured collection
  3. In the Featured Collection area, do the following steps:
    1. In the Name box, enter the name of the featured collection.
    2. In the Select a Collection list, select the required collection.
Yes No Suggest edit
Suggest Edit