Start With Our Free Plan
Today!
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
.png)
.png)
Inside our app editor (located on the left as shown in fig) is where you can find all the widgets to design your app home screen, navigation tab, collections, etc. However, in this article we will be only focusing on how to use design elements to customize your home screen.
Creating your Shopify app with Appokart is very simple. You don’t need to have the knowledge of coding, we will be simply using the drag and drop function to build the entire app from scratch.
For simplicity, we have decided our app editor into three sections.
To customize the app you’ll be dragging the design element from the “drag components section” and drop it over the app customization screen. Not that you know the basics, let’s start with a detailed explanation of each design element and how to use them to build your Shoppify app.
The search bar is meant to help your customers find what they wanted just by typing the keyword related to their search term. Start by adding it to the app customization screen by dragging it from the design element section. To start editing, just hover your cursor over the search bar you just added and you can see the edit icon appearing on your screen just like shown in the image below.
By clicking on the edit button you will be greeted with a new screen showcasing all the options as shown in the image below. You can use these options to customize the search bar. You can change the name of the search bar, edit the background colour, or border colour. Edit the icon colour, and alignment. Not just this you can also edit the icon size, alignment, and colour. Once you are satisfied with the design changes, click on save.
This is the first banner option, used to feature your new product release, special offers, discounted deals, etc. Usually placed beneath the search bar this is the section your users are going to see first when using your app.
It is located inside the design element section on the left as shown in the figure. Simply drag-n-drop it to the app customization screen and click on the edit button to start editing as shown in the figure below.
After clicking the edit button, a new screen will appear that you will be using to edit the banner of your app. By default, you get to add the image and edit the action that will occur when the user will tap/click the banner. To set the action choose one from the banner action button, just as shown in figure below.
If you have noticed there is a toggle on the right top of the banner option screen. By turning on the toggle you get access to the advanced settings of the banner. Using these advanced settings you can customize the banner even more.
As you can see in the image above, turning on the toggle will now allow you to enter the header title and subheading that you can use to describe your product.
Not just this but now you can edit the background colour, header alignment, heading, subheading font size, border headings etc.
This is another banner widget that serves the same purpose as the banner widget. The only difference is that you can add more than just one image to feature that top (or wherever you want) of your app screen.
Again to use this feature drag-n-drop it from the widgets section to your app customization screen. After that use the edit button to open up the customization option of rotating banner (as shown in fig below).
The customization screen is somewhat similar to that of the Banner screen that we have discussed in the above point. You can add multiple images to showcase different products, discounted offers, and sales all at the same time. The banner will rotate after a few seconds showcasing multiple items that you want to feature in your app.
To open the advance setting menu, you can turn on the toggle as shown in the figure. After that, you’ll be able to customize your rotating banner. The customization menu is the same as the one that we have discussed in the above point. You can edit the background colour, header alignment, heading, subheading font size, border headings etc. Remember to save your changes.
To list different products in your app for the customers to purchase you get 2 different horizontal scroll list widget. Both the layouts are capable of showcasing 4 different products at once. As shown in the figure below.
You can find both the widgets to use inside the widget drawer. The only difference is one uses the square grid (Horizontal scroll list square) to showcase products while the other uses circles (Horizontal scroll list circle). By clicking on the edit button you can start customizing. You’ll find the similar customization settings as shown in figure below. Start with selecting the product collection you wanted to add. Select the number of products you want to showcase.
After that begin with customizing your header icon and colour then move to the action button icon and colour. Change the header icon and text size, action button and text size, add header background or change the product background.
Showcase your best products with the added information. The best part about the product titles widget is that you can use bigger images to showcase your products. You can easily spot it listed in the widget section, drag it out and add it to the app customization screen. As shown below.
To start customizing your product listing using the Products titles widget, click on the edit button and it will open up a bunch of interesting options. Start with selecting the product collection category. Add the collection title, and its description, change the title and title description font size.
Add the title colour and background colour. Select how you want the images to appear by changing the image size. Change the product font size and colour and build your own product collection screen. Just remember to press save once you’re done customizing your products collection using product titles widget.
Need more options to showcase your product collection? Use the browse collection widget, somewhat similar to the vertical layout as it also showcases products in grid view. The only
the difference is that this design will not allow the users to interact with each product individually.
By tapping on the browse collection widget, users will be sent to the product collection page instead of going to that individual product. To start using this option simply pull the browse collection widget from the widget section on the left.
Click on the edit button and see all the customization options that are available as shown in figure below. Select the product collection. You can also rename the browse collection text to something else that better suits your business. After that change the text size and colour, try different image sizes, edit the action button. Once you are satisfied, click on save.
Wanted to showcase one product at a time? Use this widget. Can be easily found under the widgets section. This is an interactive widget that your customers can swipe to see different products. Now you can either different set of products, one product will be visible at a time or add the product collection that belongs to the same category.
Start with selecting whether you wanted to showcase different products or wanted to showcase a collection of products from the edit screen. After that you can edit the product title, text size and colour. Not just this but this section comes with 2 different customization features.
Now when you know the way around to our design widgets you are ready to build your first app. Let’s get started.
We have build AppOkart the world’s most intuitive mobile app builder. You need no coding to build your Shopify-based mobile app using Appokart….
